使用滑动滑块垂直滑块模式无法正确计算可见幻灯片计数答案

【问题标题】：Visible slides count is not being calculated correctly with swiper slider vertical slider mode使用滑动滑块垂直滑块模式无法正确计算可见幻灯片计数
【发布时间】：2020-05-06 12:04:37
【问题描述】：

我试图创建一个带有滑动滑块的垂直滑块，用于在我的 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 张幻灯片，而是显示所有可用的幻灯片。

知道缺少什么吗？谢谢

【问题讨论】：

标签： javascript html jquery css swiper

【解决方案1】：

不是完美的解决方案，而是根据你的用例编辑了这个，实际上你应该让 swiper 决定幻灯片的高度，他会自己处理，否则事情会变得太复杂。我认为您最好的选择是减少幻灯片之间的边距并在这么高的高度内调整幻灯片的 css 或将组大小更改为 2。

请在您的本地主机中尝试以下代码，幻灯片的基本 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>

【讨论】：

感谢您的回答，但像这样它仍然显示所有幻灯片。我需要在 5 张幻灯片中展示最新的 15 个帖子，因此每张幻灯片 3 个。有什么想法吗？
你解决了吗？有时是因为 css 没有正确加载。
没有没有 :( 仍然在努力修复，因为无论我做什么它都是从一开始就显示所有幻灯片，而不是我需要的。
您能否编写一个包含您的 swiper 导入的小代码 sn-p 并重现该问题，我可能会有所帮助。
当然让我做codepen链接。非常感谢您的帮助

【解决方案2】：

我找到了一个解决方案，它需要给父 div 一个固定的高度，溢出：隐藏。

希望这对有类似问题的人有所帮助。

【讨论】：