0

フェード設定で Slick カルーセルを使用して、Web サイトのフロント ページの画像のスライドショーを表示しようとしています。スライドショーの画像には、2 つの異なるサイズ比があります (1 つは縦方向の画像用、もう 1 つは横方向の画像用)。スライドショーが大きな画像から小さな画像に切り替わると、スムーズにフェードするのではなく、最初の画像の余分な幅がくっついて消えてしまいます。

これは、私が使用しているコードの基本的な例です。このフィドルで結果を見ることができますhttps://jsfiddle.net/m4ug5o09/

HTML:

<div class="fade">
    <div>
        <img src="http://placehold.it/900x400/000">
    </div>
    <div>
        <img src="http://placehold.it/700x400/">
    </div>
</div>

JS

$('.fade').slick({
dots: false,
infinite: true,
speed: 700,
autoplay: true,
fade: true,
autoplaySpeed: 3000,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1});

また、ページを読み込むと、最初の画像がページの下部 (フッターのように) ですばやく点滅します。

アイデア？

4

1 に答える 1

0

巧妙な設定を微調整することでこの問題を巧妙に解決できるかどうかはわかりません。しかし、興味がある場合は回避策があります。

水平方向の画像を含む div の ID を追加します。

<div>
  <img src="900x400.jpg"/>
</div>

<div id="horizontal">
  <img src="700x400.jpg"/>
</div>

次に、css 部分で次のように言及します。

#horizontal
{
  background-color:white;
  width:900px;  // Width equal to the widest image in your slideshow
  height:700px;  // Height equal to the image of max height in your slideshow
}
于 2015-09-02T21:03:50.137 に答える