While using the Cycle2 Carousel plugin, I encountered an issue with the class being set for my thumbnails. The plugin sets the .cycle-pager-active class for both images and divs, which is not ideal. I attempted to fix this by adding 'img' before the class, but nothing changed. If you inspect the #thumbnail div at the bottom of the body tag, you'll see the problem. What should I do next?
What I tried so far:
I modified this line:
pagerActiveClass: 'cycle-pager-active',
to this line:
pagerActiveClass: 'img.cycle-pager-active',
but unfortunately, the issue persisted.
$(document).ready(function(){
$(".mySlideShow").cycle({
pauseOnHover: true,
pagerActiveClass: 'cycle-pager-active',
pager: "#thumbnail",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item"
});
});.mySlideShow img{
width:700px;
}
#thumbnail 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="thumbnail">
<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>