jquery - 将导航按钮放在两侧

Question

我正在构建一个自定义 slider ，但我不知道如何获得两侧的导航按钮。 这是 JSfiddle:http://jsfiddle.net/zfxrxzLg/1/

如您所见，现在它们位于 slider 下方，每当我尝试将它们推到侧面时，它要么毁掉 slider ，要么一个在顶部，一个在底部。

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/

!注意这是固定的解决方案，你可以尝试将宽度和边距设置为百分比(%)