Comment définir la classe active à la deuxième image pour Cycle2?

Question

Tout mon article a cycle-pager-active classe mais je veux juste leur donner des images non div c'est pourquoi j'ai trouvé un pourquoi je veux ajouter la classe active mon deuxième élément en #single-pager alors je dois demander comment puis-je faire cela?

$(document).ready(function(){ 
 

 
    $(".mySlideShow").cycle({ 
 
     pauseOnHover: true, 
 
     pager: "#single-pager", 
 
     pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>", 
 
     slides: ".item" 
 
    }); 
 
    
 
});

.mySlideShow img{ 
 
    width:700px; 
 
} 
 
#single-pager img { 
 
    margin:10px; 
 
} 
 
.cycle-pager-active{ 
 
    border:3px solid orange; 
 
}

<div class="mySlideShow"> 
 
    <div class="item"> 
 
     <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt=""> 
 
    </div> 
 

 
    <div class="item"> 
 
     <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt=""> 
 
    </div> 
 
    
 
    <div class="item"> 
 
    <img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt=""> 
 
    </div> 
 
</div> 
 
    
 
<div id="single-pager"> 
 
    <div class="thumbnail-expand"></div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

Codepen Demo

Answer 1

Le problème est que vous devez définir la propriété:

pager: "#single-pager .thumbnail-expand", 

au lieu de

pager: "#single-pager", 

Lorsque la propriété est #single-pager le plugin ajoute les vignettes à la div. Donc, au lieu de 3 div s vous avez 4. Donc le plugin commence à partir du premier div qui n'est pas une vignette.

Comme ceci:

$(document).ready(function() { 
 

 
    $(".mySlideShow").cycle({ 
 
    pauseOnHover: true, 
 
    pager: "#single-pager .thumbnail-expand", 
 
    pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70' />", 
 
    slides: ".item" 
 
    }); 
 
});

.mySlideShow img { 
 
    width: 700px; 
 
} 
 

 
#single-pager img { 
 
    margin: 10px; 
 
} 
 

 

 
/* add this -> */ 
 

 
img.cycle-pager-active { 
 
    border: 3px solid orange; 
 
}

<div class="mySlideShow"> 
 
    <div class="item"> 
 
    <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt=""> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt=""> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt=""> 
 
    </div> 
 
</div> 
 

 
<div id="single-pager"> 
 
    <div class="thumbnail-expand"></div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>