How to display a partial view of the next slide?

[Gabriel Castillo]

Hi,

How would I go about showing a partial view of the next slide? In my case, I'm swiping left and I want the slide that's to the right of my current slide to be partially visible.

[Lou Yunlong]

like this?
https://wy.guahao.com/askeveryday/index

[heshamghandour]

How was it done?

[Lou Yunlong]

This is one part of the Code.

vm.swiper = new Swiper3(vm.$els.swiperContainer, {
  speed: 500,
  loop: true,
  slidesPerView: "auto",
  spaceBetween: 12,
  autoplay: 3000,
  autoplayDisableOnInteraction : false,
  onSlideChangeStart: function (swiper) {
    // chang opacity
    var slide = $(swiper.slides[swiper.activeIndex]);
    var index = ~~slide.data("swiperSlideIndex");
    var container = $(swiper.container[0]);
    container.find(".swiper-slide").removeClass("active")
      .filter("[data-swiper-slide-index='" + index + "']")
      .addClass("active");
    vm.index = index;
  },
});

@ratio: 16rem / 750;
.swiper-container{
  height: 432 * @ratio;
  padding: 0 12px;
  overflow: hidden;
  .swiper-slide{
    position: relative;
    width: 680 * @ratio;
    height: 432 * @ratio;
    overflow: hidden;
    opacity: .3;
    transition: opacity .5s ease-out;
    &.active{
      opacity: 1;
    }
  }
}

[Lou Yunlong]

@heshamghandour