キービジュアルなどスライドするときに私はfotoramaをよく使用します。
設置も簡単で、いろんな機能がそろっているし、なんといっても使いやすいからです。

基本的な使い方は以下のような感じ。
JSを読み込ませて、あとはクラスにfotoramaを指定してあげればそれでスライドショーが完成します。

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css" media="all" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>


<div class="fotorama">
<img src="../images/key/key01.jpg" alt="画像01">
<img src="../images/key/key02.jpg" alt="画像02">
<img src="../images/key/key03.jpg" alt="画像03">
<img src="../images/key/key04.jpg" alt="画像04">
<img src="../images/key/key05.jpg" alt="画像05">
</div>

これで完成です。
で、今回はこのそれぞれの画像にリンクを設定したいんです。

単純に以下のソースを書きましたが、もちろん動かず・・・笑（単純ですみません）

<div class="fotorama">
<a href="url"><img src="../images/key/key01.jpg" alt="画像01"></a>
<a href="url"><img src="../images/key/key02.jpg" alt="画像02"></a>
<a href="url"><img src="../images/key/key03.jpg" alt="画像03"></a>
<a href="url"><img src="../images/key/key04.jpg" alt="画像04"></a>
<a href="url"><img src="../images/key/key05.jpg" alt="画像05"></a>
</div>

で、どうすればいいか調べたところ次の方法で実装できましたー！

<div class="fotorama">
  <div data-img="../images/key/key01.jpg"><a href="url" target="_blank"></a></div>
  <div data-img="../images/key/key02.jpg"><a href="url" target="_blank"></a></div>
  <div data-img="../images/key/key03.jpg"><a href="url" target="_blank"></a></div>
  <div data-img="../images/key/key04.jpg"><a href="url" target="_blank"></a></div>
  <div data-img="../images/key/key05.jpg"><a href="url" target="_blank"></a></div>
</div>

ちなみにスタイルシートも必要なので忘れずに～

.fotorama__html div,
.fotorama__html a {
  display: block;
  height: 100%;
}

これでしっかりスライドしながら画像にリンクをはることができます！便利ですね♪

しかしながら上のやり方でうまくいかないパターンもあるよう…

その場合は以下のやり方を試してみてください！

<div class="fotorama">
 <div data-thumb="../images/key/key01.jpg"><a href="url"><span style="background-image:url(../images/key/key01.jpg);">画像1</span></a></div>
 <div data-thumb="../images/key/key02.jpg"><a href="url"><span style="background-image:url(../images/key/key02.jpg);">画像2</span></a></div>
 <div data-thumb="../images/key/key03.jpg"><a href="url"><span style="background-image:url(../images/key/key03.jpg);">画像3</span></a></div>
 <div data-thumb="../images/key/key04.jpg"><a href="url"><span style="background-image:url(../images/key/key04.jpg);">画像4</span></a></div>
 <div data-thumb="../images/key/key05.jpg"><a href="url"><span style="background-image:url(../images/key/key05.jpg);">画像5</span></a></div>
</div>

.fotorama span {
    background:transparent no-repeat center;
    width:800px;
    height:600px;
    display:block;
    text-indent:-9999px;
}

どちらかで対応できるはず！
みなさんもどうぞお試しあれ～♪

• blog,
• code,
• web