I've implemented the cycle2 jQuery plugin on my website successfully, but I'm facing an issue with positioning the prev and next buttons next to my thumbnails. I want them to be aligned with the first and last thumbnail without relying on absolute positioning for responsiveness. Is there a way to achieve this alignment consistently?
Below is the code snippet in question:
Thank you in advance for your help!
<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">« 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 »</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 -->
Current display: