Как немедленно отобразить активное изображение с карусели на мой 2-й див, если я нажму следующий / предыдущий?

Question

Как немедленно отобразить активное изображение с карусели на мой 2-й див, если я нажму следующий / предыдущий?

1

У меня проблема с отображением активного изображения с карусели на мой второй div, когда я нажимаю следующий/предыдущий. Похоже, что он задерживается, когда я нажимаю следующий/предыдущий.

function strapActiveImage() {
        var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
        document.getElementById('strap_logo').src = activeElImgSrc;
        document.getElementById('strap_logo2').src = activeElImgSrc;

    }

    <!-- STRAP -->
    <div class="justify-content-center body-inner">
        <div class="personalize-item-title left-align bold">
            <span>STRAP</span>
        </div>
        <!-- CarouselBegin -->
        <div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
                </div>
                <div class="carousel-item">
                    <img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
                </div>
            </div>
            <a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" 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="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <span>LEATHER</span>
        <!-- CarouselEnd-->
    </div>
    <!-- STRAP END -->
<div class="justify-content-center body-inner">
    <img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo">
    <img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2">
</div>

Reynante Daitol 10 июнь 2018, в 13:15

Источник

1

Это в css, ищите transition и transform в карусели, установите их в none
Pavlo 10 июнь 2018, в 10:40
0

Я попробую @Pavlo. Спасибо за ответ BDW.
Reynante Daitol 10 июнь 2018, в 10:45
0

Возможно, переход и преобразование тоже не решают мою проблему @Pavlo, но все равно благодаря вашему ответу.
Reynante Daitol 10 июнь 2018, в 11:03

Показать ещё 1 комментарий

Теги:

javascript

1 ответ

Ещё вопросы

Это в css, ищите transition и transform в карусели, установите их в none
Я попробую @Pavlo. Спасибо за ответ BDW.
Возможно, переход и преобразование тоже не решают мою проблему @Pavlo, но все равно благодаря вашему ответу.

Reynante Daitol · Accepted Answer · 2018-06-12T11-35-00.000Z

В интересах тех, кто ищет ответ на вопрос/проблему, подобную этой, я смог решить свою проблему, добавив onload = "strapActiveImage()" в тег изображения (где происходит отображение). Вот код:

function strapActiveImage() {
        var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
        document.getElementById('strap_logo').src = activeElImgSrc;
        document.getElementById('strap_logo2').src = activeElImgSrc;

    }

    <!-- STRAP -->
    <div class="justify-content-center body-inner">
        <div class="personalize-item-title left-align bold">
            <span>STRAP</span>
        </div>
        <!-- CarouselBegin -->
        <div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
                </div>
                <div class="carousel-item">
                    <img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
                </div>
            </div>
            <a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" 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="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <span>LEATHER</span>
        <!-- CarouselEnd-->
    </div>
    <!-- STRAP END -->
<div class="justify-content-center body-inner">
    <img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo" onload="strapActiveImage()">
    <img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2" onload="strapActiveImage()">
</div>