Javascript needed for active image


#1

Hi,
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 http://www.theatticbanwell.co.uk/slideshow.html

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.


#2

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;
}

#3

Many thanks for the reply.

I added this below.
Thanks.

.selected{
    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;
 }

#4

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