BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Slickスライダーが全く動作しません

2022-02-07 04:34:29

質問内容

私のウェブサイトでフェード、スリックスライダーを動作させようとしています。 しかし、私は運が悪いです。 これはSlickです。 http://kenwheeler.github.io/slick/

下にスクロールしていただくと、実装方法が書いてあります。 スクリーンショットを添付しましたので、何が間違っているのか、どなたかわかるといいのですが。 

<html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>
    </head>
    <body>

    <div class="fade">
   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){       
$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});
    
        });
</script>

    </body>
</html>

私はJavascriptとJqueryの初心者なので、そこで何かを台無しにしているような気がするのです。

私のページをロードすると、3つのテスト画像が1つずつ下に表示されるだけです。

何が間違っているのか、どなたかご存知ですか？

解決方法は？

問題は slide 設定 (スライダーを選択するための要素クエリ)

例えば変えること。 

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});

まで 

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

動作は、設定を弄る程度です。 あなたが定義していた slide かわりに > div (divの直下の子)なので、これを削除すると(デフォルトは div )、動作します。 

<html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>
    </head>
    <body>

    <div class="fade">
   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){       
$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });
    
        });
</script>

    </body>
</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します