0

この気の利いた画像スライダーを見つけました: http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

このデザインのイベント サイトを開発しているので: my webpage design、1 つのページに複数 (3) のスライダーを追加したいと考えています。私はjqueryを初めて使用するので、カルーセルをレンダリングするためにhtmlで複数のリストを識別できるようにjqueryコードを編集するのは困難です。

<!-- 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

idの代わりにclassを使用しましたが、それでも使用しません。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">
    <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-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;
} );

これにより、1 回のクリックで 2 つのスライダーをスライドさせて、グリッド カルーセルの非常に優れた効果を作成できます。

于 2015-06-10T06:00:51.073 に答える
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 に答える