Circular JQuery carousel tracking

I am struggling to figure out how to create a looping effect for the images inside the slider. I would like the track to seamlessly loop around from both sides after they are hidden. Here is the link to the current jsfiddle: http://jsfiddle.net/V2x6s/3/

Below is the JavaScript code: 

setInterval(function() {
    var left1 = parseInt($('#track1').css('left')),
        left2 = parseInt($('#track2').css('left')),
        left3 = parseInt($('#track3').css('left'));
    
    if ($('#left1').is(":hover")) {
        $('#track1').css('left', left1+2);
    }
    else if ($('#left2').is(":hover")) {
        $('#track2').css('left', left2+2);
    }
    else if ($('#left3').is(":hover")) {
        $('#track3').css('left', left3+2);
    }
    else if ($('#right1').is(":hover")) {
        $('#track1').css('left', left1-2);
    }
    else if ($('#right2').is(":hover")) {
        $('#track2').css('left', left2-2);
    }
    else if ($('#right3').is(":hover")) {
        $('#track3').css('left', left3-2);
    }
    
}, 10);
.slider {
    position: relative;
    
    background-color: #ccc;
    height: 150px;
    margin: 10px;
    padding: 10px;
    
    overflow: hidden;
}
.track {
    position: absolute;
    top: 10px;
    left: 10px;
    
    margin: 0;
    padding: 0;
    border: 0;

    width: 2000px;
}
.book {
    float: left;
    
    margin: 0;
    margin-right: 10px;
    padding: 0;
    border: 0;
    
    width: 150px;
    height: 150px;
    
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
}
.book:hover {
    opacity: 0.5;
}
.book:nth-child(1) {
    background-color: #ff0000;
}
.book:nth-child(2) {
    background-color: #ffaa00;
}
.book:nth-child(3) {
    background-color: #ffff00;
}
.book:nth-child(4) {
    background-color: #00ff00;
}
.book:nth-child(5) {
    background-color: #0000ff;
}
.book:nth-child(6) {
    background-color: #aa00ff;
}
.book:nth-child(7) {
    background-color: #ff00ff;
}
.left, .right {
    position: absolute;
    color: white;
    font-size: 48px;
    top: 57px;
    
    cursor: pointer;
    z-index: 1;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
<div class="slider">
    <div id="left1" class="left">&lt;</div>
    <div id="right1" class="right">&gt;</div>
    <div class="track" id="track1">
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
    </div>
</div>
<div class="slider">
    <div id="left2" class="left">&lt;</div>
    <div id="right2" class="right">&gt;</div>
    <div class="track" id="track2">
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
    </div>
</div>
<div class="slider">
    <div id="left3" class="left">&lt;</div>
    <div id="right3" class="right">&gt;</div>
    <div class="track" id="track3">
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
    </div>
</div>

javascriptjqueryhtmlcss

Answer №1

Check out this demo

This is my approach... I first calculate the window width and the elements' width, then use them in the code below:

// $('#track1').parent().width() - gives window width
// $('#track1 .book').length * ($('#track1 .book').width() + 5) - gives combined elements width
    if ($('#left1').is(":hover")) {
        var move = left1+20;
        if(move > $('#track1').parent().width())
            move = $('#track1 .book').length * ($('#track1 .book').width() + 5) * -1;
        $('#track1').css('left', move);
        //console.log(left1+20, tmp,$('#track1').parent().width() );
    }
    else if ($('#right1').is(":hover")) {
        var move = left1-20;
        if(move < $('#track1 .book').length * ($('#track1 .book').width() + 5) * -1 )
            move = $('#track1').parent().width();
        $('#track1').css('left', move);
        //console.log(left1-20, tmp,$('#track1').parent().width() );
    }

You can apply similar modifications to other elements as well, but using setInterval for monitoring is not recommended.

Edit:

I have created a different approach here: demo

$('.left').hover(function(){
    moveLeft($(this));
});

$('.right').hover(function(){
    moveRight($(this));
});
function moveLeft(ele){
    if(ele.is(":hover")){
        var track = ele.next().next(),
            move = parseInt(track.css('left'))+10,
            books = track.find('.book'),
            wid = (books.length * (books.width()+5)) * -1;
        if(move > track.parent().width())   move = wid;
        track.css('left', move);
        setTimeout(moveLeft.bind(null, ele), 50); // change 20 to whatever number you like
    }  
}    
function moveRight(ele){
    if(ele.is(":hover")){
        var track = ele.next(),
            move = parseInt(track.css('left'))-10,
            books = track.find('.book'),
            wid = (books.length * (books.width()+5)) * -1;
        if(move < wid )   move = track.parent().width();
        track.css('left', move);
        setTimeout(moveRight.bind(null, ele), 50); // change 20 to whatever number you like
    } 
}

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

In JavaScript or jQuery, what is the most optimal method to swap out all instances of a specific string within the body content without altering the rest of the body text?

Is there a way to replace specific occurrences of a string within a web page's body without disrupting other elements such as event listeners? If so, what is the best method to achieve this? For example: Consider the following code snippet: <body ...

javascripthtmljqueryreplacesubstring

Is there a way to conceal the faces of a mesh in three.js?

Is it possible to make certain parts of a mesh invisible during runtime by changing attributes of single faces? The mesh is using only one material. Visual Example of the question: Picture a mesh with 20 vertices where each quad is made up of four vertice ...

javascriptthree.jsmesh

Volume slider missing on Handel?

I'm having an issue with my volume slider in jQuery - the handle is not showing up despite it working. Any suggestions on how to make the handle visible? The jQuery I have imported: <script src="jquery-3.4.1.min.js"></script> <script ...

jqueryhtmlcssjquery-ui

Adjust columns sizes on ExtJS 6 dashboards in real-time

Is it possible to adjust the column widths within an Ext.dashboard.Dashboard once it has been displayed? The initial configuration sets the column widths as follows: columnWidths: [ 0.35, 0.40, 0.25 ] I would like to dynamically modify them ...

javascriptextjsextjs6

Instructions for converting a readonly text field into an editable one using JavaScript

I'm trying to make it so that when the button (with id name_button) is clicked, the text field (with id name_text_field) becomes enabled. However, my current code doesn't seem to be working. Here's a snippet of my HTML: <input type="tex ...

javascriptjqueryhtml

How can I extract just the initial 2 letters of a country name using AmCharts maps?

Having trouble with Amcharts maps. I have a map that displays countries as United States, but I only want them to show as US. Is there a country formatter available for this issue? Any help is appreciated. ...

javascripttypescriptmapsangular5amcharts

Encountering an Error with "Access-Control-Allow-Origin" Request While Trying to Access the API

I'm currently facing an issue with fetching data from the Rescue Time API. My request is made in a JavaScript file using the jQuery get() method. Below is the snippet of JavaScript code related to the API GET request: $.get('https://www.rescueti ...

javascriptjqueryajaxcorscross-domain

utilizing an arrow function in the same manner as a traditional function

I am a fan of the new arrow ()=>{} syntax and would love to use it wherever possible. I understand that arrow functions point to the outer this context. Is there a way to modify an arrow function so that "this" points to its inner scope? For example, h ...

javascriptangularjsecmascript-6

Javascript error when attempting to add leading zeros

Is there a way to utilize JavaScript or JQuery in order to prepend a zero to this script? for (im=1;im<=31;im++){ days[im]=everyDay[im]; } ...

javascriptjquerypadding

Display a text field upon clicking on a specific link

I am trying to create a text field that appears when a link is clicked, but I haven't been able to get it right yet. Here is what I have attempted: <span id="location_field_index"> <a href="javascript:void(0)" onclick="innerHTML=\"< ...

phpjavascript

Implementing a Fixed Navbar in VueJS on Scroll

I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js. I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js. The updated code can be found in a file named navbar.js. Previous jQuery CODE ...

htmljquerycssvue.js

"Encountering an issue with the Foreach function in nextjs when iterating through

I attempted to iterate through each character in a String, but the SPANS are not displaying. What could I be doing incorrectly? export default function Work() { const logoText = "The future starts here."; return ( <div className=& ...

javascriptreactjsarraysloopsnext.js

The toast feature in Bootstrap 5 seems to be malfunctioning as it does not display properly despite the absence of any

Why isn't the Toast displaying in the code snippet below? I'm using bootstrap 5. I'm puzzled because there are no errors in the developer's tools. Any assistance would be greatly appreciated. <!DOCTYPE html> <html lang="en"& ...

javascripthtmljquerybootstrap-5toast

Adjust the height of each table's data cell dynamically based on the content within

I have a table in HTML with a cell that contains 2 divs and a radial tab strip. Here is an example: <td> First td </td> <td> Second td <div> .... <div style="border: solid; border-color: brown; border-width: 3px; he ...

htmlcssdynamichtml-tableautogrow

What is the best way to refresh or clear the DateRangePicker calendar?

Is there a way to clear/reset selected dates in the DateRangePicker calendar when using a JQuery plugin? /* Calendar init */ $('.calendar__input').daterangepicker({ alwaysShowCalendars: true, linkedCalendars: false, sho ...

javascriptjquerydaterangepicker

Combining Multiple Pie Charts with a Line Chart in Highcharts

Can anyone provide guidance on creating a chart similar to the one shown in the Highcharts library? https://i.sstatic.net/BoX4i.jpg ...

javascriptjqueryhighcharts

Avoiding Repetition in Vue.js with Vuex

When approaching repetitions in my code with Vue.js and Vuex, I often encounter similar mutations that need to be handled separately. For instance, I have mutations for both Services and Materials that share a lot of similarities. The first mutation is ...

javascriptecmascript-6vue.jsvuex

Using JavaScript to implement word filtering in MongoDB

I'm currently in the process of creating a chatbot designed to filter questions, and I'm seeking guidance on how to refine the search in my MongoDb based on user input. At the moment, I have the following code: I aim to retrieve all the results ...

javascriptmongodb

Is there a way to see the HTML version of an invoice instead of the PDF?

Looking to personalize the .pdf invoice for my PrestaShop store, The issue is that the process is quite time-consuming: Modify .tpl file Generate .pdf file Review changes Meanwhile, I'd like to convert the invoice to HTML to inspect the elements u ...

htmlpdfprestashopprestashop-1.6invoice

Concentrate on Selecting Multiple Cells in ag-Grid (Similar to Excel's Click and Drag Feature)

Is there a way to click and drag the mouse to adjust the size of the focus box around specific cells in ag-Grid? This feature is very handy in Excel and I was wondering if it is available in ag-Grid or if there is a workaround. Any insights would be apprec ...

javascriptvue.jsag-grid