Visible slides count is not being calculated correctly with swiper slider vertical slider mode

0
votes

I was trying to create a vertical slider with swiper slider for showing testimonials in my wordpress site. I need to have 3 slides per each row so when i slide via pagination i need to slide between 3 slides per row.

I have the below setup for the slider

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

And with this setup all my available slides are being displayed in the page. Instead of showing only 3 slides from the beginning it shows all available slides.

Any idea please what am missing? Thanks

2
javascripthtmljquerycssswiper

2 Answers

0
votes

Not the perfect solution, but edited this to your use case, actually you should let swiper decide the height of the slide, he will handle it himself, otherwise things will get too complicated. I think your best bet is to decrease the marging between slides and adjust css of slide within this much height or change group size to 2.

Please try following code in your localhost, basic css of slide is not in it's place you will have to re adjust it. let me know if you face any issue with the 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>
0
votes

I found a solution which requires to give a fixed height to the parent div with overflow:hidden.

Hope this helps someone with similar issues.