将前面和下一个按钮与缩略图放在一起

Question

我在我的网站上使用cycle2 jQuery插件，这一切都能工作，但我想把prev和下一个按钮与我的缩略图放在一起。我不想做绝对的定位，因为我希望它的反应。有没有一种方法能不断地使下一个缩略图和前一个缩略图对齐？

这是我的密码。

谢谢!

<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 -->

现在的情况如下

​

​

Answer 1

您需要添加浮动:左和浮动:右到下一个和prev：

<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的更新代码