如何创建自定义水平滑块

Question

我研究的所有内容都要我使用他们的样式或布局（所以看起来如此）。我只想拿走我现有的div，然后滑过已经存在的div。我知道我错过了一些简单的东西或者考虑得太难了。

这是我想要浏览的代码。

<div class="slide_wrapper">
     <div class="slide">
         <h3>Heading1</h3>
         <div>"Lorem ipsum </div>
     </div>
     <div class="slide">
         <h3>Heading2</h3>
         <div>"Lorem ipsum 2</div>
     </div>
</div>

我想浏览.slide内的所有.slide_wrapper类，甚至可能有一个微妙的按钮或arrow 来手动执行此操作。正确方向上的一点非常有帮助和赞赏。谢谢！

Answer 1

我创建了一个简单的演示。希望这对你的画廊来说是一个好的开始！

jsBin demo

这个jQuery：

var galW = $('.slider_wrapper').outerWidth(true);
var slidesN = $('.slider_wrapper').find('.slide').length;
var c = 0;   // =  current slide

function animate(){ 
  var curr = c===-1 ? c=slidesN-1 : c=c%slidesN;
  $('.slider').stop().animate({left: -(galW*c) },1000);  
}

$('.btn').click(function(){
  var theclass = $(this).hasClass('btn_right') ? c++ : c--;
  animate();
});

<小时/> 的修改

demo with auto-slide

如果您希望自动播放，只需将其粘贴到animate()功能和$('.btn').click(function(){之间：

var autoTime;
function autoSlide(){
  autoTime = setInterval(function(){
    $('.btn_right').click();
  },3000);
}
autoSlide();

$('.slide_gallery').on('mouseenter mouseleave',function( e ){
  var inOut = e.type==='mouseenter' ? clearInterval(autoTime) : autoSlide(); 
});

---

HTML：

<div class="slide_gallery">

  <div class="btn btn_left"></div>
  <div class="btn btn_right"></div>

  <div class="slider_wrapper">
    <div class="slider">
       <div class="slide">
           <h3>Heading1</h3>
           <div>"Lorem ipsum </div>
       </div>
       <div class="slide">
           <h3>Heading2</h3>
           <div>"Lorem ipsum 2</div>
       </div>
       <div class="slide">
           <h3>Heading3</h3>
           <div>"Lorem ipsum 3</div>
       </div>
       <div class="slide">
           <h3>Heading4</h3>
           <div>"Lorem ipsum 4</div>
       </div>
    </div>
  </div>

</div>

CSS：

  .slide_gallery{
    position:relative;
    margin:15px auto;
    width:500px;
    padding:0 50px; /* padding for arrows*/
    background:#fff;
  }
  .slider_wrapper{
    position:relative;
    width:500px;
    height:300px;
    background:#eee;
    overflow:hidden;
  }
  .slider{
    position:absolute;
    width:99999px;
    left:0;
  }
  .slide{
    position:relative;
    float:left;
    width:500px;
    height:300px;
  }
  .btn{
    cursor:pointer;
    position:absolute;
    width:50px;
    height:100%;
    background:url(http://i.stack.imgur.com/tuKVp.gif) no-repeat center center;
  }
  .btn_left{
    left:0px;
    /* remove this after you replace image*/
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
  }
  .btn_right{
    right:0px;
  }

Answer 2

在jquery.cycle周围使用最佳幻灯片插件。