有没有办法让第二张幻灯片从循环2的窗口顶部开始?

Is there a way to get the second slide to start at the top of the window in Cycle2?

本文关键字：循环 窗口 开始 顶部 幻灯片 二张 有没有      更新时间：2023-09-26

如果我滚动到第一张幻灯片的底部(非常高的图像)，然后点击"next"，第二张幻灯片的顶部被切断(或者它甚至可能完全高于窗口的顶部，这取决于窗口的大小)。有没有办法让第二张幻灯片从窗口的顶部开始?

#containerPages {
  width:200px;
  height:auto;
}
#containerPages div img {
  width:100%;
  height:auto;
}
.external {
  background-color: red;
  padding: 10px;
  width: 180px;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div id="containerPages">
    <div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-pager="#no-template-pager"
    data-cycle-pager-template=""
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-slides="> div"
    data-cycle-auto-height=false
    >
        <div><img src="http://placekitten.com/g/500/3000"></div>
        <div><img src="http://placekitten.com/g/500/600"></div>
    </div>
</div>
    
<div id=no-template-pager class="cycle-pager external">             
    <img src="http://placekitten.com/g/20/20">
    <img src="http://placekitten.com/g/20/20"> 
    <span id=prev>&lt;&lt;Prev </span>
    <span id=next> Next&gt;&gt;</span>
</div>

理想情况下，我会使用等高的图像，你所要求的解决方案可能会变成一种比疾病更糟糕的治疗方法。试试下面的方法。

var win_height = $(window).height(), scroll_pos = win_height + $(window).scrollTop();
$('window').on('scroll' , function(){
      if(win_height < scroll_pos) {
          $('#containerPages').css({'position' : 'fixed' });
      }  else {
          $('#containerPages').css({'position' : 'static' });
      }
});
相关文章：