Swiperでボタンをクリックすると任意のコンテンツに移動させたい。

前提・実現したいこと

Swiperを使って、アイコン横の矢印をクリックすると該当のコンテンツへスライドするようにしたいです。
該当のコンテンツにidをつけて、<a href="#slide2">で試してみましたが、うまく動作しません。
どなたかご教授願えませんでしょうか。

該当のソースコード

<ul>
    <li>
        <div class="what_r_item_l">
            <figure><img src="images/what-img1.png" width="100%"></figure>
            <h4>BRANDING</h4>
        </div>
        <div class="what_r_item_r">
            <a href="#slide2"><img src="images/what-img4.png" width="100%"></a>
        </div>
    </li>
    <li>
        <div class="what_r_item_l">
            <figure><img src="images/what-img2.png" width="100%"></figure>
            <h4>WEALTH MANAGEMENT</h4>
        </div>
        <div class="what_r_item_r">
            <a href="#slide3"><img src="images/what-img4.png" width="100%"></a>
        </div>
    </li>
    <li>
        <div class="what_r_item_l">
            <figure><img src="images/what-img3.png" width="100%"></figure>
            <h4>GIVING</h4>
        </div>
        <div class="what_r_item_r">
            <a href="#slide4"><img src="images/what-img4.png" width="100%"></a>
        </div>
    </li>
</ul>

<div class="swiper-slide" id="slide2">BRANDINGの内容が入る</div>
<div class="swiper-slide" id="slide3">WEALTH MANAGEMENTの内容が入る</div>
<div class="swiper-slide" id="slide4">GIVINGの内容が入る</div>

window.addEventListener('DOMContentLoaded', function () {
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true,
    });
}, false);