0

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 )
    },
    })    
    });

Gracias!

1 respuesta 1

0
$(document).ready(function () {

var contentSwiper = new Swiper(".swiper-container", { pagination: '.swiper-nav', paginationClickable: true,  mode:"horizontal", initialSlide: 0, autoplay:true, loop: true, allowTouchMove:true, reloadImages: false, lazy: true  })

var navSwiper = new Swiper(".swiper-nav", { slidesPerView:"auto", simulateTouch: true, initialSlide: 0 })
$(".swiper-nav .swiper-slide").on('click', function(){ var indicedown = $(this).index(); indicedowngood = indicedown+1; contentSwiper.slideTo(indicedowngood, 500); });
});

Solucionado!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.