Adding opacity layer to all slider images except the selected image

Question

I have an IosSlider that works great however I would like to add opacity to all the images except the selected image. This will highlight the selected image more and allow users to focus on just one image at a time. Here is my javascript for the IosSlider and the Image Indicators:

 <script>
        $(window).load(function() {
        
            $('.iosSlider').iosSlider({ 
            desktopClickDrag: true,
            onSlideChange: slideChange,
            navNextSelector: $('.nextButton'),
            navPrevSelector: $('.prevButton'),
            infiniteSlider:true,
            snapSlideCenter: true
          
             });
    });
            
    function slideChange(args) {
        
        try {
            console.log('changed: ' + (args.currentSlideNumber - 1));
        } catch(err) {
        }
        
        $('.indicators .item').removeClass('selected');
        $('.indicators .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
    
    }   
    </script>

Here is my html code:

<section id="slider" >

<div class="container-fluid">
           
    <div class = 'responsiveHeight'>
            
        <div class = 'inner'>
                            
            <div class = 'iosSlider'>
                                
                <div class = 'slider'>
                                        
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/01 0614-23.1491.1503.jpg"/>
                                           
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/02 0614-23_1350.jpg"/>
                                          
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/03 0614-23_DSC2008.jpg"/>
                                          
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/04 0614-23_DSC2130.jpg"/>
                                            
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/05 0614-23_G3A1975crop2.jpg"/>
                    
                </div>
            
            </div>
            
        </div>
        <div class = 'prevButton'></div> 
        <div class = 'nextButton'></div>
    
    </div>
           
</div> <!-- end container -->

<div class = 'indicators'>
    <div class = 'item selected'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
</div>

I'm trying to set all my slider images to Opacity 0.3 except the image currently selected using CSS:

img {
opacity: .3;
}

img .item .selected{
opacity: 1;
}

I'm not very proficient in Javascript but I was wondering if there is a simple way to do this either using CSS or Javascript. Thanks. Please see the example image to explain further what I'm trying to accomplish: Desired slider result

Worked great! Thanks. I just needed to add a few lines of javascript to get everything to work. Is there a way to ease the transition when the opacity is removed from the selected image? — Jill Mark, Feb 22 '21 at 02:36

score 0 · Answer 1 · answered Feb 21 '21 at 22:35

Almost there! In CSS, the space character is a child operator, so your current selector img .item .selected targets elements with class of selected that are children of an item of class item, that is itself a child of an img element.

In your case, I believe you mean to target an image that has both classes selected and item. If so, just remove the spaces:

img.item.selected {
    //...
}

score 0 · Accepted Answer · answered Feb 22 '21 at 02:30

Thanks for the help! I needed a little nudge that I was heading in the right direction. I changed by CSS to:

.item.selected{
opacity: 1;

}

But then I still needed to add some javascript to get it to work so I added these two lines just below the other "indicator" javascript:

$('img.item').removeClass('selected');
$('img.item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

Adding opacity layer to all slider images except the selected image

2 Answers2