Swiper Js - Click to show slide

Question

Swiper Js - Click to show slide

Navigation

#1 by (0 votes)

0

I need to do the following, with Swiper Js, that by clicking on an element, that slide is shown. As they do here: link but I do not get it ..

My code:

$ (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 & & amp;                     navSwiper! = null & & navSwiper! = undefined) {                   if (swiper.activeLoopIndex! = navSwiper.activeLoopIndex) {                       navSwiper.swipeTo (swiper.activeLoopIndex, 100, false);                   }               }           }
    })      / * PORTFOLIO UP var mySwiper = new Swiper ('. Swiper-container .swiper-slide-top', {mode: "horizontal", lazyLoading: true, watchSlidesVisibility: 1, slideToClickedSlide: true}) * /      / PORTFOLIO UNDER / 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 of the website in question: link

Thank you!

slider

asked by Ito Martinez Alonso 25.12.2018 в 17:17

source

1 answer

RecyclerView with Dates [JS / NODEJS] Error declaring a variable within a try catch block

score 0 · Accepted Answer

$(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); });
});

Solved!