I tried
a.active img{ border: 3px solid #8CC63F;
padding: 5px;
box-sizing: border-box;}
But it only works on initial page load. Once another thumbnail is selected the border disappears.
Any help/advice is GREATLY appreciated. Thanks!
Both Thumbnail pager methods in the original documentation have the active thumbnail with a different colored border and that’s all I want to do!
http://bxslider.com/examples/thumbnail-pager-1
http://bxslider.com/examples/thumbnail-pager-2
This code works until any thumbnail besides the first one is selected:
.bxpager a:hover img, .bxpager a.active img {
border: 3px solid #8CC63F !important;
}
http://www.mkleinmedia.com/pandemicdesignstudio/project/iron-curtain/
Is there any update on this or can you point me in the right direction?
Hi,
sorry, I don’t have any idea about how to achieve that in particular, I don’t have much time to allocate to supporting this plugin currently. You’ll have to dive little more into CSS.
So I actually solved this – for anyone that would also like to highlight the active image in the carousel add this script before the </body> tag
<script>
//When clicking on carousel image
$('.bxpager a').on('click', 'img', function () {
//Remove active class from all other images
$('.bxpager a img').removeClass('active');
//Add active class to clicked image only
$(this).addClass('active');
});
</script>
Then simply add your own styles to the selector
.bxpager a img.active {
/*put your styles here */
}
