How to add a section of multiple videos slider in a Shopify Store?

Store Design
, , ,
1

Hi there,

I am looking for a Video Slider Show Section where I can add multiple videos and they come one after the other. Can someone please provide me the code to create such section?

Kind Regards,

2

Hi @AllureVerve , I hope you are doing well, kindly check out the below videos.

  1. https://www.youtube.com/watch?v=_lffKW46E9w
  2. https://www.youtube.com/watch?v=uOPc30CKxtI
  3. https://www.youtube.com/watch?v=poVECUfM2Mg&pp=ygVCSG93IHRvIGFkZCBhIHNlY3Rpb24gb2YgbXVsdGlwbGUgdmlkZW9zIHNsaWRlciBpbiBhIFNob3BpZnkgU3RvcmU_

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

3

The reference videos are not for a video slider. I need multiple videos in a slider. Can you please share the code for this?

4

Since you are asking for a code, I am assuming you already know how and where you need to put the following code I am giving you below:

Code for your newly created video-slider.liquid file:

{% schema %}
{
“name”: “Video Slider”,
“settings”: [
{
“type”: “header”,
“content”: “Video Slider Settings”
},
{
“type”: “blocks”,
“name”: “Videos”,
“settings”: ,
“blocks”: [
{
“type”: “video”,
“name”: “Video”,
“settings”: [
{
“type”: “text”,
“id”: “video_url”,
“label”: “Video URL”,
“default”: “”
}
]
}
],
“presets”: [
{
“name”: “Default”,
“category”: “Custom”
}
]
}
],
“presets”: [
{
“name”: “Video Slider”,
“category”: “Custom”
}
]
}
{% endschema %}

{% for block in section.blocks %}
{% endfor %}
Previous Next

Some custom CSS:

.video-slider {
position: relative;
overflow: hidden;
}

.video-slider__wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}

.video-slide {
min-width: 100%;
}

.video-slide video {
width: 100%;
height: auto;
}

.video-slider__prev,
.video-slider__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 1;
}

.video-slider__prev {
left: 10px;
}

.video-slider__next {
right: 10px;
}

you can change the css if you want.

Javascript code for functionality:

document.addEventListener('DOMContentLoaded', function() {
const prevButton = document.querySelector('.video-slider__prev');
const nextButton = document.querySelector('.video-slider__next');
const wrapper = document.querySelector('.video-slider__wrapper');
let index = 0;
const slides = document.querySelectorAll('.video-slide');
const totalSlides = slides.length;

function updateSlider() {
const offset = -index * 100;
wrapper.style.transform = `translateX(${offset}%)`;
}

prevButton.addEventListener('click', function() {
index = (index > 0) ? index - 1 : totalSlides - 1;
updateSlider();
});

nextButton.addEventListener('click', function() {
index = (index < totalSlides - 1) ? index + 1 : 0;
updateSlider();
});

updateSlider();
});

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

1 Like
5

Thank you so much for your support.

Yes. I’d need to create a new section and put this code in that liquid file but I am confused about CSS and JS code.

For CSS and JS code, where should I put them?

6

Here i have created a custom video slider section which you can add to any theme.