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

【问题标题】：Swiper disable half / partial slides on left and rightSwiper 在左右禁用一半/部分幻灯片
【发布时间】：2020-07-16 18:14:47
【问题描述】：

我正在尝试禁用在 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>

【问题讨论】：

等宽幻灯片？调整 spaceBetween 和 .swiper-container {width: ...}

标签： javascript html css swiper

【解决方案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 以满足您的需求。

【讨论】：