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

[AllureVerve]

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,

[steve_michael2]

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=ygVCSG93IHRvIGFkZCBhIHNlY3Rpb24gb2YgbXVsdGlwbGUgdmlkZ...

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

Thanks!

[AllureVerve]

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

[steve_michael2]

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 %}

<div class="video-slider">
<div class="video-slider__wrapper">
{% for block in section.blocks %}
<div class="video-slide">
<video controls>
<source src="{{ block.settings.video_url }}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
{% endfor %}
</div>
<button class="video-slider__prev">Previous</button>
<button class="video-slider__next">Next</button>
</div>

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!

[AllureVerve]

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?