Highlight active carousel thumbnail

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!

https://bxslider.com/examples/thumbnail-pager-1
https://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;
}

https://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 */
}