Bootstrap｜スライダー画像にイベント埋め込み

公式サイトのスライダーコード

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

公式サイトからコピペしただけのコードです。

IDを付与

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div id="sliderImg1" class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div id="sliderImg2" class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div id="sliderImg3" class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

各々の画像にイベントを埋め込む準備としてイメージの親要素にIDを設定します。

イベント埋め込み

let elm_img1    =   document.getElementById("sliderImg1");
let elm_img2    =   document.getElementById("sliderImg2");
let elm_img3    =   document.getElementById("sliderImg3");

elm_img1.onclick    =   function()
{
    ここに処理を書く
};
elm_img2.onclick    =   function()
{
    ここに処理を書く
};
elm_img3.onclick    =   function()
{
    ここに処理を書く
};

JavaScriptで設定したIDを利用して、エレメントを取得します。

取得したエレメントにonclickイベントを実装します。