css слайдер 5 элементов в строке

Question

Я работаю над слайдером миниатюр. Я хочу показать 5 из них в любое время, и если пользователь нажмет на правую или левую кнопки, они переместят один миниатюру, чтобы показать следующий. Я попытался начать с другого слайдера, который делает это для одного элемента за раз, но я новичок в JS, и я недостаточно хорош, чтобы исправить это. Исходный код работает отлично, но изменения, которые я сделал, завинтили его.

Некоторые могут помочь мне исправить это? Здесь jfiddle с моим кодом: http://jsfiddle.net/aqcktp3q/5/

Вот и мой исходный код HTML:

<section class="image-menu"> 
<div id="project" style="width:1150px;height:150px;"> 
<a href="#" class="control_next" style="color:#aaa;">></a> 
<a href="#" class="control_prev" style="color:#aaa;"><</a> 
    <ul> 
     <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" /> 
      <div>Item 1</div></a> 
     </li> 
     <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" /> 
      <div>Item 2</div></a> 
     </li> 
     <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" /> 
      <div>Item 3</div></a> 
     </li> 
     <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" /> 
      <div>Item 4</div></a> 
     </li> 
     <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" /> 
      <div>Item 5</div></a> 
     </li> 
     <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" /> 
      <div>Item 6</div></a> 
     </li> 
    </ul> 
</div> 

CSS:

.image-menu { 
    width:1160px; 
    text-align:center; 
    margin:0 auto; 
    position:relative; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left: 10px; 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
} 
.image-menu a { 
    color: black; 
    font-weight:bold; 
} 
.image-menu a:hover { 
    text-decoration:none; 
    color:#B22222; 
} 
.image-menu a img { 
    border: 3px solid #FFFFFF; 
} 
.image-menu a:hover img { 
    border: 3px solid #B22222; 
} 
.image-menu ul { 
    padding-left:40px; 
} 
#project { 
    position: relative; 
    overflow: hidden; 
    margin: 3px auto 0 auto; 
    border-radius: 4px; 
} 
#project ul { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    height: 200px; 
    list-style: none; 
} 
#project ul li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 170px; 
    height: 150px; 
    background: #ccc; 
    text-align: center; 
    /*line-height: 170px;*/ 
} 
#project ul li div { 
    width: 170px; 
    height: 20px; 
    line-height: 20px; 
} 
a.control_prev, a.control_next { 
    position: absolute; 
    top: 0%; 
    z-index: 999; 
    display: block; 
    padding: 9% 2%; 
    width: auto; 
    height: auto; 
    background: #2a2a2a; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 18px; 
    opacity: 0.8; 
    cursor: pointer; 
} 
a.control_prev:hover, a.control_next:hover { 
    opacity: 1; 
    -webkit-transition: all 0.2s ease; 
} 
a.control_prev { 
    border-radius: 0 2px 2px 0; 
} 
a.control_next { 
    right: 0; 
    border-radius: 2px 0 0 2px; 
} 

JS:

jQuery(document).ready(function ($) { 

    var slideCount = $('#project ul li').length; 
    var slideWidth = $('#project ul li').width(); 
    var slideHeight = $('#project ul li').height(); 
    var sliderUlWidth = slideWidth * slideCount; 

    $('#project').css({ 
     width: sliderUlWidth, 
     height: slideHeight 
    }); 

    $('#project ul').css({ 
     width: sliderUlWidth, 
     marginLeft: -slideWidth 
    }); 

    $('#project ul li:last-child').prependTo('#project ul'); 

    function moveLeft() { 
     $('#project ul').animate({ 
      left: +slideWidth 
     }, 200, function() { 
      $('#project ul li:last-child').prependTo('#project ul'); 
      $('#project ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#project ul').animate({ 
      left: -slideWidth 
     }, 200, function() { 
      $('#project ul li:first-child').appendTo('#project ul'); 
      $('#project ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

}); 

Answer 1

Вы код кажется, работает нормально. Вы должны убедиться, что включить jQuery в jsfiddle. Я установил это и добавил некоторые изображения-заполнители, и он работал. Единственная проблема, которую я вижу, - это ваш CSS, поскольку ваша левая стрелка находится над большими пальцами. Это не проблема с javascript.

http://jsfiddle.net/wilchow/p1dLzfvy/1/

<section class="image-menu"> 
    <div id="project" style="width:1150px;height:150px;"> <a href="#" class="control_next" style="color:#aaa;">></a> 
<a href="#" class="control_prev" style="color:#aaa;"><</a> 

     <ul> 
      <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 1</div></a> 

      </li> 
      <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 2</div></a> 

      </li> 
      <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 3</div></a> 

      </li> 
      <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 4</div></a> 

      </li> 
      <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 5</div></a> 

      </li> 
      <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 6</div></a> 

      </li> 
     </ul> 
    </div> 
</section>