Question

我正在构建自定义滑块，但我无法弄清楚如何在侧面获取导航按钮。这是JSfiddle：http://jsfiddle.net/zfxrxzLg/1/

现在它们位于滑块下面，你可以看到，每当我试图将它们推到两侧时，它只会破坏滑块，或者一个在顶部，一个在底部。

HTML

 <div class="gallery-wrap">
  <div class="gallery clearfix">
    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>
    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

    <div class="gallery__item">
       <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>
   </div>
  <div class="gallery__controls clearfix">
     *THE CODE FOR CONTROLS COMES HERE SOVERFLOW DIDN"T ALLOW ME TO POST IT FOR SOME REASON, BUT IT IS IN THE FIDDLE*
   </div>
 </div>

CSS

.gallery-wrap { 

margin: 0 auto;
overflow: hidden;
width: 432px;
}
.gallery { 
position: relative;
left: 0; 
top: 0; 
}
.gallery__item { 
float: left; 
list-style: none;
margin-right: 20px;
}
.gallery__img { 
    display: block;
    border: 4px solid #40331b;
    height: 80px; 
    width: 80px; }

.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }

.clearfix:after{
    content: '.';
    clear: both;
    display:block;
    height: 0;
    visibility: hidden;
}

jQuery

var totalWidth = 0;

$(".gallery__item").each(function(){
    totalWidth = totalWidth + $(this).outerWidth(true);
});

console.log(totalWidth);
var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();

function toGalleryItem($targetItem){
    if($targetItem.length){
        var newPosition = $targetItem.position().left;
        if(newPosition <= maxScrollPosition){


            $targetItem.addClass("gallery__item--active");


            $targetItem.siblings().removeClass("gallery__item--active");
          $(".gallery").animate({
                left : - newPosition
            });
        } else {

            $(".gallery").animate({
                left : - maxScrollPosition
            });
        };
    };
};

   $(".gallery").width(totalWidth);
$(".gallery__item:first").addClass("gallery__item--active");


$(".gallery__controls-prev").click(function(){
    var $targetItem = $(".gallery__item--active").prev();
    toGalleryItem($targetItem);
});


$(".gallery__controls-next").click(function(){
    var $targetItem = $(".gallery__item--active").next();
    toGalleryItem($targetItem);
});

Answer 1

尝试将此css添加到您的css：

.gallery__controls {
    margin-top: -50px;
    position: absolute;
    margin-left: -20px;
    width: 453px;
}

图库可选：

.gallery-wrap {
    margin: 0 auto;
    overflow: hidden;
    width: 413px;
}

点击此处http://jsfiddle.net/zfxrxzLg/7/

！注意这是固定的解决方案，你可以尝试设置宽度＆amp;保证金百分比（％）

将导航按钮放在两侧

1 个答案: