How to set active class to second image for Cycle2?

Question

My all item has cycle-pager-active class but I just want to give them to images not div that's why I found a why I want to add active class my second element in #single-pager so I have to ask how can I do this ?

$(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

The problem was that you need to set the property:

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

instead of

pager: "#single-pager",

When the property is #single-pager the plugin adds the thumbnails to the div. So instead of 3 divs you have 4. So the plugin start from the first div which is not thumbnail.

Like this:

$(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>