Question

我正在尝试制作幻灯片，其中只有三张幻灯片，但每张幻灯片都有不同的过渡。确切地说，像这样：

转换1：从右到左
过渡2：向上向下
过渡3：从左到右

我尝试使用reverse选项，但它似乎不适用于每张幻灯片。

任何想法是否可以使用Cycle2完成？

这是我用来测试它的笔： http://codepen.io/tinat/pen/PmOpQP

#holder{width: 30%; overflow: hidden;}
#slide1{width: 100%; background-color: red;}
#slide2{width: 100%; background-color: green;}
#slide3{width: 100%; background-color: blue;}
#slide1 img, #slide2 img, #slide3 img{width: 100%; height: auto;  }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.autoheight.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.scrollVert.min.js"></script>

<div id="holder" class="cycle-slideshow" 
    data-cycle-speed="600" 
    data-auto-height="1" 
    data-cycle-loop="0.5" 
    data-cycle-slides="div" 
    data-cycle-auto-height="1:1" 
    data-cycle-fx="scrollHorz" 
>
  
  <div id="slide1" >
    <img src="https://image.ibb.co/jUHQJ5/blank.png" />
  </div>
  
  <div id="slide2" data-cycle-fx="scrollVert">
    <img src="https://image.ibb.co/jUHQJ5/blank.png"  />
  </div>
  
  <div id="slide3" data-cycle-reverse="true">
    <img src="https://image.ibb.co/jUHQJ5/blank.png"  />
  </div>
  
</div>

jQuery Cycle2插件 - 反转方向

0 个答案: