javascript - 将上一个和下一个按钮放在缩略图旁边

Question

我在我的网站上使用了 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 -->

这是现在的样子

Answer 1

你需要添加 float:left 和 float:right 到 next 和 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 的更新代码