

slickを利用したカルーセルをランダムに表示するようしたいのですが、ランダム表示にはなっているものの、下記3点の不具合があり解決方法をご教授いただけますと幸いです。なお、カルーセルさせる画像の枚数は10点としています。

  1. 全10点の画像のうち1点が2回（どの画像になるかはその都度変わります）表示される
  2. （意図通りに）表示されない画像が1点ある
  3. 最後の画像（10枚目）から最初の画像（1枚目）に戻る際、一瞬上記「2」の画像が表示される

slick  
<https://github.com/kenwheeler/slick>

以下にコードを記します。

[code]

    /* 
     * HTML
     */
    <div class="mainvisual">
        <div class="slick-track">
            <div><a href="#"><img src="image1.jpg"></a></div>
            <div><a href="#"><img src="image2.jpg"></a></div>
            <div><a href="#"><img src="image3.jpg"></a></div>
            <div><a href="#"><img src="image4.jpg"></a></div>
            <div><a href="#"><img src="image5.jpg"></a></div>
            <div><a href="#"><img src="image6.jpg"></a></div>
            <div><a href="#"><img src="image7.jpg"></a></div>
            <div><a href="#"><img src="image8.jpg"></a></div>
            <div><a href="#"><img src="image9.jpg"></a></div>
            <div><a href="#"><img src="image10.jpg"></a></div>
        </div>
    </div>
    
    /* 
     * JS
     */
    // slickの設定（この時点ではcssで非表示）
    $('.mainvisual').slick(
    {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        draggable: true,
        accessibility: false,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 3000,
        easing: 'easieEaseOutCirc',
        dots: true,
        dotsClass: 'dotnav',
        speed: 250,
        pauseOnHover: false
    });
    
    // mainvisualをランダムにする
    var ary = [];
    $('.mainvisual .slick-track div').each(function()
    {
        // ランダムさせる要素を登録（aタグ＋imgタグ）
        ary[ary.length] = $(this).html();
    
        // slick用に書き出されたhtmlを一旦空に
        $(this).empty();
    });
    
    // 要素にランダム処理（返り値は配列）
    shuffle(ary);
    
    // 一旦空にした要素に（ランダムにした）配列から追加
    $('.mainvisual .slick-track div').each(function(i)
    {
        $(this).append(ary[i]);
    });
    
    // mainvisualを表示
    $('.mainvisual').show();
    
[/code]


CC BY-SA 4.0
2017-02-27T04:46:06.087
32968
2023-10-26T10:06:10.800
2023-08-29T08:31:40.083
3060
18487
question
javascript jquery slick.js
jQueryプラグインの「slick」を利用しつつランダム表示させたい


ランダムの処理を先にして、slickをいちばん最後にすることで意図通りの挙動になり、解決しました。

* * *

_この投稿は[@Masaya SUGAWARA
さんのコメント](https://ja.stackoverflow.com/questions/32968/jquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%ae-
slick-%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a4%e3%81%a4%e3%83%a9%e3%83%b3%e3%83%80%e3%83%a0%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%81%9f%e3%81%84#comment32318_32968)
の内容を元に コミュニティwiki として投稿しました。_


CC BY-SA 4.0
2023-08-29T08:30:44.267
96071
2023-08-29T08:30:44.267
3060
32968
answer