Necesito hacer lo siguiente, con Swiper Js, que al hacer click en un elemento, se muestre esa diapositiva. Como hacen aquí: http://jsfiddle.net/UDwnZ/1/ pero no lo consigo..
- Mi código:
$(document).ready(function () {
function setContentSize() { $('.swiper-content').css({ height: $(window).height()-$('.swiper-nav').height() }) }
/ALL/ var contentSwiper = new Swiper(".swiper-content", { mode:"horizontal", queueStartCallbacks: true, autoplay:true, loop: true, allowTouchMove:true, reloadImages: false, lazy: true,
onSlideChangeStart: function(swiper){ navSwiper.swipeTo(swiper.activeLoopIndex, 100, false)},
onSlideChangeEnd: function (swiper) {
if (swiper != null && swiper != undefined &&
navSwiper != null && navSwiper != undefined) {
if (swiper.activeLoopIndex != navSwiper.activeLoopIndex) {
navSwiper.swipeTo(swiper.activeLoopIndex, 100, false);
}
}
}
})
/*PORTFOLIO ARRIBA var mySwiper = new Swiper('.swiper-container .swiper-slide-top', { mode:"horizontal", lazyLoading: true, watchSlidesVisibility: 1, slideToClickedSlide: true}) */
/PORTFOLIO DEBAJO/ var navSwiper = new Swiper(".swiper-nav", { slidesPerView:"auto", loop:true, createPagination: false, initialSlide: '0',
moveStartThreshold: 10, queueStartCallbacks: true, simulateTouch: true, initialSlide: 0,
onSlideClick: function(swiper){
var ls = swiper.loopedSlides;
var slideIndex = swiper.clickedSlideIndex - ls;
if (slideIndex >= swiper.slides.length - ls*2) {
slideIndex = swiper.slides.length - ls*2 - slideIndex;
}
if (slideIndex<0) {
slideIndex = -slideIndex;
}
navSwiper.swipeTo(slideIndex, 100, true);
},
onSlideChangeStart: function(swiper){
contentSwiper.swipeTo( swiper.activeLoopIndex, 0, false )
},
})
});
- Url de la web en cuestión: https://www.qode.pro/portfolio/
Gracias!