0

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

由于我正在使用这种设计开发一个活动网站：我的网页设计，我很想在一页上添加多个 (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

4 回答 4

2

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

jQuery('.carousel').each(function(){
    jQuery(this).elastislide( {
        minItems : 2
    });
})
于 2012-11-30T10:56:01.707 回答
1

只需使用类而不是 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>
于 2012-11-17T09:48:40.440 回答
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>
于 2012-11-17T10:35:58.410 回答
1

如果您想拥有 2 个具有自己导航的不同滑块，但如果您想拥有一个导航并控制两个滑块，这是一个很好的解决方案，这里有一个快速片段可以帮助您解决它。使用 display:none 隐藏 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 个滑块，创建非常好的网格轮播效果。

于 2015-06-10T06:00:51.073 回答