Troubleshooting the challenges with jQuery's next().addClass() and prev().addClass() functions

I am attempting to create a slider feature. I have four different contents that I've positioned consecutively, but made them invisible initially. I defined a class called active-client with the attribute display: flex. Using jQuery's addClass() method, I displayed the first content. My goal is to slide through these contents using arrows, but unfortunately it's not functioning as expected.

$( document ).ready(function() {
    clientSection();
});

function clientSection(){
    $('.client-unit').first().addClass('active-client');

    $('.client-control-next, .client-control-prev').click(function() {
        var $this = $(this),
            curActiveClient = $('.clients-belt').find('.active-client'),
            position = $('.clients-belt').children().index(curActiveClient),
            clientNum = $('.client-unit').length;

        if ($this.hasClass('client-control-next')) {
            if (position < clientNum -1) {
                $('.active-client').removeClass('active-client').next().addClass('active-client');
            } else {
                $('.client-unit').removeClass('active-client').first().addClass('active-client');
            }
        } else {
            if (position === 0) {
                $('.client-unit').removeClass('active-client').last().addClass('active-client');
            } else {
                $('.active-client').removeClass('active-client').prev().addClass('active-client');
            }
        }
    });
}
#clients {
    position: relative;
}

.clients-belt {
    width: 100%;
    position: relative;
}

.clients-belt .client-unit {
    max-width: 750px;
    margin: 0 0 50px -375px;
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 1;
    display: none;
}

.clients-belt .client-unit.active-client {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.clients-belt .client-unit .client-face {
    min-width: 300px;
    text-align: center;
}

.clients-belt .client-unit .client-face img {
    max-width: 100px;
    border-radius: 50%;
}

.clients-belt .client-unit .client-face .client-name {
    display: block;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.clients-belt .client-unit .client-face .client-title {
    font-size: 12px;
    font-style: normal;
    color: #999;
}

.clients-belt .client-unit .client-content {
    font-size: 18px;
    line-height: 36px;
    font-weight: 300;
    margin-top: -10px;
    position: relative;
}

.client-controls {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.client-controls > div {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.client-controls .client-control-next {
    position: absolute;
    top: 50%;
    right: 10px;
}

.client-controls .client-control-prev {
    position: absolute;
    top: 50%;
    left: 10px;
}
<div class="client-controls">
    <div class="client-control-next"><img src="/img/clients/next.svg" alt=""></div>
    <div class="client-control-prev"><img src="/img/clients/prev.svg" alt=""></div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client1.jpg" alt="client-face">
            <strong class="client-name">Denn Summer</strong>
            <em class="client-title">Director of Programmer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client2.jpg" alt="client-face">
            <strong class="client-name">Sott Spring</strong>
            <em class="client-title">Director of Designer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client3.jpg" alt="client-face">
            <strong class="client-name">Bonn Winter</strong>
            <em class="client-title">Nothing of Web</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client4.jpg" alt="client-face">
            <strong class="client-name">Kate Roses</strong>
            <em class="client-title">Director of Nothing</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascriptjqueryhtmlcssslider

Answer №1

I made revisions to the code in this section based on the HTML markup structure.

if ($this.hasClass('client-control-next')) {
                if (position < clientNum -1) {
                    $('.active-client').removeClass('active-client').parent().next().find(".client-unit").addClass('active-client');
                } else {
                    $('.client-unit').removeClass('active-client').first().addClass('active-client');
                }

} else {

                if (position === 0) {
                    $('.client-unit').removeClass('active-client').last().addClass('active-client');
                } else {

                    $('.active-client').removeClass('active-client').parent().prev().find(".client-unit").addClass('active-client');
                }

}

Please view this fiddle link.

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

Use the evernote findNotesMetadata function to efficiently retrieve all notes by implementing an offset and maxnotes parameter for looping through

According to the documentation provided by Evernote regarding findNotesMetadata, the maximum number of notes returned from the server in one response is 250. I am currently exploring how to handle multiple requests in order to retrieve the entire array if ...

javascriptnode.jsevernote

Changing the value of a button using the slideToggle() function

Currently, I am experimenting with this example. Is there a way for me to modify the button text using the slideToggle() function? My goal is to switch the text between Show and Hide. Below is my current code snippet: <button id="boxToggle">Show&l ...

jquery

CSS: The grid-column and grid-row properties are malfunctioning

I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define t ...

htmlcsscss-grid

What is the best way to shift <p> slightly to the left using css?

I've created an HTML file structured like this. <html> <head> </head> <body> <div class="final_time"> <p class="final_time_text">some text here</p> </div> </b ...

htmlcss

Using jQuery, you can utilize the $.when() function with both a single deferred object and an

In my current jquery setup, I am working with two variables. trackFeatures - representing a single ajax request, and artistRequests - an array of ajax requests. I am looking for a way to create a condition that triggers when both trackFeatures and artist ...

javascriptjqueryajaxasynchronousdeferred

Generate a query string by selecting certain input values using a button, while disregarding the rest

Currently working on a project involving a large calculator designed as a form, which contains 150 inputs. My goal is to generate a query string using only 17 of these inputs for the user to share. I am utilizing PHP to populate the inputs from the URL s ...

phpjqueryformsget

What is the reason IE7 does not recognize these two strings as equal?

My event handler is designed to remove an element from a list if the corresponding checkbox is unchecked. When the checkbox is clicked, I first capture the value of the label associated with it: var label = $(this).next().html(); Next, I loop through the ...

javascriptjqueryinternet-explorer-7

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

The offspring of a React component

How can I select a specific div in children using React without passing it as a prop? I want to transform the code snippet from: <Pane label="Tab 1"> <div>This is my tab 1 contents!</div> </Pane> to: <Pane> <div&g ...

javascriptreactjs

Can the data retrieved from a jsonp call that may be considered "bad" be utilized effectively?

When making a JSONP call to another domain, I am receiving data that is in JSON format but not wrapped in a function. This causes a parse error to occur. However, the data is still retrievable and visible. Despite the error, is it possible to utilize the ...

javascriptjqueryajaxjson

Triggering an event upon selecting a dropdown option

I'm currently working on a form that includes a dropdown menu. My goal is to display specific keywords for each trip when selected from the menu (preferably below the input field, as shown in the code snippet below). .show has been set to display:non ...

javascriptformsinputdropdownkeyword

The Nivo Slider is stealthily concealing my CSS Menu

Although this question has been previously asked, I am still unable to make it work with the solutions provided; The website in question is I have tried changing the z-index on all menu items to 99999, but they are still appearing below. <div id="sli ...

jqueryhtmlcssnivo-slider

Using jQuery and Bootstrap in an ASP.NET Core project

I am encountering an issue with the configuration of bootstrap and jquery within my project, causing these tools to fail to load properly. The problem seems to be that bootstrap is loading before jquery, resulting in error messages appearing when I check ...

javascriptjquerycssasp.nettwitter-bootstrap

Retrieving information from a function beyond the scope of Mongoose

I am currently facing an issue with my function in which I need to return the Mongoose query data so that I can use it. However, I am only able to access the sum within the .exec function. How can I manage to retrieve the sum value outside of this functi ...

javascriptnode.jsmongodbmongoose

After a brief pause of x seconds, continue forward without the AJAX response

I have a jQuery Ajax snippet that calls a CHAT functionality. I would like to introduce a 2-second delay before displaying the output when response.available is not equal to 1 in the Ajax response. How can I achieve this using a setTimeout function? See ...

jqueryajax

Refining an array with React's filter method

Currently, I am in the process of creating a To-Do Application using React. However, I have encountered a roadblock along the way. My struggle lies in mapping through items within an array and presenting them in an unordered list. I am attempting to util ...

javascriptarraysreactjs

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style. function printContent() { var divContents = document.getElementById("terms").innerH ...

javascripthtmlcss

I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

My goal was to create this function using Flask, but it seems that only JavaScript is capable of achieving it. This is my first attempt at coding it. Here's the code snippet: const navSlide2 = () => { const burger = document.querySelector(&apos ...

javascripthtmlcss

What is the best way to extract the "Standard" timezone string from a given moment object?

Currently, I am tackling a project in asp.net that involves managing dates and times between a server database and client-side widgets. In order to simplify this process, I have decided to utilize moment.js. While examining my moment object during debuggi ...

javascriptasp.netmomentjsmoment-timezone

Vue - component props not properly updating when object changes are made

Within the main structure, I have both obj and newObj objects. I am monitoring any changes that occur within the obj object using deep: true, and then updating newObj accordingly. Although in my vue debugger, it appears that newObj has been updated as exp ...

javascriptvue.jsvuejs2