Swiper: slideTo (". Slide-classname")

Question

Содержит ли Swiper (http://www.idangero.us/swiper) событие для скольжения с определенным классом? Существует событие slideTo (index), но мне нужно что-то вроде slideTo (". Slide-classname").

Это то, что я пытаюсь сделать - может быть другой подход возможен:

<script type="text/javascript"> 
    $j(document).ready(function(){ 
     $j("#attribute529").change(function() { 
     var optionValue = $j(this).val(); 
     var optionValueText = $j.trim($j('#attribute529 :selected').text()); 
     if(! optionValue){ 
      galleryTop.slideTo(0); 
     } else { 
      galleryTop.slideTo(".product-image_" + optionValueText); 
     } 
     }); 
    }); 
</script> 

Answer 1

Я создал решение ниже, здесь я создал функцию getSlideIndexByClass, которая будет возвращать индекс элемент в слайдере по имени его класса, а затем я просто вызываю функцию slideTo с этим значением индекса.

var swiper = new Swiper('.swiper-container', { 
 
    pagination: '.swiper-pagination', 
 
    paginationClickable: true 
 
}); 
 

 
swiper.slideTo(getSlideIndexByClass('my-class')); 
 

 
function getSlideIndexByClass(className) { 
 
    var index = 0; 
 
    $.each($('.swiper-wrapper').children(), function(i, item) { 
 
    if ($(item).hasClass(className)) { 
 
     index = i; 
 
     return false; 
 
    } 
 
    }); 
 
    return index; 
 
}

html, 
 
body { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
body { 
 
    background: #eee; 
 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    color: #000; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.swiper-container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.swiper-slide { 
 
    text-align: center; 
 
    font-size: 18px; 
 
    background: #fff; 
 
    /* Center slide text vertically */ 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script> 
 
<div class="swiper-container"> 
 
    <div class="swiper-wrapper"> 
 
    <div class="swiper-slide">Slide 1</div> 
 
    <div class="swiper-slide">Slide 2</div> 
 
    <div class="swiper-slide">Slide 3</div> 
 
    <div class="swiper-slide">Slide 4</div> 
 
    <div class="swiper-slide">Slide 5</div> 
 
    <div class="swiper-slide my-class">Slide 6</div> 
 
    <div class="swiper-slide">Slide 7</div> 
 
    <div class="swiper-slide">Slide 8</div> 
 
    <div class="swiper-slide">Slide 9</div> 
 
    <div class="swiper-slide">Slide 10</div> 
 
    </div> 
 
    <!-- Add Pagination --> 
 
    <div class="swiper-pagination"></div> 
 
</div>