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

时间:2012-11-17 09:37:13

标签: jquery image-gallery image-viewer

我找到了这个漂亮的图片滑块: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>

有人请帮帮我!!!!

4 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

只需使用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>

答案 2 :(得分:1)

通过使用不同的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>

答案 3 :(得分:1)

如果你想拥有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个滑块,从而创建一个非常好的网格轮播效果。