What strategies can be implemented to enhance the performance of this jQuery slider?

I have successfully created an image carousel.

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

Encountered Challenges:

  1. The last slide is displayed, but the counter shows the first slide. How can I resolve this issue?

  2. When clicking play, it continues to advance the count. Is there a way to make it stop at the last slide?

  3. Upon clicking "last", the "next" and "last" buttons are greyed out. Similarly, clicking "first" greys-out the "prev" and "first" buttons. CSS was used for this styling. How can I automate this behavior using jQuery?

Attempts Made:

  1. I attempted adding the class .active to the last image and hiding the others with css. However, the counter still displays 1/6 instead of 6/6.

  2. I tried implementing a function that checks if the current slide is the last one. Unfortunately, it did not work as expected:

function lastSlide() {
        if ($('.image').last().hasClass('active')){
            clearTimeout(slideTimer);
        } else { 
            slideImage(0);
        };
    };

var totalImages = $('.images').length; 
        sliderCompleted: function(current) {
        if (slideImage >= totalImages) {

        clearTimeout(slideTimer);

    };
  1. I believe I need to use $('.images:last'), but am struggling with how to incorporate this.

I am hopeful someone can guide me in the correct direction...

The HTML CSS & jQuery:

htmljquerycss

Answer №1

To initialize the desired behavior, make sure to include slideImage(1); at the end of your JavaScript code.

$(document).ready(function() {

// Slider

var slideTimer;

var slideImage = function(step) {

    if (step == undefined) step = 1;

    clearTimeout(slideTimer);

    var imageIndex = $('.image:visible').index('.image');
    
    if (step != 0) {
        $('.image').stop();
        $('.image:visible').hide();
    }
    imageIndex = imageIndex + step;
    if (imageIndex >= $('.image').length) {
        imageIndex = 0;
    } else if (imageIndex < 0) {
        imageIndex = $('.image').length - 1;
    }
    if (step != 0) {
        $('.image:eq(' + imageIndex + ')').stop().show();
    }
    if ($('.slider').length > 0) {
        slideTimer = setTimeout(slideImage, 2000);
    }
    now = imageIndex;
    updateCounter();
};

$('.nav-stop').click(function() {
    clearTimeout(slideTimer);
    $(this).hide();
    $('.nav-play').show();
    $('.nav-first').removeClass('nav-off');
    $('.nav-prev').removeClass('nav-off');
    $('.nav-next').removeClass('nav-off');
    $('.nav-last').removeClass('nav-off');
});

$('.nav-play').click(function() {
    slideImage(0);
    $(this).hide();
    $('.nav-stop').show();
    $('div.nav-wrap span').removeClass('nav-off');
});

$('.nav-prev').click(function() {
    slideImage(-1);
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
    $('div.nav-wrap span').removeClass('nav-off');
});

$('.nav-next').click(function() {
    slideImage(1);
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
    $('div.nav-wrap span').removeClass('nav-off');
});

$('.nav-first').click(function() {
   slideImage($('.image:first').index('.image') - $('.image:visible').index('.image'));
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
    $('div.nav-wrap span').removeClass('nav-off');
    $('.nav-first').addClass('nav-off');
    $('.nav-prev').addClass('nav-off');
});


$('.nav-last').click(function() {
  slideImage($('.image:last').index('.image') - $('.image:visible').index('.image'));
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
    $('div.nav-wrap span').removeClass('nav-off');
    $('.nav-next').addClass('nav-off');
    $('.nav-last').addClass('nav-off');
});



// Counter

var now = 0;

function updateCounter() {
    var slidesTotal = $('.image').length;
    $('.counter').text(now + 1 + '/' + slidesTotal);
}
updateCounter();
slideImage(1);

});
div.slider {
    position: relative;
    float: left;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
}

div.slider figure {
    position: relative;
    display: none;
    width: 300px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0 0 10px 0;
    box-sizing: border-box;
}

div.slider figure.active {
    display: block;
}

div.slider figure img {
    position: relative;
    width: 100%;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0 0 10px 0;
    box-sizing: border-box;
}

div.slider figcaption {
    position: relative;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
}

div.slider div.nav-wrap {
    position: relative;
    display: inline-block;
    width: 300px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
}

div.slider div.nav-wrap span {
    position: relative;
    float: left;
    width: 20%;
    height: 40px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

div.slider div.nav-wrap span:hover:not(.counter) {
    cursor: pointer;
    border: 1px solid silver;
    color: silver;
    background-color: whitesmoke;
}

div.slider div.nav-wrap span.counter {
    width: 100%;
    margin: 10px 0 0 0;
}

div.slider div.nav-wrap span.nav-stop {
    display: none;
}

div.slider div.nav-wrap span.nav-off {
    cursor: default;
    border: 1px solid silver;
    color: silver;
    background-color: whitesmoke;
    pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="slider">
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_A.svg">
            <figcaption>Test A</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_B.svg">
            <figcaption>Test B</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_C.svg">
            <figcaption>Test C</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_D.svg">
            <figcaption>Test D</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_E.svg">
            <figcaption>Test E</figcaption>
        </figure>
        <figure class="image active">
            <img src="http://www.bookmov.es/book/test_F.svg">
            <figcaption>Test F</figcaption>
        </figure>
        <div class="nav-wrap">
            <span class="nav-stop">stop</span>
            <span class="nav-play">play</span>
            <span class="nav-first">first</span>
            <span class="nav-prev">prev</span>
            <span class="nav-next">next</span>
            <span class="nav-last">last</span>
            <span class="counter"></span>
        </div>
    </div>

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

Transforming JQuery Output into an HTML Table Layout

Hello there! I am currently working on parsing an XML file within my web page using jQuery. Here is a snippet of the code: function loadCards(lang) { $.ajax({ type: "GET", url: 'data.xml', dataType: "xml", suc ...

javascriptjqueryhtmlxml

Using session variables in HTML allows developers to store and retrieve

My index.html file includes a login form that submits to login.php. Once the user is verified, they are redirected back to index.html and the verified username is stored in a session variable called username. I am looking for a way to display this username ...

phpjqueryhtmlajaxsession-variables

Creating an interactive draggable box with jQuery-UI is as easy as pie

Is it possible to make the innerDropzone div draggable in the following code snippet? div.example { width: 560px; height: 750px; display: block; padding: 10px 20px; color: black; background: rgba(255, 255, 255, 0.4); -webkit-border ...

jqueryhtmlcssjquery-ui

Solving SEO issues with jQuery load()

I have developed a modal window that includes links, but unfortunately, search engine crawlers are unable to read and index those links. I am looking for a solution to make sure the crawler can index those links. I have noticed websites using AngularJS li ...

javascriptjqueryangularjs

JavaScript Scrolling Functionality Not Functioning as Expected

I have implemented a scroll function on my website $('#lisr').scroll( function() { if($(this).scrollTop() + $(this).innerHeight()>= $(this)[0].scrollHeight) { //Perform some action here } } However, I am encountering an ...

javascriptjqueryhtmlajaxdom

Unable to access Bootstrap nav link

There seems to be an issue with a link inside the Bootstrap nav-menu. The link is not opening when clicked on. https://i.sstatic.net/lrXmD.jpg I am facing trouble with the Cart file as it does not open when I click on the Cart hyperlink. I have double-ch ...

htmlcsstwitter-bootstrap

Issue with converting form data to JSON format

Having an issue converting a filled form in HTML to a JSON request for sending to the server via HTTP POST. Despite having a filled form, the JSON request only shows an empty array. Here is the JavaScript snippet: $("#submitSurveyBtn").on("click", functi ...

javascripthtmlajaxforms

Is it possible to display a combination of images and text data using JQUERY/AJAX, when the data is sent as objects or arrays?

I'm struggling to figure out how to handle an object or array sent from a server that contains binary picture and text data using JQUERY/AJAX Here is the server-side setup: const url= require('url'), express = require('express&ap ...

javascriptjqueryajaxexpress

Current page with animated CSS3 menus

I found a cool menu example on this webpage: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html. I want to modify it so that the current page's menu item has a different color from the others. For example, when I'm on the home ...

jqueryhtmlcss

Problem with one image not displaying in jQuery slider on Internet Explorer

I have a jquery template that includes 3 slides, and I recently replaced one of the image templates with an image of the same size. This change works perfectly on Chrome but not on Internet Explorer. Below is the code snippet: <script src="https://ajax ...

jqueryinternet-explorer

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

javascripthtml

suggestions for organizing data in an AJAX/jQuery page

Welcome to my JavaScript/Ajax webpage that also utilizes jQuery. I am facing a challenge with displaying a nested structure. Once a top level element is displayed, users should be able to click on it and reveal the levels below (which are dynamically gene ...

javascriptjqueryajaxarrays

JavaScript has encountered a syntax error

When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...

javascriptcssanimationzoomingpan

What are some ways to utilize the <span> tag to apply distinct styles to specific characters within text compared to

Imagine I have a string like <p>hi my name is john</p>. I know that I can use the span element to target specific characters and apply different styles using CSS. But what if I want to style "name" and "john" differently from each other and the ...

cssxhtml

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

I'm facing a situation where I need to apply ng-style (or ng-class) multiple times depending on a variable. However, this repetitive task of writing ng-class for the same functionality for each widget is quite cumbersome for me. Is there a way to si ...

javascriptcssangularjsangularjs-directive

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

<html ng-app="myApp1"> <head> <title>NG-Include</title> <script src="angular.js"></script> <script src="filter.js"></script> </head> <body> <div ng-controller="myController"> ...

htmlangularjsgoogle-chrome

Utilize flexbox to make two elements on the same line

Is it feasible to have two elements on the same line when aligning a series of elements with flexbox? Consider this scenario: .outer { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; width: 50px; } .outer .inner ...

cssflexbox

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

htmlcsstwitter-bootstrapbootstrap-4

CSS: Element with overflowing content fails to display even with the overflow set to visible

I'm trying to enhance a fixed toolbar by adding a dropdown menu, but the .toolbar-dropdown-menu component isn't displaying correctly, as shown in this screenshot (tested on Google Chrome 80.0): https://i.stack.imgur.com/r5Cz0.png Initially, it ...

htmlcssoverflow

On iPhones, the links display as oversized blank containers

Recently, a client who switched from an Android phone to an iPhone reached out to me with a complaint. She mentioned that the links on her website, which I built for her, appear as large empty boxes. You can view her website here. To illustrate the issue ...

htmlcssios