Assistance needed to make a jQuery carousel automatically rotate infinitely. Having trouble making the carousel loop continuously instead of rewinding

Currently, I am in the process of creating an auto-rotating image carousel using jQuery. My goal is to make the images rotate infinitely instead of rewinding back to the first image once the last one is reached. As a beginner in the world of jQuery, I'm facing some challenges in achieving this desired outcome. Despite trying to modify existing code from online tutorials, I have not been successful. I suspect that I may need to clone the images after they cycle through, but I am unsure about the best approach to take. Any help or guidance on this matter would be greatly appreciated. Below is the code snippet that I have been working with:

HTML:

<div class="main_view">
    <div style="width:165px; height:98px; margin:0; padding:0; border:0;">
        <img src="/content/template_images/wanalogo-blackBG-165x98.png" />
    </div>
    <div class="window">
        <ul class="image_reel">
        <li><a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies"><img src="/content/template_images/Banners/SideBanner/imgscroll1.jpg" alt="Phillies" /></a></li>
        <li><a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><img src="/content/template_images/Banners/SideBanner/imgscroll2.jpg" alt="Eagles" /></a></li>
        <li><a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><img src="/content/template_images/Banners/SideBanner/imgscroll3.jpg" alt="Flyers" /></a></li>
        <li><a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><img src="/content/template_images/Banners/SideBanner/imgscroll4.jpg" alt="76ers" /></a></li>
        <li><a href="/NCAA-Basketball" title="NCAA Basketball"><img src="/content/template_images/Banners/SideBanner/imgscroll8.jpg" alt="NCAA Basketball" /></a></li>
        <li><a href="/Concerts-Tickets" title="Concerts"><img src="/content/template_images/Banners/SideBanner/imgscroll5.jpg" alt="Concerts" /></a></li>
        <li><a href="/Theatre-Tickets" title="Theatre"><img src="/content/template_images/Banners/SideBanner/imgscroll6.jpg" alt="Theatre" /></a></li>
        <li><a href="/Other-Events-Tickets" title="Family Events"><img src="/content/template_images/Banners/SideBanner/imgscroll7.jpg" alt="Family Events" /></a></li>
        </ul>
    </div>
    <div style="width:170px; height:290px; border:0; padding:0; margin: -290px 0px 0px 0px;">
        <img src="/content/template_images/black-fade-border-170x290.png" />
    </div>
    <div class="botTextBox">
        <center>
        <div class="botText">
        <a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies">Phillies</p></a>
        <a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><p>Eagles</p></a>
        <a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><p>Flyers</p></a>
        <a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><p>76ers</p></a>
        <a href="/NCAA-Basketball" title="NCAA Basketball"><p>NCAA Basketball</p></a>
        <a href="/Concerts-Tickets" title="Concerts"><p>Concert</p></a>
        <a href="/Theatre-Tickets" title="Theatre"><p>Theatre</p></a>
        <a href="/Other-Events-Tickets" title="Family Events"><p>Family Event</p></a>
        </div>
        </center>
    </div>
        <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
        <a href="#" rel="5">5</a>
        <a href="#" rel="6">6</a>
        <a href="#" rel="7">7</a>
        <a href="#" rel="8">8</a>
        </div>
</div>

Javascript

$(document).ready(function() {
    $(".paging").show();
    $(".paging a:first").addClass("active");

    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){
    var triggerID = $active.attr("rel") - 1; 
    var image_reelPosition = triggerID * imageWidth; 

    $(".paging a").removeClass('active'); 
    $active.addClass('active'); 

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 750 );
    $(".botText").animate({
    left: -image_reelPosition
    }, 750 );
    }; 

    //Rotation  and Timing Event
    rotateSwitch = function(){
    play = setInterval(function(){ 
    $active = $('.paging a.active').next(); 
    if ( $active.length === 0) { 
    $active = $('.paging a:first'); 
    }
    rotate(); 
    }, 1500); 
    };

    rotateSwitch(); 

    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); 
    }, function() {
        rotateSwitch(); 
    }); 

    //On Click
    $(".paging a").click(function() {
        $active = $(this); 
        clearInterval(play); 
        rotate(); 
        rotateSwitch(); 
        return false; 
    });
});

Edit- CSS:

.main_view {
    float: left;
    overflow:hidden;
    position: relative;
    width:170px; 
    height:475px; 
    background-color:black; 
    border:0; 
    margin:2px; 
    padding:2px 0px 2px 0px; 
    text-align:center;
}
.window {
    height:290px;   width:170px;
    overflow: hidden;
    position: relative;
    background-color:black; 
    border:0; 
    padding:0px; 
    margin:0px;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
    margin-left:-40px;
}
.image_reel img {float: left;}

.botTextBox {
    height:87px; width:1360px;
    overflow:hidden;
    position:relative;
    background:url(/content/template_images/black-side-bottom-170x87.png) no-repeat; 
    margin:0px; 
    padding:0px;
}
.botText {
    position:relative;
    top:0; left:0;
    margin:32px 0px 0px 0px; 
    padding:0; 
    text-align:center;
}
.botText p {width:170px; float: left;}

.paging {
    position: absolute;
    bottom: 40px; right: -7000px;
    width: 178px; height:47px;
    z-index: 100; 
    text-align: center;
    line-height: 40px;
    display: none; 
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

I am currently looking to replace the flash banner on the right with a jQuery-based solution. Any assistance provided will be highly valued as I continue to navigate my journey in learning jQuery. Thank you for your support.

javascriptjqueryhtmlcss

Answer №1

Your carousel currently has a flaw where the block of images acts as one large unit. This means that when you reach the last image, you have to slide all the way back to the first one for it to loop, resulting in that unwanted "rewind" effect.

To fix this issue, I suggest the following steps:

  1. Load each image into an array
  2. Remove all images except the first one from the gallery
  3. Add the next image from the array using looping logic like number % length
  4. Animate the slider to display the next image
  5. Reset the CSS and remove the now invisible first image
  6. Repeat these steps.

Below is an example implementation featuring a recursive function.

I have created a slider function utilizing jQuery's .animate() method. Within the callback of .animate(), I call the slider function again with a brief delay introduced by setTimeout().

The code snippet below provides a basic demonstration which can be easily customized to show previous and upcoming image snippets among other tweaks. It serves as a straightforward showcase of how to achieve an infinite slide effect with a limited set of images.

I've included a simple method to display a changing caption beneath the image gallery. The text for the caption is extracted from the HTML codes of the images. Alternatively, this caption could be positioned beneath each image and moved along with the respective image.

Click here for the jsFiddle example

$(function() {          
    var showing = 0;    // current displayed image index
    var imgs = [];      // array to store image HTML elements
    imgs = $("#gallery img").toArray();    // Populating the array with image elements
    var numberOf = imgs.length;
    // Removing all images except the first one from the DOM
    $("#slider").html("");
    $("#slider").html(imgs[0]);
    // Adding a title text div
    $("#gallery").after('<a id="title"/>');
    // The recursive slider function
    var nextImage = function() {
        // Adding the next image (utilizing modulo operation for looping)
        $("#slider").append(imgs[++showing % numberOf]);
        // Displaying image title
        $("#title").html($(imgs[showing % numberOf]).attr("title"));
        // Linking it back to the original image
        $("#title").attr("href", $(imgs[showing % numberOf]).attr("src"));
        // Animating the slider
        $("#slider").animate({
            left: '-=200'
        }, 2000, function() {
            // Removing off-screen image
            $("#slider img:first").remove();
            // Resetting CSS
            $("#slider").css("left", "0px");
            // Calling the animation function recursively
            setTimeout(function() {nextImage(); }, 1000);
        });  
    }        
    nextImage();  // Initiating the next image transition         
});

A static HTML layout would include:

<div id="gallery">
    <div id="slider">
        ... individual image content ...
    </div>
</div>

PS: To observe the conveyor belt effect in action, take a look at this example.


List of jQuery and JavaScript methods and properties utilized:

Answer №2

John Smith provided a great explanation of one approach, but I have an alternative method that involves just a few extra lines of code to your existing script.

Essentially, this technique duplicates the initial image, text, and pager link and appends them to the end. When the animation reaches the final image (now the duplicated first image), the window's left position resets to zero, restarting the animation. I've inserted [NEW] comments to indicate where the changes were made. Additionally, I've created a demonstration to visually demonstrate the process.

$(document).ready(function() {
 $(".paging").show();
 $(".paging a:first").addClass("active");

 var imageWidth = $(".window").width();
 // [NEW] increase by one due to duplicate first image
 var imageSum = $(".image_reel img").size() + 1; 
 var imageReelWidth = imageWidth * imageSum;

 // [NEW] adjust width of botTextBox as well
 $(".image_reel, .botTextBox").css({'width' : imageReelWidth });

 // [NEW] clone first image & text and append to end, along with dummy paging
 $(".image_reel li:first").clone().appendTo( $(".image_reel") );
 $(".botText a:first").clone().appendTo( $(".botText") );
 $(".paging").append('<a href="#" rel="' + imageSum + '"></a>'); // exclude number in link

 rotate = function(){
  var triggerID = $active.attr("rel") - 1;  
  var image_reelPosition = triggerID * imageWidth;

  $(".paging a").removeClass('active');
  $active.addClass('active');

  // [NEW] perform slider animation
  $(".image_reel, .botText").animate({
   left: -image_reelPosition
  }, 750, function(){
   // [NEW] execute callback when animation finishes
   if (triggerID == imageSum - 1) {
    // reset window position to beginning when back to first image
    $(".image_reel, .botText").css('left',0);
   }
  });
 };

 rotateSwitch = function(){
  play = setInterval(function(){
   $active = $('.paging a.active').next(); 
   if ( $active.length === 0) {       
    // [NEW] go back to second image (first is now last)        
    $active = $('.paging a:eq(1)');
   }
   rotate(); 
  }, 1500); 
 };

 rotateSwitch(); 

 //On Hover
 $(".image_reel a").hover(function(){
  clearInterval(play); 
 }, function(){
  rotateSwitch(); 
 }); 

 //On Click
 $(".paging a").click(function() {
  $active = $(this); 
  clearInterval(play); 
  rotate(); 
  rotateSwitch(); 
  return false; 
 });

});

Lastly, don't forget to include the missing <p> tag before the Phillies botText.

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

Improving code quality and consistency in Javascript: Tips for writing better code

Hey, I've been experimenting with some code using ajax and have ended up with a lot of repetitive lines. Is there a way to streamline the code without losing functionality? I keep using the .done method multiple times when I could probably just use it ...

javascripthtmljquerycss

Is there a way to utilize a cookie in order for the website to recognize that I have already agreed to the terms?

It's common for websites to ask for cookie and privacy acceptance upon loading, especially in the EU. I'm looking for a way to automatically accept these cookies so I don't have to constantly click "accept all" every time I open Chrome. My ...

javascriptpuppeteer

What is the standard root directory in the "require" function's context?

After spending hours struggling to set up a simple "require" command, I've come to the conclusion that var example = require("example") only works if there's an example.js file in the node_modules directory of the project. I'm encountering ...

javascriptnode.jsexpressrequire

Prevent the event from bubbling up on active elements

Having trouble with stopping event propagation? Picture this situation: <table id="test"> <tbody> <tr> <td class="row"> </td> <td class="row"> </td> <td class="ro ...

javascriptjquery

Ngrx/effects will be triggered once all actions have been completed

I've implemented an effect that performs actions by iterating through an array: @Effect() changeId$ = this.actions$.pipe( ofType(ActionTypes.ChangeId), withLatestFrom(this.store.select(fromReducers.getAliasesNames)), switchMap(([action, aliases ...

javascriptangularngrxngrx-effects

Navigating through the DOM hierarchy and deleting a class

Having multiple forms on a single page, each with its own validation error message box and close button, has presented a challenge. While I can successfully close the message box using the close button, removing the "error" class from the specific text inp ...

jquerydomdom-traversal

Is it considered acceptable to utilize a v-model's value as the basis for an if-statement?

How can I incorporate the v-model="item.checked" as a condition within the validations() function below? <table> <tr v-for="(item, i) of $v.timesheet.items.$each.$iter" > <div> <td> ...

javascriptjqueryvue.jsif-statementv-model

How can I restrict the number of input data to 10 on a single page in a TodoList application?

As a newcomer to web development, I recently built a todoList app. It's functioning flawlessly and allows me to add multiple lists to my webpage with ease. The technologies used are React js and Bootstrap. However, I now wish to implement a limitati ...

javascriptreactjspaginationfrontend

Tips for implementing filters on `<span>` elements

When I transition from Spring to UI, I encounter the following code: <span th:text="${fromController.number}"/> The "number" mentioned here is a double retrieved from the database. I am looking to filter values into three categories: 0 to 30, 30 to ...

jquery

You cannot make a hook call within the body of a function component, unless you are using useNavigate and useEffect in conjunction with axios interceptors

Currently, I am delving into React and attempting to include a Bearer token for private API calls. My approach involves writing a private axios function to intercept requests and responses. Subsequently, I invoke it in my API.js file to fetch data from the ...

javascriptreactjsreact-hooksaxios

How to select the li element in a nested menu using jQuery

My goal is to extract the text from a specific li element when it is clicked on. The code snippet provided below outlines the structure: <div> <ul> <li>list item 1</li> <li>list item 2</li> <li> ...

javascriptjquery

Implementing JavaScript functionality upon page load with ASP.NET

I have come across a situation where I am trying to integrate working code (jQuery/Javascript) that makes an API call and sends data to it. The API service then responds with a success or failure message based on the data insertion into the API db. Everyth ...

javascriptjqueryhtmlasp.net

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...

htmlcssangularjs

Incorrect implementation of Bootstrap CSS in Jade template

Currently, I am leveraging Express to construct a website. However, there seems to be an issue with my jade template not displaying the bootstrap grid system accurately. Despite double-checking that my app path is correctly set through app.use(express.stat ...

javascriptcssnode.jstwitter-bootstrapexpress

Lamenting the Perils of Losing AngularJS Rootscope Data upon Refresh

Currently, I am facing an issue in AngularJS 1.x. When I save a value in the $rootScope and pass to the next page or router, unfortunately, the $rootScope value gets lost upon refreshing the page (F5/Window Reload). I need a solution that doesn't inv ...

javascriptangularjs

What is the best way to update the innerHTML of a date input to reflect the current value entered by the user?

Currently, my task involves extracting data from a table by obtaining the innerHTML of each row. The table contains date inputs that can be manually adjusted or generated automatically. However, the innerHTML does not update accordingly. Thus, when exporti ...

javascripthtmljquery

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file

Currently, I am utilizing a library named sinuous, which contains a submodule known as "sinuous/map". Interestingly, VSCode seems to lack knowledge about the type of 'map' when using import { map } from "sinuous/map", but it recognizes the type ...

javascripttypescriptvisual-studio-codevite

What is the method to deactivate child elements within an element that possesses the disabled attribute in Polymer?

What are some effective methods for disabling children elements when at least one parent element is disabled? I have a form with nested groups and fields that can be disabled based on certain conditions. Different parent elements may be disabled independe ...

htmlpolymerdisabled-inputrecursive-datastructures

Issue with Vue parent component's inability to listen to event emitted by child component

Child component is triggering a custom event: <template> <div id="controls-container" class="controls-container"> <div class="control-button icon-zoom-in" @click="zoomHandler('+')"></div> <div class="control- ...

javascriptvue.js

Elements on the page are being truncated beyond the visible viewport

Encountering an issue with a web page I'm currently developing that is proving challenging to explain. The problem occurs when the page is viewed in a small browser window and cuts off when scrolling horizontally to content outside of the viewport. Wh ...

htmlcss