Swiper disable half / partial slides on left and right

user_13943867 0
Viewed 4185

I'm trying to disable partial / half slides which show on the left and right of Swiper. I want it to show only full slides and not any incomplete slides

        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"
        },
    });

This is my html

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                        <div class="card-content">Hello</div>
                    </div>
                </div>
            </div>
        </div>
swiper.js css html javascript
1 Answers

Here is a code example that does what I believe you are looking for:

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>

All credit to Fabian's codepen here: https://codepen.io/bitpunk/pen/ZEGmBom I modified this codepen to meet your needs.

user_88015990
Related