Building a never-ending scroll carousel with interactive indicators

I'm attempting to design a div that features horizontal scrolling, resembling a carousel, with multiple cards that can smoothly scroll from left to right. The goal is to have the scroll be continuous, so once the final card is reached, it loops back to the initial card. While I've made progress on achieving this effect, I am encountering difficulties with implementing indicators beneath the div. These indicators are meant to display dots corresponding to each card, allowing users to navigate between them by clicking on the dots and resetting the scroll of the div. To maintain the infinite scroll functionality, I duplicated the cards when reaching the end, which works as intended. However, the issue arises when trying to manually adjust the scroll with the cloned elements while ensuring that the correct number of dots appear (accounting for the clones). How can I tackle this problem? Are there any examples or resources available online that could offer guidance?

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

javascriptvue.jsvuejs2carouselinfinite-scroll

Answer №1

If you're looking to achieve a specific design goal, consider utilizing Glide.js as a solution.

To assist with updating the carousel item count state, sharing some of your code will help identify any issues preventing the state from being updated.

Here's an example showcasing how to implement a carousel using Glide.js. The following code snippet handles the looping logic effortlessly: 

new Glide('.glide', {
    type: 'carousel',
    perView: 3,
    animationDuration: 500,
    loop: true
}).mount();
body {
  margin: 0;
}
.glide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    font-size: 2rem;
    background: lightgrey;
}
.glide__arrows button {
  transform: translateY(100%);
  background: lightgrey;
}
.glide__bullets {
  padding: 10px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.theme.min.css">
<div class="glide">
    <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
            <li class="glide__slide a">1</li>
            <li class="glide__slide b">2</li>
            <li class="glide__slide c">3</li>
            <li class="glide__slide d">4</li>
            <li class="glide__slide e">5</li>
        </ul>
    </div>

    <!-- Navigation Arrows -->
    <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">Prev</button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">Next</button>
    </div>

    <!-- Dots Navigation -->
    <div class="glide__bullets" data-glide-el="controls[nav]">
        <button class="glide__bullet" data-glide-dir="=0"></button>
        <button class="glide__bullet" data-glide-dir="=1"></button>
        <button class="glide__bullet" data-glide-dir="=2"></button>
        <button class="glide__bullet" data-glide-dir="=3"></button>
        <button class="glide__bullet" data-glide-dir="=4"></button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>

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

FitText.js malfunctioning

I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...

javascriptjquerycsswebfontsfittextjs

Encountering a Laravel error related to "SymfonyComponentHttpKernelExceptionHttpException"

After transferring my Laravel and Vue JS application to our server, I encountered an error that reads: Symfony\Component\HttpKernel\Exception\HttpException A similar issue was reported here, but unfortunately no solution was provid ...

phpajaxlaravelvue.js

Error message encountered while trying to instantiate 'FormData'

My contact form was working perfectly fine until recently when it suddenly stopped allowing me to send messages. I keep encountering this error message every time I try to submit the form: Uncaught TypeError: Failed to construct 'FormData': pa ...

javascriptajaxphpmailer

Having issues with Sencha Touch not initiating in mobile browsers

For quite some time now, I have been developing a mobile app using Sencha Touch 2.1 and conducting tests primarily on desktop Chrome and an iOS PhoneGap / Cordova package. Recently, I made the decision to release it as a "native" app while also offering re ...

javascriptsencha-touchmobile-safariandroid-browser

Transition smoothly between two images with CSS or jQuery

I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...

javascriptjqueryhtmlcssimage

Is there a way to trigger a function for both a left and middle click at the same time?

Check out this code snippet: $('a').on('click', function(){ myfunc($(this)); }); function myfunc(el){ console.log('Either left or middle click clicked on the link'); } a{ cursor: pointer; } <script src="https://aj ...

javascriptjqueryhtmlcss

Invoke the function functionA within the ClassComponentA class in the file fileA, located within the functionComponentA file of a REACT 17 application

My dilemma involves working with two components: a class component and a function component. I am trying to find a way to call a method from functionComponentA, which is located in classComponentA. Currently, I am achieving this by passing the method as pr ...

javascriptreactjsfunctionmethodscomponents

Troubleshooting undefined results with AngularJS ng-repeat filter

My objective is to create a Letter Filter, where users can click on buttons from A to Z to filter the displayed data. When clicking on the letter 'A' button, only data starting with 'A' should be shown. However, I have encountered an i ...

javascriptangularjsangularjs-ng-repeat

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid

Top method for handling chained ajax requests with jQuery

I'm facing a scenario where I have to make 5 ajax calls. The second call should only be made once the first call returns a response, the third call after the second completes, and so on for the fourth and fifth calls. There are two approaches that I ...

javascriptjqueryajax

Exploring the functionality of dimensions in d3 parcoords

I am diving into the world of d3 and experimenting with Behold, a simplistic example directly from the website. <script src="http://d3js.org/d3.v3.min.js"></script> <script src="d3.parcoords.js"></script> <link rel="stylesheet" ...

javascriptd3.jsdimensions

Struggling to incorporate pagination with axios in my code

As a newcomer to the world of REACT, I am currently delving into the realm of implementing pagination in my React project using axios. The API that I am utilizing (swapi.dev) boasts a total of 87 characters. Upon submitting a GET request with , only 10 cha ...

javascriptreactjsreact-hooksreact-redux

Leveraging AJAX to fetch an array or string for controller utilization in CakePHP 2

In my current scenario, I am dealing with multiple banner ads on a page and I need to track how many times each one is displayed. For example, let's consider banners with IDs 1, 2, 3, 4, and 5. Every time the page refreshes, banners with IDs 1, 2, an ...

javascriptajaxjsoncakephpcakephp-2.0

Leverage Reveal.js within Next.js by installing it as an npm package

I am currently working on a project that requires integrating Reveal.js with Next.js. However, I am having trouble displaying the slides properly. Every time I try to display them, nothing shows up. Even after attempting to display some slides, I still en ...

javascriptreactjsnpmnext.jsreveal.js

The functionality of a website's design acts as a safeguard against unauthorized data transfers

I am encountering a major issue with my website. The layout I have created seems to be hindering me from making any modifications. My website consists of several containers, with three small containers stacked on top of each other as the main section of ...

phpjavascriptajax

JavaScript and React.js encounter glitch in AWS Cognito authentication function

I'm currently troubleshooting a issue in my code where there is no validation to prevent a user from signing up with the same email twice: Below is my onSubmit code: async function handleSubmit(event) { event.preventDefault(); setIsLoading( ...

javascriptreactjsamazon-web-servicesamazon-cognitoaws-amplify

Having trouble with unblocking the UI using $.unblockUI()?

I have been developing a simple modal using blockUI that appears and asks the user to confirm their age. To avoid conflicts, I always create a separate page for each code I work on. However, the current html/javascript page I created is not working as inte ...

javascriptjqueryhtmlcssblockui

Learning the ropes: Building a model with nodejs using tensorflow.js

I am interested in creating an image classifier, but I lack knowledge of python. Since I am familiar with javascript, I have been considering using Tensorflow.js. Can models be trained with Tensorflow.js, and if so, what are the steps involved in the proce ...

javascriptnode.jstensorflowtraining-datatensorflow.js

Encountering a "DOM Exception 11: InvalidStateError" when attempting to use websocket.send

I encountered the following error message: DOM Invalidate exception 11 This error is coming from the code snippet below, but I'm having trouble identifying the root cause. /*The coding style may appear pseudo-stylish with potential syntax errors*/ ...

javajavascriptwebsocketjetty

tips for sending a chosen item to the Vujes API

How can I send the selected item from a dropdown to an API in Vue.js? <select :v-model="selectedRole" class="custSelect"> <option v-for="option in options" v-bind:value="option.value"> {{option.role}} </option> ...

javascriptvue.jsconsole