SwiperJS开始视图

Question

我正在使用SwiperJS (https://swiperjs.com/demos/#3D_cube_effect)。这个位置迫使一张笔直的脸开始。我希望这个立方体处于这样的位置：

我希望我能在滚动时看到两面墙，而不是一面。

HTML

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

CSS

.swiper-container {
  width: 300px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -150px;
  margin-top: -150px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

JS

var swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  grabCursor: true,
  cubeEffect: {
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  // autoplay:{
  //   delay:3000
  // },
});

Answer 1

css规则rotateY负责旋转位置的状态。要重新定义，请使用接口SwiperJS添加此jiquery代码：

$('.swiper-wrapper').addClass('state');

swiper.on('touchMove', function() { 
  $('.swiper-wrapper').removeClass('state');
});

并将此代码添加到css中：

.swiper-wrapper.state {
  transform: rotateY(-45deg)!important;
}

​

var swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  grabCursor: true,
  cubeEffect: {
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  // autoplay:{
  //   delay:3000
  // },
});

$('.swiper-wrapper').addClass('state');

swiper.on('touchMove', function() { 
  $('.swiper-wrapper').removeClass('state');
});

.swiper-container {
  width: 300px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -150px;
  margin-top: -150px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-wrapper.state {
  transform: rotateY(-45deg)!important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.6/swiper-bundle.min.css" integrity="sha512-nDK7V7W9Sac8PVJy+hbDCe+b8XWbwrvigsWO943CfXexh2zIquVfEfVP9Cy5cbP+B5v/9lgxOAlp2yES7n/FIA==" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.6/swiper-bundle.js" integrity="sha512-AO8EjcB+txNbSKoPw/P1203KP3YPQ5YTNR+ndaZadfDEAXrLrg/dzLSFurI/XV9OkPy7AE9m+f0Shzfc+kVKvQ==" crossorigin="anonymous"></script>

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

​