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

I have successfully created an image carousel.

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

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

javascriptjqueryhtmlcss

The PurgeCSS CLI does not generate CSS files beyond the command line interface

I'm struggling to successfully extract my CSS using purgecss from the command line and save it to a separate file. The instructions on PurgeCSS.com are vague: By default, the CLI only outputs the result in the console. To save the purified CSS files ...

cssnpmcommand-linecss-purge

What is the best way to determine if a child component's property has changed within a method?

The child component is app-google-maps-panel and has 2 properties in the parent component: <div class="col-6"> <app-google-maps-panel [longitude]="longitude" [latitude]="latitude"></app-google-maps-panel> & ...

htmlangulartypescript

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss

Unable to get jquery toggle() to function in chrome or safari

Having trouble with the toggle() function in Chrome and Safari. I've tried using noconflict() but it hasn't worked. In Chrome and Safari, the first recipe translation appears below the German one. The other 2 recipes are working as expected. How ...

jquerytoggle

css displaying drop-down menu when hovered over

I've been trying to create a link that, when hovered over, displays a list of options. I've managed to make it work in Firefox and Google Chrome, but it doesn't display at all in Internet Explorer when hovering over the link. I'm also ...

htmlcss

The CSS background fails to expand to the entire height of the element

I'm encountering an issue where an element with 100% height is extending beyond its boundaries when there are multiple blocks. For a demonstration, you can refer to this jsfiddle example: http://jsfiddle.net/yPqKa/ Any suggestions on how to resolve ...

htmlcss

Looking to trigger a PHP page by clicking on a div?

Is there a way to trigger a PHP page call when a user clicks on a <DIV> with AJAX? Additionally, can the text of the DIV be changed to display "LOADING....." simultaneously? I lack knowledge about AJAX. Could you please provide me with more details ...

phpjavascriptajaxhtml

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

phphtmlcsspdfmpdf

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect. <template> <Transition v-if="is ...

cssvue.jsvuejs3vuetify.js

Utilizing jQuery functions within Vue components in Quasar Framework

I've recently started delving into web app development and I'm encountering some basic questions regarding jQuery and Vue that I can't seem to find answers to. I have an application built using the Quasar Framework which frequently involves ...

javascriptjqueryvue.jsdollar-signquasar-framework

Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div: div { width: 100px; height: 100px; border-radius: 16px; background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w ...

csssvgcss-variables

The click function for the parent div will not be executed if I click on the child div

Hey, I encountered an issue in my code that I need help with. $(document).ready(function() { $(document).on('click', '.rohit', function() { alert('rohit'); }) $(document).on('click', '.azad', ...

javascriptjqueryangularjs

The jQuery method .on gathers and retains click events

I created a component that manages a view containing articles with games. In order to prevent memory overload and optimize performance, I implemented a solution where when a user clicks on an article (each having the class "flashgame"), they can choose to ...

javascriptjqueryangular

Understanding how to utilize variables from Angular within jQuery

I have a variable called room_price and I am looking to utilize it in jQuery. Is there a way to achieve this? $http({ method:'GET', url: '' }).then(function(response){ var roomdata = respons ...

jqueryangularjs

Watch for event triggered after completion of input field with ng-modal

One of my challenges involves implementing a text input field that prompts users to enter their name: <input type="text" ng-modal="form.name" placeholder="Enter NAME"> I've also set up a watch function to monitor changes in the form's nam ...

javascriptjqueryhtmlangularjswatch

jQuery Waypoints Error: The sticky functionality is missing and cannot be utilized in this context

Trying to anchor an element at the top of a WordPress page using the jQuery Waypoints plugin. <script src="path/to/waypoints.min.js"></script> <script> $('#myelement').waypoint('sticky'); </script> However, t ...

javascriptjquerywordpressjquery-waypoints

Interactive jQuery Dropdown Menu with Multiple Divs

I have been working on this and I'm almost there, but the jQuery part is driving me crazy (I'm not very proficient in it yet, but I am learning). Here's the link to the fiddle: http://jsfiddle.net/5CRA5/4/ Since I can't demonstrate th ...

jquerycss

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...

androidcssfont-faceandroid-browsercustom-font

Most effective strategy for optimizing web font loading considering caching and load speeds

When it comes to embedding fonts in your web app, there are a few different methods you can use. Method A) One way is to utilize the Google Fonts CDN by inserting this code into your HTML: <link href="https://fonts.googleapis.com/css2?family=Roboto:wg ...

htmlcssfont-face