旋转木马滑块

Question

我正在尝试制作旋转木马滑块。就像这个：

 <section>
    <div><br>
        <div class="arrows">
            <div class="seta-x">
                <a href="#" class="arrow-left"></a>
                <a href="#" class="arrow-right"></a>
            </div>
        </div>
        <ul>
            <li class="opaco">
                <div class="caption ">eras dfasd</div>
                <img src="fotos/passo01.jpg"/>
            </li>
            <li>
                <div class="caption">eras dfasd</div>
                <img src="fotos/passo01.jpg"/>
            </li>
            <li class="opaco">
                <div class="caption ">eras dfasd</div>
                <img src="{{ STATIC_URL }}fotos/passo01.jpg"/>
            </li>
            <div class="clear"></div>
            <br><br>
        </ul>
    </div>
</section>

我怎么能这样做？我很高兴使用jQuery或一些插件。我希望它像这样工作：geehair.com

从一个区块改为另一个区块。

我正在使用Gumby（不是引导程序），请不要评价我，不是我的选择。

有什么建议吗？

Answer 1

您可以使用jCarousel插件。首先下载示例用法：

 <link rel="stylesheet" type="text/css" href="jcarousel.basic.css">

 <script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
 <script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>

 <script type="text/javascript" src="jcarousel.basic.js"></script>
<div class="wrapper">
            <h1>Basic carousel</h1>

            <p>This example shows how to setup a basic carousel with prev/next controls and pagination.</p>

            <div class="jcarousel-wrapper">
                <div class="jcarousel">
                    <ul>
                        <li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
                        <li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
                    </ul>
                </div>

                <p class="photo-credits">
                    Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
                </p>

                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>

                <p class="jcarousel-pagination">

                </p>
            </div>
        </div>

你会找到完整的例子here 和现场demo