загрузочные адаптивные значки и изображения

Question

Дело в том, что мне нужно сделать эти значки по правой ссылке на фотографии, которые появятся при клике. Если я щелкну первый, на нем будут показаны клубника, на втором - некоторые другие фрукты и т. Д. И т. Д. И в то же время ему нужно написать название этого фрукта слева, как в этом случае Strawberry и т. Д.

HTML:

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-4 text-center">
            <h2>Nasi Proizvodi</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ullam temporibus ex et
                consequatur eligendi error, voluptatibus quaerat? Quam qui nesciunt doloribus adipisci placeat nam
                incidunt cupiditate repellat! Animi, blanditiis.</p>
        </div>
        <div class="col-xl-6">
            <img src=" np-assets/images/tekstura.png" class="hero-image ml-auto">
            <ul class="nav links_up justify-content-center">
                <li class="nav-item slika1">
                    <a class="nav-link active" href="#"><img src="np-assets/images/jagodica.png"></a>
                </li>
                <li class="nav-item slika2">
                    <a class="nav-link active" href="#"><img src="np-assets/images/sljiva.png"></a>
                </li>
                <li class="nav-item slika3">
                    <a class="nav-link active" href="#"><img src="np-assets/images/tresnja.png"></a>
                </li>
                <li class="nav-item slika4">
                    <a class="nav-link active" href="#"><img src="np-assets/images/malina.png"></a>
                </li>
                <li class="nav-item slika4">
                    <a class="nav-link active" href="#"><img src="np-assets/images/kupina.png"></a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

.links_up {
    margin-top: -27%;
    color: #ffffff;
    position: relative;
    size: 1vw;

    .slika1 {
        width: 85px;
        height: 85px;
        padding: 0px;

        img {
            margin: 0px;
            padding: 0px 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika2 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika3 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika4 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika5 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }
}

Answer 1

Есть много способов сделать это, один простой способ, который позволяет ему расти - это использование атрибутов данных.

<a data-image="photo-strawberries.png" data-title="Strawberries" class="nav-link active" href="#"><img src="np-assets/images/jagodica.png"></a>

, затем с помощью jQuery:

$(document).ready(function(){
     $(".nav-link").on("click",function(){
         $("h2").html($(this).data("title"));
         $(".hero-image").attr("src",$(this).data("image"));
         return false;
      });
});