Как я могу заставить мой SlickJS Carousal циклически переключаться между 3 изображениями и видеть их все во время езды на велосипеде? - PullRequest
Новая
       22

Как я могу заставить мой SlickJS Carousal циклически переключаться между 3 изображениями и видеть их все во время езды на велосипеде?

0 голосов
/ 04 октября 2018

Я использую SlickJS для создания слайдера, который позволит мне переключаться между изображениями.

Аналогично этому изображению

Ссылка на документацию SlickJS

Есть несколько проблем, с которыми я сталкиваюсь.

Во-первых, насколько я знаю, вы не можете переключаться между изображениями, если вы показываете их все сразу,Например, если вы установили slidesToShow на 3, и у вас есть только 3 изображения, вы не можете циклически перемещаться по ним.

Другая проблема, с которой я сталкиваюсь, заключается в том, что даже при назначении пользовательских кнопок и запуске slickNext и slickPrev работает через них, но все еще не циклически.

Может ли кто-нибудь дать мне руководство о том, как заставить слайдер функционировать аналогично изображению, которое я предоставил выше?

Вот код, который у меня есть: 

 <div>
    <button class="left-selector" style="height: 20px; width: 20px">
    </button>
    <div class="center-ag-slider">
        <div>
            <img style="max-width:100%; max-height:100%;" src="https://keystonepuppies.com/wp-content/uploads/2012/11/Siberian-Husky-Category-950x700.jpg">
        </div>
        <div>
            <img style="max-width:100%; max-height:100%;" src="https://dgicdplf3pvka.cloudfront.net/2355971/siberian-husky-puppy-picture-473f7308-f278-4858-b1ec-81368845e1be.jpg">
        </div>
        <div>
            <img style="max-width:100%; max-height:100%;" src="https://i.ebayimg.com/00/s/NzUzWDEwMjQ=/z/bCwAAOSwTM5YtzZy/%24_86.JPG">
        </div>

    </div>
    <button class="right-selector" style="height: 20px; width: 20px">
    </button>
</div>

<script type="text/javascript">

        $(document).ready(function () {

            $('.center-ag-slider').slick({
                centerMode: true,
                centerPadding: '60px',
                slidesToShow: 3,
                initialSlide: 0,
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 1
                        }
                    }
                ]
            });

            $('.left-selector').click(function () {
                $(".center-ag-slider").slick("slickPrev");
            });
            $('.right-selector').click(function () {
                $(".center-ag-slider").slick("slickNext");
            });

        });
    </script>

1 Ответ

0 голосов
/ 09 августа 2019

Вы можете установить ширину класса slick-slide в css, которая будет отображать их все на странице одновременно.Таким образом, в этом случае, из-за того, что есть 3 изображения, которые вы пытаетесь просмотреть, вы должны установить ширину slick-slide равной 33,333333%; 

.slick-slide {
  width: 33.333333%;
}
...