CODEWITHSUNDEEP
onclickswiper.js
Edward
Edward

Reputation: 47

iDangerous Swiper - Change content of swiper-slide onClick

Is it possible to change the content inside an individual swiper-slide onclick ?

I have sequentially numbered divs INSIDE each swiper-slide that are supposed to overlay an image when that individual div is clicked. I know JS is getting a response because it does change other divs outside of the swiper container when clicked.

I have tried:

    document.getElementById('div6').innerHTML=...

    document.getElementById('img6').src=....

    $('div6').on('click',function() {
    document.getElementById('div6').innerHTML="<img id='img6'   
    src='overlay.png'>";
    });

but nothing changes inside the swiper-slide. Here is my Swiper initialization in case that matters:

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 0,
    freeMode: true,
    width:200,
    loop: true,
    loopedSlides:30
});

Thanks in advance.

Upvotes: 0

Views: 1574

Answers (1)

Vadim S
Vadim S

Reputation: 358

You shoul write click handler like this:

$('#div6').on('click',function() {
    $(this).html('<img id="img6" src="overlay.png">');
});

Upvotes: 0

Related Questions