Количество видимых слайдов вычисляется неправильно в режиме вертикального слайдера ползунка Swiper - PullRequest
Новая
       31

Количество видимых слайдов вычисляется неправильно в режиме вертикального слайдера ползунка Swiper

0 голосов
/ 06 мая 2020

Я пытался создать вертикальный слайдер со слайдером Swiper для показа отзывов на моем сайте wordpress. Мне нужно иметь 3 слайда в каждой строке, поэтому, когда я перемещаюсь через разбиение на страницы, мне нужно перемещаться между 3 слайдами в строке.

У меня есть настройка ниже для слайдера 

var swiper = new Swiper('.customers-right-wrap .swiper-container', {
    slidesPerView: 3,
    slidesPerGroup: 3,
    direction: 'vertical',
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    spaceBetween: 25,
});

И с при этой настройке все мои доступные слайды отображаются на странице. Вместо того, чтобы показывать только 3 слайда с самого начала, отображаются все доступные слайды.

Есть идеи, пожалуйста, чего не хватает? Спасибо

Ответы [ 2 ]

0 голосов
/ 20 мая 2020

Я нашел решение, которое требует указать фиксированную высоту родительского div с помощью overflow: hidden.

Надеюсь, это поможет кому-то с аналогичными проблемами.

0 голосов
/ 06 мая 2020

Не идеальное решение, но отредактировал это для вашего варианта использования, на самом деле вы должны позволить Swiper определять высоту слайда, он сам справится с этим, иначе все станет слишком сложным. Я думаю, что лучше всего уменьшить границу между слайдами и отрегулировать css слайда в пределах этой большой высоты или изменить размер группы на 2.

Попробуйте следующий код на вашем локальном хосте, basi c css слайд не на своем месте, вам придется его заново отрегулировать. дайте мне знать, если у вас возникнут проблемы со swiper: 

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.8/js/swiper.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.8/css/swiper.min.css"
          type="text/css">
    <style>
        .customers-right-wrap .swiper-container {
            border-radius: 10px;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .testimonials-slide {
            background: #fff;
            padding: 65px 40px 30px 50px;
            -webkit-box-shadow: 0 0 20px 0px #cacaca;
            -moz-box-shadow: 0 0 20px 0px #cacaca;
            box-shadow: 0 0 20px 0px #cacaca;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 10px;
            margin-bottom: 15px;
        }

        .testimonial-slide-left {
            flex-basis: 74%;
            float: left;
        }

        .testimonial-desc {
            font-size: 14px;
            color: #000;
            font-family: 'prelobook';
        }

        .testimonial-slide-left h6 {
            width: 100%;
            font-size: 16px;
            color: #000;
            font-family: 'prelobold';
            margin: 25px 0 10px 0;
        }

        .testim-author {
            width: 84px;
            height: 84px;
            border: 2px solid #ff001c;
            border-radius: 100px;
        }

        .customers-right-wrap .swiper-container-vertical > .swiper-pagination-bullets {
            right: 5px;
            width: 10px;
            left: auto;
        }

        .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
            background: #ff001c;
        }

        .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
            margin: 15px 0;
            background: #cccccc;
        }

        .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
            margin: 15px 0;
            background: #cccccc;
        }
    </style>
</head>
<body>

<div class="customers-right-wrap">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-active">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-next">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-active">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-next">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-active">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-next">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-active">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb swiper-slide-next">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Anne-Caroline Chausson</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
            <div class="swiper-slide testimonials-slide fx fx-wrap fx-jb">
                <div class="testimonial-slide-left">
                    <div class="testimonial-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </div>
                    <h6>Jastina Smith</h6>
                    <h5>CEO <span class="head_sep">|</span> <strong>MAGMA</strong></h5>
                </div>
                <div class="testimonial-slide-right">
                    <div class="testim-author"
                         style="background: url(http://apco-tech.ipoint.com.mt/wp-content/uploads/testi-1.jpg) no-repeat;background-size:cover;"></div>
                </div>
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span
                class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button"
                                                        aria-label="Go to slide 2"></span></div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
            class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        direction: 'vertical',
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
</body>
</html>
...