Я хочу создать 1 карусель, но пусть она показывает разные изображения в зависимости от того, какое изображение я нажимаю

Question

У меня есть четыре миниатюрных изображения; если вы нажмете на одну из них, откроется модальная карусель. Мне было интересно сделать код чистым. Можно ли связать нажатие на миниатюру с набором изображений внутри карусели?

Например, если я щелкну миниатюру 1, я хочу, чтобы она уловила 3 ​​изображения одной и той же карусели, и если я щелкну миниатюру 2 Я хочу, чтобы он поймал 3 следующих изображения и, конечно же, скрыл предыдущие 3 и так далее. Возможно ли это?

Я знаю, что могу скопировать одну карусель для второй копии карусели и т. Д. c., Но я хочу, чтобы мой код был максимально чистым. Я также использую PHP. Есть ли способы сделать это?

<!-- IndexTiles contains background images inside CSS -->
<div class="indexTiles col-md-6 portfolio1 thumbnail"></div>
<div class="indexTiles col-md-6 portfolio2 thumbnail"></div>
<div class="indexTiles col-md-6 portfolio3 thumbnail"></div>
<div class="indexTiles col-md-6 portfolio4 thumbnail"></div>


<!-- Modal opens at click (see script at bottom) -->
<div id="carouselModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered">

        <!-- Modal content-->
        <div class="modal-content">
            <!-- BEGIN Carousel -->
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="img/campingReserveringSysteem1.png" alt="First slide">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>My Caption Title (1st Image)</h5>
                            <p>The whole caption will only show up if the screen is at least medium size.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="img/webshop1.png" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="img/poppodium1.png" alt="Third slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="img/bedAndBreakfast1.png" alt="Fourth slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    $('.thumbnail').click(function () {
        $('#carouselModal').modal('show');
    });
</script>

Answer 1

Одним из способов было бы просто изменить атрибут src изображений на основе нажатой пиктограммы.

Для этого вы можете присвоить каждому эскизу идентификатор, например:

<div class="indexTiles col-md-6 portfolio1 thumbnail" id="1"></div>
<div class="indexTiles col-md-6 portfolio2 thumbnail" id="2"></div>
<div class="indexTiles col-md-6 portfolio3 thumbnail" id="3"></div>
<div class="indexTiles col-md-6 portfolio4 thumbnail" id="4"></div> 

Затем в вашем Javascript вы можете связать каждый идентификатор со списком источников изображений, используя ассоциативный массив:

var images = {
    "1": ["image1.png", "image2.png", "image3.png"],
    "2": ["image4.png", "image5.png", "image6.png"],
    "3": ["image7.png", "image8.png", "image9.png"],
    "4": ["image10.png", "image11.png", "image12.png"],
}

Наконец, в вашем обработчике событий onclick вы можете получить доступ к нужному изображению составьте список с помощью images[id], где id - идентификатор изображения, по которому щелкнули, и измените атрибуты src трех изображений, чтобы они соответствовали трем элементам списка.

Надеюсь, это даст вам хороший результат. начало!

Редактировать: Чтобы быть более точным c, в обработчике onclick миниатюр вы бы сделали что-то вроде этого:

$(".thumbnail").click(function() {
    //the ID of the thumbnail clicked (`this` here points to the button that was clicked)
    var thumbnail_id = this.id; 

    //list of the right images (based on which button was clicked)
    //e.g. if button 1 was clicked, imagesToLoad = ["image1.png", "image2.png", "image3.png"]
    var imagesToLoad = images[thumbnail_id]; 

    //looping over the thumbnail images and changing their `src` attributes
    //so the first image gets associated with the first image URL of the list, the second with the second, etc.
    $(".carousel-item img").each(function(index, element) {
        element.src = imagesToLoad[index];
        //or if you used CSS's `background-image` instead of `src`
        element.style.backgroundImage = `url(${imagesToLoad[index]})`
    });
});