SwiperJS - padding on wrapper

user_17208512 0
Viewed 1247

would like to set padding on my slider wrapper, when i do it manually, for example I set padding-left:15px; on wrapper or any parent div, the last slide is not showing properly, in fact 15 pixels are hidden by the overflow..

I am using swiper-bundle.6.5

The html rendered:

<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-rtl swiper-container-android px-3">
    <div class="swiper-wrapper" id="swiper-wrapper-44269aed36ad10c2c" aria-live="polite" style="transform: translate3d(330px, 0px, 0px); transition-duration: 0ms;">
        <div class="swiper-slide" style="width: 210px; margin-left: 10px;" role="group" aria-label="1 / 3">
            mySlide1
        </div>
        <div class="swiper-slide swiper-slide-prev" style="width: 210px; margin-left: 10px;" role="group" aria-label="2 / 3">
            mySlide2
        </div>
        <div class="swiper-slide swiper-slide-active" style="width: 210px; margin-left: 10px;" role="group" aria-label="3 / 3">
            mySlide3
        </div>
    </div>
</div>

The js :

new SwipeLoader(_swiper_target, {
    debugger: true,
    direction: 'horizontal',
    pagination: {
        el: '.' + unique_id + ' .swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.' + unique_id + ' .swiper-button-next',
        prevEl: '.' + unique_id + ' .swiper-button-prev'
    },
    slidesPerView: 1.5,
    spaceBetween: 10,
    breakpoints: {
        320: {
            slidesPerView: 1.5,
            spaceBetween: 10
        },
        480: {
            slidesPerView: 1.5,
            spaceBetween: 10
        },
        640: {
            slidesPerView: 1.5,
            spaceBetween: 10
        },
        800: {
            slidesPerView: 3,
            spaceBetween: 10
        }
    }
});

Thanks

swiper.js css javascript
1 Answers

Create box "container"

exampleĞ–

.courses .slide {
  width: 10rem;
  background-color: #4b4b4b;
  border-radius: .5rem;
  text-align: center;
  margin-bottom: 4rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.courses .slide .container {
  padding: 2rem;
}

.courses .slide .container img {
  height: 20rem;
  width: 100%;
}

.courses .slide .container h3 {
  margin: 1.5rem 0;
  font-size: 2rem;
  color: #fff;
}

.courses .slide .container p {
  line-height: 2;
  font-size: 1.6rem;
  color: #aaa;
}
<section class="courses">

        <h1 class="heading">our <span>courses</span></h1>

        <div class="swiper course-slider">
            <div class="swiper-wrapper">

                <div class="swiper-slide slide">
                    <div class="container">
                    <img src="" alt="">
                    <h3>Lorem, ipsum dolor.</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
                </div>
                </div>
                <div class="swiper-slide slide">
                    <div class="container">
                        <img src="" alt="">
                        <h3>Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
                    </div>
                </div>
                <div class="swiper-slide slide">
                    <div class="container">
                        <img src="" alt="">
                        <h3>Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
                    </div>
                </div>
                <div class="swiper-slide slide">
                    <div class="container">
                        <img src="" alt="">
                        <h3>Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
                    </div>
                </div>
                <div class="swiper-slide slide">
                    <div class="container">
                        <img src="" alt="">
                        <h3>Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
                    </div>
                </div>
                <div class="swiper-slide slide">
                    <div class="container">
                        <img src="" alt="">
                        <h3>Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

    </section>

user_192140570
Related