Javascript needed for active image


Just joined & looking for some advice if i may ask.
I have learning disabilities so not sure correctly asking my question or sometimes understanding your advice given.

Here is my page

I have a main image & also thumbnail images.
I would like that when a main image is shown its thumbnail image has opacity etc so the user can see which image they are currently on.

As the user click next / previous arrow then thumbnail image will always match the main image.

Thanks for understanding & hope you can help me.

Have a nice evening.


Hi @Iparsons68, it seems your code already adds a selected class to the active list item... so you just need to add some CSS:

.selected {
  opacity: .5;


Many thanks for the reply.

I added this below.

    position: relative;

.selected::before {
    content: '';
    position: absolute;
    z-index: 1; 
    width: 100%; 
    height: 100%; 
    background-color: rgba( 255, 0, 255, 0.4);
    box-shadow: inset 0 0 0.5em #000;


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.