カルセール(写真スライド)昨日はbootstrapによく使われている機能の１つです。
実現方法も簡単ですが、オフィシャルサイトのドキュメントを参照したら、誰でも簡単に作れると思います。
これだけで、ほとんどのサイトのhero areaの写真スライド機能が実現できるでしょう。
しかし、たとえ、商品写真など、複数の写真を表示するときに、表示されていない社員のthumbnailを表示したい時があるでしょう。
簡単にいうと、写真スライドの下に、各写真のthumbnailを表示したいですね、
以下のこの機能を実現する方法を簡単にまとめます。
まず、ソースから行きましょう。
<div class="container my-4">
<p class="font-weight-bold">Bootstrap carousel with thumbnails is an improved version of the standard bootstrap carousel additionally equipped with thumbnails.</p>
<strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/jquery/javascript/carousel/" target="_blank" rel="noopener">Bootstrap Carousel Docs</a>.</strong>
<hr class="my-4" />
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg" alt="First slide" /></div>
<div class="carousel-item"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" alt="Second slide" /></div>
<div class="carousel-item"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide" /></div>
</div>
<!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" role="button" href="#carousel-thumb" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" role="button" href="#carousel-thumb" data-slide="next"> <span class="sr-only">Next</span> </a> <!--/.Controls-->
<ol class="carousel-indicators">
<li style="list-style-type: none;">
<ol class="carousel-indicators">
<li class="active" data-target="#carousel-thumb" data-slide-to="0"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(88).jpg" /></li>
</ol>
</li>
</ol>
<ol class="carousel-indicators">
<li style="list-style-type: none;">
<ol class="carousel-indicators">
<li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(121).jpg" /></li>
</ol>
</li>
</ol>
<ol class="carousel-indicators">
<li style="list-style-type: none;">
<ol class="carousel-indicators">
<li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).jpg" /></li>
</ol>
</li>
</ol>
</div>
<!--/.Carousel Wrapper-->
</div>そんなに複雑ではないですよね。この中の画像を自分の画像に変更したら、簡単的に、thumbnail付きの写真スライド機能が実現できます。
効果は以下の画像を参照してください。
詳細は以下のリンクを参照してください。
https://mdbootstrap.com/snippets/jquery/ascensus/135500
