How to add collection and product slider on scroll bar and button in this slider

[Aleksander22]

Hi,

I really wanted to add scroll bar in collection slider and also product slider but dont know how to do it. I want it to place just below the slider. Im sending the example picture how I wanted it to looks like. And also I want the button in this collection if this possible to add

I would be really greatful for help 

[polo_msweb]

Hi @Aleksander22,

This is Polo From MS  Web Designer. 
I would love to assist you with your query.

Could you please share your store URL? so that we can check and  get back to you with the proper solution. 

If you have any doubt, please feel free to ask.

Regards
Polo

[Aleksander22]

Here is link:  https://112479-08.myshopify.com

And Password: mowfla

[Small_Task_Help]

Hi,

You need to work on 3 things HTML structure,CSS and Javascript

Example of HTML Struture 

<div class="slider-container">
    <div class="slider">
        <div class="slide"> <!-- Each slide represents a collection or product -->
            <h3>Slide 1</h3>
            <p>Content for slide 1</p>
        </div>
        <div class="slide">
            <h3>Slide 2</h3>
            <p>Content for slide 2</p>
        </div>
        <!-- Add more slides as needed -->
    </div>
    <div class="slider-navigation">
        <button class="prev">Prev</button>
        <button class="next">Next</button>
    </div>
</div>

Then do the styling using CSS

example of jQuery/javascript

$(document).ready(function() {
    var slideWidth = $('.slide').outerWidth(); // Width of each slide
    var slideCount = $('.slide').length; // Number of slides
    var currentSlide = 0;

    $('.next').click(function() {
        if (currentSlide < slideCount - 1) {
            currentSlide++;
            $('.slider').css('transform', 'translateX(' + (-currentSlide * slideWidth) + 'px)');
        }
    });

    $('.prev').click(function() {
        if (currentSlide > 0) {
            currentSlide--;
            $('.slider').css('transform', 'translateX(' + (-currentSlide * slideWidth) + 'px)');
        }
    });
});

[Aleksander22]

Thanks for respond. Can you guide me step by step how to do it because i have no idea.

[Small_Task_Help]

Some coding is there , you can hire Shopify developer