CODEWITHSUNDEEP
javascripthtmlcssswiper.js
Lightning Gaming
Lightning Gaming

Reputation: 680

Swiper disable half / partial slides on left and right

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>

Upvotes: 5

Views: 9382

Answers (2)

M Ali
M Ali

Reputation: 11

In my case, the issue arises due to padding to the left and right of the main swiper div, located above the carousel wrapper:

DevTools Elements Tab

Check for any additional paddings to the sides and remove them. This should fix the problem, preventing the partial slider from being visible on the left and right.

Upvotes: 1

Rob Moll
Rob Moll

Reputation: 3453

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.

Upvotes: 4

Related Questions