トップ  >  2020年  >  2020.12 [JavaScript] Slick
features [JavaScript] Slick
2020.12
スライドショーの「Slick」を試してみました

ダウンロード

http://kenwheeler.github.io/slick/#go-get-it

CDNもあります

デモ

Slide 1
Slide 2
Slide 3

HTML


<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css"
  href="slick.css"/>
<link rel="stylesheet" type="text/css"
  href="slick-theme.css"/>
<script type="text/javascript"
  src="slick.min.js"></script>

<div class="my_slick">
  <div class="ms bg-1">Slide 1</div>
  <div class="ms bg-2">Slide 2</div>
  <div class="ms bg-3">Slide 3</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
  $('.my_slick').slick({
    autoplay: true,
    dots: true,
  });
});
</script>

<style>
.my_slick {
  width: 460px;
  margin:0 auto;
}
.ms {
  height: 260px;
}
.bg-1 { background: #f99; }
.bg-2 { background: #9f9; }
.bg-3 { background: #99f; }
.slick-prev:before,
.slick-next:before {
  color: black;
}
</style>
先月の「Swiper」よりほんのちょっと手がかかったかな
カテゴリートップ
2020年
次
2020.11 [JavaScript] Swiper

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2021 keibunsya all right reserved.