blog-RuinDig

短かったり長かったりする。Articles are my own.

Slickを使って写真ギャラリーを作ってみた

スライドプラグインのSlickを使って写真ギャラリーを作ってみた。

ページ:

ruindig.github.io

類似するものにSwiperがあるが、複数のスライドを作るとスライドのセット毎に別途ユニークな「id」もしくは「class」を作る必要があるので、スライドを増やす度に延々とHTMLやCSSが伸びていくのは嫌だと思ってSlickを採用した。

<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/> <!--CDN-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"> <!--CDN-->
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!--CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script> <!--CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script> <!--CDN-->
<script type="text/javascript">
$('.slider').slick({
autoplay: false, /* 自動送りしない */
dots: true, /* ドットを表示する */
lazyLoad:'ondemand', /* スライドするとすぐに画像を読み込む */
ScrollToSlides: 1, /* スマホでのスワイプやマウスでのドラッグ操作で1枚ずつスライドする */
});
</script>
</body>
<!--ページ上でのスライド設置-->
<div style="text-align: center;"> <!--画像キャプションの文字を中央に寄せる-->
<ul class="slider">
<li><img src="<!--画像URL-->" alt="<!--代替テキスト-->" loading="lazy"><p class="slider-text4"><!--画像キャプション部分--></p></li>
</ul>
</div>

CSSは.slider-text.slider-text2のように複数パターンを作る事で、スマートフォンで見た時のキャプションの位置を調整した。

.slider {
  width: calc(100% - 40px);
  margin: 0 auto;
  user-select: text !important; /* スライドのキャプションを選択できるようにする */
}
.slider-text {
  margin: 10px 8px 10px 8px;
  padding: 0px 8px 20px 8px;
}
.slider-text2 {
  margin: 10px 8px 10px 8px;
  padding: 10px 8px 16px 8px;
}
.slider-text3 {
  margin: 8px 8px 25px 8px;
  padding: 0px 10px 30px 10px;
}
.slider-text4 {
  margin: 5px 5px 10px 5px;
  padding: 0px 10px 10px 10px;
}
.slider-text5 {
  margin: 10px 8px 10px 8px;
  padding: 0px 8px 10px 8px;
}
.slide {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  line-height: 300px;
  text-align: center;
}
.slider img {
  width: 100%;
  margin: 0 auto;
  padding: 0 auto;
  text-align: center;
  object-fit: cover;
}
.slick-dots {
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  margin-top: 15px;
  bottom: -25px;
}
.slick-dots li {
  position: relative; 
  display: inline-block;
}
.slick-prev:before {
  color: #000000 !important; /* スライドの左右のボタンはデフォルトでは白く半透明になっているので背景に合わせて色を変える */
}
.slick-next:before {
  color: #000000 !important; /* スライドの左右のボタンはデフォルトでは白く半透明になっているので背景に合わせて色を変える */
}
.slick-slide {
  outline: none;
}

1個の画像に対するキャプションが長いと複数行になるので、他の画像を表示した時にドットインジケーターと画像の間の空白が大きくなるがしょうがないと思っている。縦画像と横画像は合わせるとドットインジケーターが縦画像に沿うので別々にしている。

キャプション付きのSlickを探す過程で以下の実装を見つけたが、これは上手く行かなかった。

See the Pen Slick carousel with detached captions by Feodor Dorodnov (@Svarnoy85) on CodePen.

Slick carousel with detached captions - CodePen

原因を深く突き詰めていないが、このはてなブログ上ではSlickが上手く実装できなかった。

写真ギャラリーページでのSlickの実装とは別に目次も設けようと思ったが、はてなブログのように上手く行かなかったので諦めた。

参考資料

weblasts.com

weblasts.com

-end-