Having trouble with a basic image carousel function?

Currently in the process of developing a basic image carousel for a practice website I'm working on. I've been following this tutorial on YouTube. At the 7:10 mark, the tutorial demonstrates the specific function that I need help with.

The tutorial introduces a jQuery function to activate the carousel.

$(document).ready(function(){

    $(".nextLink").on("click", function(){
        var currentActiveImage = $(".image-shown");
        var nextActiveImage = currentActiveImage.next();

        currentActiveImage.removeClass(".image-shown").addClass(".image-hidden");
        nextActiveImage.addClass(".image-shown").removeClass("image-hidden");
    });

});

Below is the HTML structure

<div class="carousel-outer">
            <figure class="carousel-inner">
                <img class="image-shown" src="images/team/alex_morrales.jpg" alt="">
                <img class="image-hidden" src="images/team/david_kim.jpg" alt="">
                <img class="image-hidden" src="images/team/jenny_tabers.jpg" alt="">
                <img class="image-hidden" src="images/team/joey_barrett.jpg" alt="">
                <img class="image-hidden" src="images/team/melinda_lee.jpg" alt="">
                <img class="image-hidden" src="images/team/rachel_dotson.jpg" alt="">
            </figure>
            <div class="img-buttons-box">
                <div class="img-buttons">
                    <a class="previousLink" href="#">Previous</a>
                    <a class="nextLink" href="#">Next</a>
                </div>
            </div>
        </div>

And here's the accompanying CSS style

.image-shown {
    display: inline-block;
}

.image-hidden {
    display: none;
}

I initially believed that with the above function alone, the carousel would operate smoothly and cycle through the images seamlessly.

The concept being to always show the next photo while hiding the rest.

However, it seems this isn't the case as shown by the before and after screenshots below (the "next" button doesn't work upon subsequent clicks).

Before

https://i.sstatic.net/AdP0x.png

After

https://i.sstatic.net/3V37C.png

If anyone can shed light on why the existing function falls short in making the carousel functional, any insights would be greatly appreciated. Thank you.

javascriptjqueryhtmlcsscarousel

Answer №1

When utilizing the methods .removeClass() or .addClass(), you do not need to include the dot before the class name.

$(document).ready(function(){

    $(".nextLink").on("click", function(){
        var currentActiveImage = $(".image-shown");
        var nextActiveImage = currentActiveImage.next();

        currentActiveImage.removeClass("image-shown").addClass("image-hidden");
        nextActiveImage.addClass("image-shown").removeClass("image-hidden");
    });

});

PS: I discovered this while inspecting the elements using devtools; after clicking on "Next", I observed how an img received classes with the dot. This is a useful tip for debugging DOM changes efficiently.

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

Unusual Blank Space Found Beneath a Displayed Block Item

I've noticed some odd whitespace appearing under all my display: block elements within a meganavigation. Despite adding the code snippet below (which also determines column widths), I can't seem to pinpoint what's causing this issue. Wheneve ...

htmlcss

The value set with jQuery selector is not being submitted

Having a problem with a form created using django. The form consists of two charfields for name and address, along with two datetimefields for start_date and stop_date. Additionally, there are two radio buttons configured as follows: When the first radio ...

pythonjquerydjangodjango-viewsdjango-templates

Covering the page with a mask when the menu is activated

I'm currently facing an issue with my script. I am trying to implement a mask/filter over the website when the menu is opened. Within the HTML, there is a class named cmask and another called cmask is-active. This functionality should only take effect ...

javascripthtmlcss

What is the best way to search for documents that have all conditions met within a sub-array entry?

My rolesandresponsibilities collection document is displayed below: [{ "_id": { "$oid": "58b6c380734d1d48176c9e69" }, "role": "Admin", "resource": [ { "id": "blog", "permissions": [ " ...

javascriptnode.jsmongodbexpress

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this: <style lang="scss"> ... </style> <style lang="stylus"> ... </style> I checked the documentation for the style tag and found that lang is not a valid a ...

javascriptcssvue.jssassstylus

How can I link an HTML file to a different port?

Here is an example of a simple tag that creates a link to a page without the need for the full URL: <a href="foo.html">link</a> If you were to click this link from example.com/, you would be directed to example.com/foo.html. Is there a method ...

html

Is there a way to deserialize UTF8 encoded Byte[] in JavaScript within the browser or a Node.js application?

In my C# code, I have defined an event class like this: public class AreaInterventoCreata{ //public properties } var message= new AreaInterventoCreata(); After creating an instance of this class on the server side, I need to inform the subscribed cli ...

c#javascriptnode.jssocket.iorabbitmq

Linkify Method appearing in html.erb file displaying with HTML on the view

Apologies if this question seems basic, but I am encountering an issue when calling the following method on the @page instance variable. The view is displaying HTML tags instead of the desired content... module PagesHelper def linkify_page page rege ...

htmlruby-on-railserblinkify

What is the simplest method for comparing transaction amounts?

I'm in the process of integrating PayPal into my website using their REST API. My goal is to allow users to input the amount they want to deposit. While I can obtain the total during payment creation, I'm unsure how to smoothly pass it to the exe ...

javascriptnode.jsexpresspaypal

Issue with PHP form submission not functioning within a table when utilizing jQuery

I've created a function that retrieves user data. function returnChild(){ global $pdo; $stmt = $pdo->prepare("SELECT * FROM children INNER JOIN districts ON children.ch_district = districts.dst_id ...

javascriptphpjqueryjsonajax

Launch a new tab on the current webpage using jQuery

Apologies for my English... https://i.sstatic.net/XqwqK.png I'm looking to have a small window pop up on the site when someone clicks the zoom icon, displaying product information. The code snippet: <div class="container-fluid"> <div ...

jquerybootstrap-4

Create a prototype class in NuxtJS Vue

What is the correct way to set a class to prototype in Vue NuxtJS? I have created a plugin Here is my nuxt.config.js file: plugins: [ { src: "~/plugins/global.js" }, ], The global.js file contains: import Vue from "vue"; import CustomStore from "dev ...

javascriptvue.jsnuxtjs

What is the method to position a flex column below another?

When viewed on a cell phone, I need the columns to be stacked on top of each other. I'm using Bootstrap 4 with flex divs, utilizing flex columns and rows. I've tried using the order property but it didn't work. Here is my code: <div id= ...

cssflexboxbootstrap-4

Tips for locating and clicking a specific table element using Selenium

Is there a way to dynamically click the link associated with the label in this specific td? I am able to locate the link using the onclick method, however, the label name changes periodically from HemoGlobin A1C to HGB A1c, etc. and there is no unique ID ...

pythonhtmlseleniumselenium-webdriver

JavaScript - Declaring canvas as a global object

Presently, I am experimenting with HTML5 and using JavaScript to create a basic 2D Tile map. Progress is going smoothly; however, I have come across an issue where I am unable to contain everything within one large function. I am attempting to make the ca ...

javascripthtml

Utilize Vuex mutators within route navigation guards

Hey there, I'm currently working on an app using Laravel and VueJS. To restrict certain routes, I've implemented navigation guards. However, I'm facing an issue where I need to access Vuex mutators to determine if the current user is logged ...

javascriptvue.jsvue-routervuex

Managing an iframes website using buttons and links: Tips and tricks

I am trying to create a website that includes an iframe for navigating through external websites using previous and next buttons. I also want to display the links on a sidebar so that users can click on them to automatically load the site in the iframe. I ...

javascriptphpjqueryhtmliframe

Ways to retrieve content from a div by its class name and then add it to another div with a different class name

I am currently working on customizing the layout of data retrieved from a plugin on my WordPress page. Specifically, I want to rearrange elements within a div with the class name IDX-columnThree (containing price & address data) and move them to another di ...

javascriptjqueryhtmlcss

Hide the HTML DIV without altering the position of the current div

My goal is to conceal elements 1, 3 and 2 & 4 without changing their position. div{ width: 10%; float: left; } <div style="background-color: blue"><p>1</p></div> <div style="background-color: yellow"><p>2</ ...

javascripthtmljquerycssbootstrap-5

Generating a unique serial ID using Angular/JS

I am in the process of developing a function that will create a unique serial id by replacing a string with the format; xxxx-xxxx-xxxx-xxxx. The desired outcome is a serial like this: ABCD-1234-EFGH-5678, where the first and third parts consist of letters ...

javascriptangulartypescriptrandomuuid