(Responsive-slides.js) Добавить кнопку для миниатюрного изображения и отображения в строке

Я использую миниатюрный код слайдера отсюда http://responsiveslides.com/

Вот как это выглядит изначально.

Но когда я добавил много изображений, миниатюры отображаются в две строки.

Я хочу что-то вроде этого. Добавьте предыдущую и следующую кнопку слева и справа и покажите все миниатюрные изображения в один ряд

Возможно ли это сделать? Надеюсь, что некоторые из вас могли бы дать мне несколько советов. Спасибо!

$(function () {
  // Slideshow 3
  $("#slider3").responsiveSlides({
    manualControls: '#slider3-pager',
    maxwidth: 540
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://responsiveslides.com/responsiveslides.min.js"></script>
<link href="http://responsiveslides.com/example.css" rel="stylesheet"/>
<link href="http://responsiveslides.com/responsiveslides.css" rel="stylesheet"/>

<!-- Slideshow 3 -->
<ul class="rslides" id="slider3">
  <li><img src="http://responsiveslides.com/1.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/2.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/3.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/1.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/2.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/3.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/1.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/2.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/3.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/1.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/2.jpg" alt=""></li>
  <li><img src="http://responsiveslides.com/3.jpg" alt=""></li>
</ul>

<!-- Slideshow 3 Pager -->
<ul id="slider3-pager">
  <li><a href="#"><img src="https://image.ibb.co/gZEMBG/1_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/mnxrBG/2_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/iN72Jw/3_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/gZEMBG/1_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/mnxrBG/2_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/iN72Jw/3_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/gZEMBG/1_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/mnxrBG/2_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/iN72Jw/3_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/gZEMBG/1_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/mnxrBG/2_thumb.jpg" alt=""></a></li>
  <li><a href="#"><img src="https://image.ibb.co/iN72Jw/3_thumb.jpg" alt=""></a></li>
</ul>

0 ответов

Другие вопросы по тегам