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

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