Cube Vertical

by Marco Abate

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js"></script>
<div class="vc_custom_1479237478357">
  <div class="wpb_column">
    <div class="vc_column-inner">
      <div class="wpb_wrapper swiper-wrapper">
        <div class="forcefullwidth_wrapper_tp_banner swiper-slide">Slide 1</div>
        <div class="forcefullwidth_wrapper_tp_banner swiper-slide">Slide 2</div>
        <div class="forcefullwidth_wrapper_tp_banner swiper-slide">Slide 3</div>
      </div>
    </div>
  </div>
</div>

SCSS

.vc_custom_1479237478357 .wpb_wrapper {
  height: 300px;
  .forcefullwidth_wrapper_tp_banner {
    background-image: url('https://upload.wikimedia.org/wikipedia/it/1/16/Peppa_Pig_Logo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
  }
}

JavaScript

var mySwiper = new Swiper('.vc_custom_1479237478357 .vc_column-inner', {
	speed: 800,
  slidesPerView: 1,
	spaceBetween: 10,
  direction: 'vertical',
  effect: 'cube',
  onScroll: function(swiper, e) {
  	console.log(swiper);
  	console.log(e);
  }
});