位置情報ゲーム「Ingress」を用いた自治体での観光振興の取り組み―神奈川県横須賀市と東京都中野区の事例研究によるモデル構築―

内田悠貴; RuinDig

2022-08-11

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

ブログ

Share on

スライドプラグインの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;
}