サイト作成時に、サムネイルが縦のスライダーを作成する必要があり、最初はslickを使用して作成しました。
しかし、複数のスライダーを設置した時に挙動が全て連動してしまったため自作しました。
その備忘録となります。
前提
ここでは、求人情報を掲載すると仮定します。
複数の求人情報が登録でき、それぞれの求人情報毎に画像を複数枚登録できるものとします。
完成形
まずは完成形のソースを載せておきます。
特に説明が不要でしたらコピペしてcss等を自分用に調整してください。
HTML
表示させる画像は5枚を想定しています。
<div class="vertical-slider">
<ul id="mainVertical_{{ $offer['id'] }}" class="listSlider" data-offer-id="{{ $offer['id'] }}">
<li id="offerSlide_{{ $offer['id'] }}_0"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li class="d-none" id="offerSlide_{{ $offer['id'] }}_1"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li class="d-none" id="offerSlide_{{ $offer['id'] }}_2"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li class="d-none" id="offerSlide_{{ $offer['id'] }}_3"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li class="d-none" id="offerSlide_{{ $offer['id'] }}_4"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
</ul>
<ul id="Thumbnail_{{ $offer['id'] }}" class="listThumbnail">
<li data-offer-id="{{ $offer['id'] }}" data-thumb-num="0" id="thumb_{{ $offer['id'] }}_0" class="thumbOpacity"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li data-offer-id="{{ $offer['id'] }}" data-thumb-num="1" id="thumb_{{ $offer['id'] }}_1" ><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li data-offer-id="{{ $offer['id'] }}" data-thumb-num="2" id="thumb_{{ $offer['id'] }}_2"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li data-offer-id="{{ $offer['id'] }}" data-thumb-num="3" id="thumb_{{ $offer['id'] }}_3"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
<li data-offer-id="{{ $offer['id'] }}" data-thumb-num="4" id="thumb_{{ $offer['id'] }}_4"><img class="任意のclass" src="任意の画像読み込み先" alt="任意"></li>
</ul>
</div>CSS
cssは正直適当です。気に入った形に調整してください。
/*---- メインとサムネイルの分割 ----*/
.vertical-slider{
display: flex;
justify-content: center;
}
/*---- メイン部分 ----*/
.listSlider{
flex: 0 0 79%;
margin-right: 15px;
}
/*---- サムネイル部分 ----*/
.listThumbnail{
height: 100%;
flex-direction: column;
display: flex;
justify-content: space-between;
flex: 0 0 14%;
li{
background-color: #000;
cursor: pointer;
margin-bottom: 8px;
flex: 0 0 18%;
&:last-child{
margin-bottom: 0;
}
&.thumbOpacity {
img {
opacity:0.6;
}
}
}
}
/*---- 画像の表示・非表示 ----*/
.d-none{
display: none;
}JS
<script>
$(function(){
//画像をフェードさせる関数
function photoFade(offer_id, thumb_num) {
$('#mainVertical_'+offer_id).children('li').addClass('d-none');
$("#offerSlide_"+offer_id+'_'+thumb_num).removeClass('d-none');
$('#Thumbnail_'+offer_id).children('li').removeClass('thumbOpacity');
$('#thumb_'+offer_id+'_'+thumb_num).addClass('thumbOpacity');
}
//サムネイルを押した時の処理
$(".listThumbnail li").click(function(){
let thumb_num = $(this).attr('data-thumb-num');
let offer_id = $(this).attr('data-offer-id');
photoFade(offer_id, thumb_num);
});
//スライドスタート
photoFade();
});
</script>解説
簡単な解説も書いておきます。
必要あったら読んでみてください。
HTML部分
まず複数の求人情報がある場合を想定して、それぞれの求人情報のIDを取得する必要があります。
get_the_ID()などのデータのIDを取得するコードをHTMLの {{ $offer[‘id’] }}部分に上書きしてください。
これで求人情報毎のスライダーが全て連動せずに動きます。
cssに関しては正直解説することもないので、省きます。
JavaScript部分
JavaScript部分ですが、
$('#mainVertical_'+offer_id).children('li').addClass('d-none');上述部分で、まずメインに表示させる画像全てにd-noneという非表示にするクラスを追加します。
その次に、
$("#offerSlide_"+offer_id+'_'+thumb_num).removeClass('d-none');にて、サムネイル画像に対応するメイン画像からd-noneを削除し、表示させます。
初期状態ではサムネイルの一番上に表示されている画像に対応したメイン画像が表示されています。（初期：data-thumb-num=”0″）
残りの処理の
$('#Thumbnail_'+offer_id).children('li').removeClass('thumbOpacity');
$('#thumb_'+offer_id+'_'+thumb_num).addClass('thumbOpacity');に関しては、選択されたサムネイル画像を透けさせるためのクラスを追加するための処理になっています。
冒頭の前提の通り、いくつでもスライダーが表示され、それぞれが連動しない形にするためにID部分を変数にしています。
もしスライダーの数が決まっている場合はIDの変数部分を適当な数値に変更して、JSを書き換えれば大丈夫です。
