トップ > ★jQuery > カルーセルスライダー

カルーセルスライダー

★jQuery

slick

kenwheeler.github.io

  • [prev][next]ボタンの大きさ・位置は微調整必要
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カルーセルスライダー：slick</title>
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="regular slider">
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt="">/li>
<li><img src="img/05.jpg" alt=""></li>
<li><img src="img/06.jpg" alt=""></li>
</ul><!-- /.regular -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/slick.js"></script>
<script>
$(function() {
  $('.regular').slick({
    dots: false,
    infinite: true,
    slidesToShow: 3,  // 3枚表示
    slidesToScroll: 1  // 1枚ずつ移動
  });
});
</script>
</body>
</html>

@charset "UTF-8";

html,body,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul,li {
  list-style: none;
}
img {
  vertical-align: bottom;
  width: 100%;
}
.slider {
  width: 90%;
  margin: 100px auto;
}
.slick-slide {
  margin: 0 5px;
}
.slick-prev:before,
.slick-next:before {
  color: black;
  font-size: 40px;
}
ightboxを追加

lokeshdhakar.com


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カルーセルスライダー/モーダルウィンドウ</title>
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="regular slider">
<li><a href="img/01.jpg" data-lightbox="example-set" data-title=""><img src="img/01.jpg" alt=""></a></li>
<li><a href="img/02.jpg" data-lightbox="example-set" data-title=""><img src="img/02.jpg" alt=""></a></li>
<li><a href="img/03.jpg" data-lightbox="example-set" data-title=""><img src="img/03.jpg" alt=""></a></li>
<li><a href="img/04.jpg" data-lightbox="example-set" data-title=""><img src="img/04.jpg" alt=""></a></li>
<li><a href="img/05.jpg" data-lightbox="example-set" data-title=""><img src="img/05.jpg" alt=""></a></li>
<li><a href="img/06.jpg" data-lightbox="example-set" data-title=""><img src="img/06.jpg" alt=""></a></li>
</ul><!-- /.regular -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/lightbox.js"></script>
<script>
$(function() {
  $('.regular').slick({
    dots: false,
    infinite: true,
    slidesToShow: 3,  // 3枚表示
    slidesToScroll: 1  // １枚ずつ移動
  });
});
</script>
</body>
</html>