###前提・実現したいこと
お世話になっております。
slick.jsを使って複数のスライダーを設置しています。
こちらのサイトを参考に無限ループに設定していますが、途中で画像が表示するまでに時間かかかってしまいます。(時間として約5秒くらい)
また、画像の幅もまちまちで横幅が揃っていませんので、variableWidthをtrueで設定しているのが原因かも?と思っています。
他にも不具合があり、下のスライドが途中で止まってしまいます。
まずは、無限ループの不具合を直したいので、お力添えをいただければ幸いです。
スライドの画像をhoverした時は下記のサイトのようにしています。
CSSのみで実装するキャプションエフェクト 20
###HTML
<div class="slide-frame"> <ul class="slide-top"> <li><a href="#1"> <figure> <img src="img/image01.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#2"> <figure> <img src="img/image02.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#3"> <figure> <img src="img/image03.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#4"> <figure> <img src="img/image04.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#5"> <figure> <img src="img/image05.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> </ul> </div> <div class="slide-frame"> <ul class="slide-bottom"> <li><a href="#1"> <figure> <img src="img/image01.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#2"> <figure> <img src="img/image02.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#3"> <figure> <img src="img/image03.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#4"> <figure> <img src="img/image04.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#5"> <figure> <img src="img/image05.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> <li><a href="#6"> <figure> <img src="img/image06.jpg" alt="" /> <figcaption> <h3>タイトル</h3> </figcaption> </figure> </a></li> </ul> </div>
###js
var topCarousel = $(".slide-top"); var bottomCarousel = $(".slide-bottom"); topCarousel.slick({ slidesToShow: 2, asNavFor:'.slide-bottom', variableWidth: true, arrows: false, autoplay: true, autoplaySpeed: 0, speed: 6000, cssEase: 'linear', slidesToScroll: 1, waitForAnimate: true }); bottomCarousel.slick({ prevArrow: '<a class="slick-prev btn" href="#">前へ</a>', nextArrow: '<a class="slick-next btn" href="#">次へ</a>', slidesToShow: 2, asNavFor:'.slide-top', variableWidth: true, arrows: true, autoplay: true, autoplaySpeed: 0, speed: 8000, slidesToScroll: 1 });
###補足情報(言語/FW/ツール等のバージョンなど)
① ② ③ ④ ⑤ ① ② ここから先の画像がなかなか表示されない
あなたの回答
tips
プレビュー