CODEWITHSUNDEEP
javascriptjqueryswiper.js
Todd Padwick
Todd Padwick

Reputation: 155

Using Swiper JS slider - I would like to align first slide left, and show second slide peaking from off screen

I am using swiper JS set to cover flow with following settings.

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 1,
    loop: true,
    coverflow: {
        rotate: 40,
        stretch: 0,
        depth: 50,
        modifier: 1,
        slideShadows : false
    }
});

However I would like to show a portion (maybe 20%) of the next slide peaking from the right hand side of the screen. I do not want the slide to be centred but still want to coverflow 3D effect. Here is a mockup of how I want the slider to look.

slider mockup

I appreciate any help you can offer :)

Upvotes: 4

Views: 14696

Answers (2)

3rdi
3rdi

Reputation: 485

For https://swiperjs.com/ use below snippet as example. This worked for me.

var swiper = new Swiper('.swiperX', {
  initialSlide: 0,
  slidesPerGroup: 1, // helps it to align in the left if set to 1
});

Upvotes: 3

qbeauperin
qbeauperin

Reputation: 589

Put the swiper in a container, set the swiper width to whatever width you want the active slide to be (80% for example) and don't forget to set the overflow property to visible for the swiper and hidden for the container.

(function($){
  $(document).ready(function(){
    var swiper = new Swiper('.swiper', {
      effect: 'coverflow',
      grabCursor: true,
      slidesPerView: 1,
      loop: true,
      coverflow: {
        rotate: 40,
        stretch: 0,
        depth: 50,
        modifier: 1,
        slideShadows : false
      }
    })
  });
})(jQuery);
.container {
  width: 150px;
  height: 100px;
  padding: 20px 10px;
  background-color: lightgrey;
  overflow: hidden;
  margin: 0 auto;
}
.swiper {
  width: 80%;
  height: 100%;
}
.swiper-slide {
  background: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

The only problem would be with the loop: true parameter as when on the last slide, the next slide seem to only be added when the slide event occurs.

Upvotes: 4

Related Questions