Поместите предыдущие и следующие кнопки рядом с эскизами

Я использую плагин cycle2 jQuery на своем веб-сайте, все работает, но я хочу разместить предыдущие и следующие кнопки рядом с моими миниатюрами. Я не хотел делать абсолютное позиционирование, поскольку я хотел, чтобы он был отзывчивым. Есть ли способ постоянно выравнивать следующий и превью к первому и последнему эскизам?Поместите предыдущие и следующие кнопки рядом с эскизами

Вот мой код.

Спасибо!

<div id="main"> 
    <script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script> 
    <script src="http://malsup.github.io/jquery.cycle2.tile.js"></script> 

    <div class="row"> 
     <div class="container"> 
      <div class="col-md-12"> 
       <div id="slideshow-1"> 

        <div id="cycle-1" class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev="#slideshow-1 .cycle-prev" data-cycle-next="#slideshow-1 .cycle-next" data-cycle-caption="#slideshow-1 .custom-caption" data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}" data-cycle-fx="tileBlind"> 
         <div> 
          <img src="images/slider.jpg" class="img-responsive slideshow-img"> 
         </div> 
         <div> 
          <img src="images/slider.jpg" class="img-responsive slideshow-img"> 
         </div> 
         <div> 
          <img src="images/slider.jpg" class="img-responsive slideshow-img"> 
         </div> 
         <div> 
          <img src="images/slider.jpg" class="img-responsive slideshow-img"> 
         </div> 
         <div> 
          <img src="images/slider.jpg" class="img-responsive slideshow-img"> 
         </div> 
         <div> 
          <img src="images/slider.jpg" class="img-responsive slideshow-img"> 
         </div> 
        </div> 
       </div> 

       <div id="slideshow-2"> 
        <div id="cycle-2" class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev="#slideshow-2 .cycle-prev" data-cycle-next="#slideshow-2 .cycle-next" data-cycle-caption="#slideshow-2 .custom-caption" data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}" data-cycle-fx="carousel" data-cycle-carousel-visible="5" data-cycle-carousel-fluid=true data-allow-wrap="true"> 
         <a href="#" class="cycle-prev">&laquo; prev</a> 
         <div> 
          <img src="images/robin-thumb.jpg" width=100 height=100> 
         </div> 
         <div> 
          <img src="images/robin-thumb.jpg" width=100 height=100> 
         </div> 
         <div> 
          <img src="images/robin-thumb.jpg" width=100 height=100> 
         </div> 
         <div> 
          <img src="images/robin-thumb.jpg" width=100 height=100> 
         </div> 
         <div> 
          <img src="images/robin-thumb.jpg" width=100 height=100> 
         </div> 
         <div> 
          <img src="images/robin-thumb.jpg" width=100 height=100> 
         </div> 
         <a href="#" class="cycle-next">next &raquo;</a> 
        </div> <!-- end of cycle 2 --> 
       </div> <!-- end of slideshow 2 --> 
      </div> <!-- end of col md 12 --> 
     </div> <!-- end of container --> 
    </div> <!-- end of row -->

Вот как это выглядит на данный момент

Screenshot

источник

2015-02-05 Nicolas Pocock

'position: absolute;' может быть полностью отзывчивым, и я бы посоветовал использовать это. Вы уже пробовали? –

Вы можете установить верхние, левые, правые и нижние значения в процентах в 'position: absolute;' – Sydonia

вам нужно добавить поплавок: левый и плавать: право на следующий и предыдущий:

<a href="#" class="cycle-prev" style="float: left;">&laquo; prev</a> 
<a href="#" class="cycle-next" style="float: right;">next &raquo;</a>

рабочего код здесь : http://jsfiddle.net/zjvka30q/3/

обновленный код для улучшения UI

источник

2015-02-05 10:28:26

Поместите предыдущие и следующие кнопки рядом с эскизами

ответ

Смежные вопросы