swiper

Open full view…

How to get id of current active slide?

davidmalinowski
Wed, 17 Oct 2018 14:58:47 GMT

davidmalinowski
Wed, 17 Oct 2018 15:03:22 GMT

I donĀ“t mean activeIndex...

davidmalinowski
Thu, 18 Oct 2018 06:43:39 GMT

I need to show/hide sometimes some slides. I finde out it works by attaching the hidden attribute. function onClickCB(event){ var cbValue = parseInt(event.target.value); var isHidden = !event.target.checked; var slideToChangeStatus = "#chart"+cbValue; $(slideToChangeStatus).attr("hidden", isHidden); } Swiper works well without showing the hidden slides. At last I search for the current element with "swiper-slide-active" class at every slideChangeTransitionStart event to get the id of current slide: var activeSlide = document.getElementsByClassName("swiper-slide-active"); var as_html = activeSlide[0].outerHTML; var activeSlide_id = activeSlide[0].id; It works fine until no slides are hidden. But when swiper jumps over the hidden slide I get the id of the hidden slide not of the current visible slide... Any Idea? Thank you!

davidmalinowski
Fri, 19 Oct 2018 09:27:47 GMT

I've found a solution. At initialization it is necessary to set the parameter "watchSlidesVisibility" and observer to true. var swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 0, observer: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', hideOnClick: true }, keyboard: { enabled: true, }, watchSlidesVisibility: true }); And this is how you get the id of the currently visible slide swiper.on('transitionStart', function(){ var slideID = document.querySelector('.swiper-slide-visible').id; var activeSlide_nr = parseInt(slide.substr(5)); // now it is possible to execute some functions at current slides id switch(activeSlide_nr){ case 1: showBottomNavigation('noBottomNavi'); break; case 2: showBottomNavigation('Overview'); break; case 3: showBottomNavigation('noBottomNavi'); } } My Slides looks like: <div id="chart1" class="swiper-slide"></div> <div id="chart2" class="swiper-slide"></div> <div id="chart3" class="swiper-slide"></div>