Swiper 在左右禁用一半/部分幻灯片

Question

我正在尝试禁用显示在 Swiper 左右两侧的部分/半幻灯片。 我希望它只显示完整的幻灯片而不是任何不完整的幻灯片

        var swiper = new Swiper(".swiper-container", {
        slidesPerView: 'auto',
        preventClicksPropagation: false,
        loop: true,
        slidesPerGroup: 1,
        loopPreventsSlide: false,
        centeredSlides: true,
        centeredSlidesBounds: true,
        setWrapperSize: true,
        spaceBetween: 20,
        // init: false,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
        },
    });

这是我的 html

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                        <div class="card-content">Hello</div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

这是一个代码示例，我相信您正在寻找它：

 new Swiper('.swiper-container', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', slidesPerView: 5, centeredSlides: true, spaceBetween: 30, loop: true, loopedSlides: 7, watchSlidesVisibility: true, breakpoints: { 1028: { slidesPerView:3, spaceBetween: 30, }, 480: { slidesPerView:1, spaceBetween: 10, } } });

 html, body { position: relative; height: 100%; } body { background: blue; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; padding: 4em 0; }.container{ margin: 0 auto; height: 100%; padding: 0 4em; overflow: hidden; }.slider-wrap { overflow: hidden; height: 100%; width: 100%; background: red; }.swiper-container { width: 100%; height: 100%; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; opacity: 0; }.swiper-container { overflow: visible; }.swiper-slide-visible { opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/> <div class="container"> <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div>

此处归功于 Fabian 的 codepen： https://codepen.io/bitpunk/pen/ZEGmBom我修改了这个 codepen 以满足您的需求。