Question

我找到了这个漂亮的图片滑块：http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

由于我正在使用这种设计开发一个活动网站：my webpage design，我希望在一个页面上添加多个（3）滑块。我是jquery的新手，因此很难编辑jquery代码，因此它可以识别html上的多个列表以呈现轮播。

<!-- Elastislide Carousel rendering on html-->
     <ul id="carousel" class="elastislide-list">
        <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
        <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
        <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
        <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>

     </ul>

这里是剧本：

    <script type="text/javascript"> 
    $( '#carousel' ).elastislide( {minItems : 2} );
    </script>

有人请帮帮我!!!!

Answer 1

我使用的是class而不是id，但仍然没有。 2滑块不起作用。但是，每个都使用jquery，它起作用了：

jQuery('.carousel').each(function(){
    jQuery(this).elastislide( {
        minItems : 2
    });
})

Answer 2

只需使用class而不是id，就像下面的

一样

 <ul id="carousel1" class="elastislide-list myCarousel">
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>

 </ul>

 <ul id="carousel2" class="elastislide-list myCarousel">
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>

 </ul>

javascript代码

<script type="text/javascript"> 
 $( '.myCarousel' ).elastislide( {minItems : 2} );
</script>

使用像这样的短片

 <script type="text/javascript"> 
   $( '#carousel,#carouse2' ).elastislide( {minItems : 2} );
 </script>

Answer 3

通过使用不同的ID并分别调用每个ID找到解决方案，如下所示：

<ul id="carousel1" class="elastislide-list">
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>

 </ul>

 <ul id="carousel2" class="elastislide-list">
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>

 </ul>

javascript代码

<script type="text/javascript"> 
$( '#carousel' ).elastislide( {minItems : 2} );
$( '#carouse2' ).elastislide( {minItems : 2} );
</script>

Answer 4

如果你想拥有2个不同的滑块并拥有自己的导航功能，但是如果你想拥有一个导航并控制两个滑块，那么这里有一个快速解决方案可以帮助你解决它。使用display：none like hide

隐藏elastislide默认按钮

.elastislide-prev{
    display: none;
}

.elastislide-next{
    display: none;
}

添加您自己的自定义导航：

<nav>
<span class="elastislide-newleft a" style="display: block;">Previous</span>
<span class="elastislide-newright b" style="display: block;">Next</span>
</nav>

弹性滑石js：

将以下内容添加到_addControls：function（）{

var xyz = $('.fixed-bar');

this.$navPrev = xyz.find( 'span.elastislide-newleft' ).on( 'mousedown.elastislide', function( event ) {
                self._slide( 'prev' );
                return false;
} );
this.$navNext = xyz.find( 'span.elastislide-newright' ).on( 'mousedown.elastislide', function( event ) {
                self._slide( 'next' );
                return false;
} );

只需点击一下即可帮助您滑动2个滑块，从而创建一个非常好的网格轮播效果。

在一页上需要多个弹性滑动图像查看器

4 个答案: