Question

我在我的网站上使用了cycle2 jQuery插件，一切正常，但我想在我的缩略图旁边放置prev和next按钮。我不想做绝对定位，因为我希望它能够做出响应。有没有办法不断地将下一个和上一个缩略图与第一个和最后一个缩略图对齐？

这是我的代码。

谢谢！

<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

Answer 1

你需要添加float：left和float：right to 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的代码

将前一个和下一个按钮放在缩略图旁边

1 个答案: