0

I have created a custom page using route and controller.I have some image paths then how can i create slider for using these images

1 Answer 1

0

Try using sick slider https://kenwheeler.github.io/slick/

place slick.min.js in app/design/frontend/[You Design Dir]/[Theme Name]/web/js/slick.min.js then use .slick on the list

<ol id="slider">
   <div class="image-div">
   <div class="image-div">
   <div class="image-div">
   <div class="image-div">
</ol>
$('#slider').slick({
            centerMode: false,
            infinite: true,
            slidesToShow: 4,
            dots: false,
            autoplay: false,
            responsive: [
                {
                    breakpoint: 1360,
                    settings: {
                        slidesToShow: 3,
                        infinite: true,
                        slidesToScroll: 1,
                        arrows: false,
                        dots: true,
                    }
                },
                {
                    breakpoint: 1025,
                    settings: {
                        slidesToShow: 2,
                        infinite: true,
                        slidesToScroll: 1,
                        arrows: false,
                        dots: true,
                    }
                },
                {
                    breakpoint: 769,
                    settings: {
                        slidesToShow: 1,
                        infinite: true,
                        slidesToScroll: 1,
                        arrows: false,
                        dots: true,
                        variableWidth: true
                    }
                },
                {
                    breakpoint: 560,
                    settings: "unslick"
                }
            ]
        });

In this example i have used slick sliders, I have updated the break points fofr responsive view of slider and for a particular break point i have removed the slider using unslick property

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.