bxsliderで各サムネイル画像にもJavaScriptでリンクを貼りたい

Question

前提・実現したいこと

bxsliderで各サムネイル画像にもJavaScriptでリンクを貼りたい

発生している問題

下記jsコード内
'<a data-slide-index="' + i + '" href="#">のhrefの#にurlを追加すると全てのサムネイルのリンクが同じになってしまうが、それを個別に分解する方法が検索しても見つからない。

該当のソースコード

<ul id="bxslider01">
    <li><a href="#"><img src="img/img01.jpg" /></a></li>
    <li><a href="#"><img src="img/img02.jpg" /></a></li>
    <li><a href="#"><img src="img/img03.jpg" /></a></li>
    <li><a href="#"><img src="img/img04.jpg" /></a></li>
    <li><a href="#"><img src="img/img05.jpg" /></a></li>
</ul>
<div class="custom-thumb"></div>

$(function() {
    // サムネイルのサイズ
    var thumbWidth = 150;
    var thumbHeight = 150;
 
    // サムネイルの作成
    var insert = '';
    for (var i = 0; i < $('#sample li').length; i++) {
        insert += '<a data-slide-index="' + i + '" href="#"><img src="' + $('#sample li').eq(i).children('img').attr('src') + '" width="' + thumbWidth + '" height="' + thumbHeight + '" /></a>';
    };
    $('.custom-thumb').append(insert);
 
    $('#sample').bxSlider({
        pagerCustom: '.custom-thumb',
    });
});

試したこと

jsで各画像毎に異なるクラス名を付けてhrefを書き換えようとしたが、調べても方法が見つからなかった。

補足情報（FW/ツールのバージョンなど）

元々、JavaScriptでサムネイルが追加されていたため、その部分をコメントアウトしてHTMLで記述するとスライダーの画像や動きに不具合が見られたため、JavaScriptで出来ればと考えています。

スライダーイメージ
このようなメイン画像の下に横並びのサムネイルがあり、その各サムネイル画像にもリンクを貼りつけたいです。

Comments

[kei344]

「各サムネイル画像にもリンクを貼りつけ」するとスライダーの切り替え機能は使えなくなりますが、それでも問題ないのでしょうか。

Answer 1

メインスライドのクラス名を変えcssで新たに装飾を施し、デフォルトのjsファイルとの関係を切ったことで挙動の不具合も解消された。
それによりサムネイル部分もHTMLで出力することで個別リンクを可能にし、jQueryでスライドの切り替えをクリックからマウスオン(ホバー)にすることでスライダーの機能を維持したままやりたいことを実現させた。