Applying a transparent layer to all slider images, with the exception of the one that is

I am utilizing an IosSlider that is functioning properly, but I am looking to enhance it by adding opacity to all images except for the selected image. This adjustment will make the selected image stand out more and enable users to focus on one image at a time. Below is the Javascript code for the IosSlider and 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>

Below is the 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 aim to adjust the opacity of all my slider images to 0.3, except the currently selected image, using CSS:

img {
opacity: .3;
}

img .item .selected{
opacity: 1;
}

While I lack proficiency in Javascript, I am exploring a straightforward method to achieve this goal through either CSS or Javascript. Thank you for your assistance. For further clarification, please refer to the example image illustrating what I intend to achieve: Desired slider result

javascriptcssiosslideropacity

Answer №1

Getting close! When working with CSS, remember that the space character signifies a child operator. This means that your current selector img .item .selected is targeting elements with the class of selected that are children of an item with the class of item, which is itself a child of an img element.

In this scenario, it seems like you want to target an image that has both classes of item and selected. To do so, simply remove the spaces:

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

Answer №2

Appreciate the assistance! I was veering in the right direction but needed a gentle push. Made some adjustments to my CSS:

.item.selected{
opacity: 1;

}

However, realized I needed to incorporate some javascript to make it fully functional. Added these two lines of code just below the existing "indicator" javascript:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm puzzled by the inconsistency of my scrolltop function on mobile, as it seems to be scrolling to various parts of the page depending on my

I am encountering an issue with a function that scrolls to a specific element when a button is clicked. Strangely, this functionality works fine on desktop but fails on mobile devices. It successfully scrolls to the correct position only when at the top of ...

javascripthtmljquery

Tips for creating an effective planar reflection using Open Graphics Library (OGL) in conjunction with a perspective camera

I'm attempting to create a mirror-like reflection of a WebGL scene on a plane using ogl, similar to how a mirror would behave. I tried implementing a basic version of the three.js reflector but ended up with a distorted image that doesn't accurat ...

javascriptthree.js3dwebglogl

Learn the art of closing an AngularJS accordion automatically when another accordion is opened within an AngularJS application

I have encountered an issue with the AngularJS accordion functionality. It seems that when I have multiple accordions, such as accordion-1, accordion-2, and accordion-3, they all open simultaneously if clicked on individually. My main concern is: How can ...

javascriptcssangularjstwitter-bootstrap

"Disappearing act: The searchResultsController in UISearchController vanishes when the searchbar

I've implemented a UISearchController in my app that shows its searchResultsController (which is another view controller) when the user taps on the search bar. I have achieved this by using the following delegate method for UISearchController: -(void ...

iosobjective-cuisearchbaruisearchcontroller

What is the reason for the absence of the $.ajax function in the jQuery package designed for node.js?

Here is my code sample, which I would like to use for practicing with jQuery's ajax function. Note that I have already installed the jQuery package using npm install jquery: var $ = require('jquery'); var remoteValue = false; var doSometh ...

javascriptjqueryajaxnode.js

Unable to properly cancel a post request using abort functionality

In the process of building a Next.js app, I encountered an issue with calling a post request. I included a cancel button to halt the post request, and attempted to use abortController in conjunction with Axios (v1.4.0) to achieve this. Even though the &ap ...

javascriptreactjshttpnext.jsaxios

What is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

htmlcss

What are the steps to fix a timeout error with React.js and socket.io acknowledgements?

My setup includes a Node.js server and a React.js client application. Data is exchanged between them using socket.io, but I'm running into an issue with implementing acknowledgment. Whenever I try to implement acknowledgment, I receive a timeout error ...

javascriptnode.jsreactjssocket.io

Having trouble retrieving the tag name, it seems to be giving me some difficulty

I have two separate web pages, one called mouth.html and the other nose.html. I want to retrieve a name from mouth.html and display it on nose.html when a user visits that page. How can I accomplish this using JavaScript? Here is the code snippet from mou ...

javascriptajaxjquery

Javascript eval function providing inaccurate results

I have encountered a problem while using eval() for a calculator I am developing. When I input the following code: console.log(eval("5.2-5")); The output is: 0.20000000000000018 I am confused as to why this is happening. Thank you for your assistance. ...

javascripthtmleval

Connect various inputs in Vue.js so they can be updated simultaneously

I need to have multiple text inputs that are interconnected, so when I change the value of one input, the others should update with the same value. These inputs are being generated dynamically in a loop using v-for as shown below: <tbody> <varia ...

javascripthtmlvue.js

What is the reason behind shadow dom concealing HTML elements when viewed in inspect mode?

https://i.stack.imgur.com/UZM7f.png Monday.com has implemented Shadow Dom to protect its source code. How can I work around this limitation? ...

javascripthtmlcssshadow-dom

Setting up CloudKitJS Server-to-Server Communication

I'm struggling to make this work. I keep encountering the following error message: [Error: No key provided to sign] Below is my configuration code: CloudKit.configure({ services: { fetch: fetch }, containers: [{ containerIdentifier: & ...

javascriptnode.jscloudkitcloudkit-web-services

Issue with req.user being Undefined in Node, Express, Passport, and Mongoose

I've encountered an issue where req.user is defined when logging in, but undefined on other paths. I'm starting to feel stuck and out of ideas at this point. Another thing is that deserialization is never being called. server.js: var LocalStra ...

javascriptnode.jsexpressmongoosepassport.js

Empty body detected in Jquery AJAX request with Django REST running in a Docker environment

Using JavaScript to load a template called index.html from the /static directory. The JavaScript code in app.js: var obj = new Object(); obj.startTime = "123"; obj.endTime = "456"; console.log("fetchNext "+JSON.stringify(obj)); v ...

javascriptpythonajaxdjango

"Mastering the art of event delegation: A guide to effectively engaging with various

I have data that is generated dynamically, as shown in the snippet below: const resultsDiv = document.getElementById("results"); const getList = document.getElementById("example"); document.querySelector(".container").addEventListener("click", function ...

javascript

Guide to incorporating eslint with Next.js in a project that already has an eslint configuration

I recently created a new next.js project within my existing Node.js project, which already has an eslint config set up. Here's how the folder structure looks now: ...

javascriptnode.jstypescriptnext.jseslint

The HTML table fails to refresh after an Ajax request has been made

I am currently utilizing Ajax to delete a row from the Roles table. The functionality allows the user to add and delete roles using a link for each row. While the deletion process works properly and removes the row from the database, the table does not get ...

javascriptjqueryhtmlasp.net-mvc

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

javascriptcsshtml-tableexpandable

Obtain JSON data for an integer type

In the process of deserializing my JSON from the server using touchJson, I encounter the following structure: {"text":"abc", "user_id":12345} Upon deserialization, I utilize the following code to extract the values: NSString *text = [dict objectForKey:@ ...

iphoneiostouchjson