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

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

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

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

/* 
 * 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();

以上、どうぞよろしくお願いいたします。