【仕上がりサンプル】▶︎https://wwweb.jp/sample/fruits/
1. head内に、以下を記述する。動かすためのガソリン(CDN)だよ。
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
2. <body>内に、以下を記述する。くだものを陳列するのさ。
<autoplay>の中の<div>が、スライダーの対象だよ。
<div class="autoplay">
<div><img decoding="async" src="画像"></div>
<div><img decoding="async" src="画像"></div>
<div><img decoding="async" src="画像"></div>
<div><img decoding="async" src="画像"></div>
<div><img decoding="async" src="画像"></div>
</div>3. 動かすためには、命令をしなきゃね。クルマのアクセルを踏む感じだよ。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll:1,
autoplay: true,
autoplaySpeed: 3000,
dots:true,
});
</script>
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。