Progress bar carousel component based on advancement movements

Here is the mockup I am working with: https://i.sstatic.net/bIepQ.png

So far, I have made good progress with this code: https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js

However, I am facing a couple of challenges that I need help with:

  1. When navigating through the components using the next and previous buttons, the component resets instead of stopping at the last element in the list.
  2. The progress bar below the cards, along with the arrows, is proving difficult to implement. I was wondering if anyone has come across a similar design that I can refer to.

Any help or ideas would be greatly appreciated. Thank you in advance.

javascripthtmlcssreactjs

Answer №1

To begin, set a count variable to 0 and make adjustments to the remaining code:

const shiftPrev = (copy) => {
    let lastcard = copy.pop();
    if (count > 0) {
      copy.splice(0, 0, lastcard);
      setCarouselItems(copy);
    }
  };

const shiftNext = (copy) => {
    let firstcard = copy.shift();
    if (count < copy.length) {
      copy.splice(copy.length, 0, firstcard);
      setCarouselItems(copy);
    }
  };

The concept here involves initializing the count (you could also store it in state, but be mindful of potential performance issues with re-renders upon setState).

Additionally, remember to incorporate CSS styling and determine the initial card displayed on the UI along with setting the start and end counts accordingly.

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

AngularJS modal popup with a selectable table

Is there a way to open a modal popup containing a table in my application? I'm trying to achieve this by setting up an event in my app.js that triggers the modal when a row is clicked. Additionally, I need to update a field with the selected item&apos ...

javascriptangularjsangular-ui-bootstrap

When clicking on the Bootstrap navbar after implementing the onclick functionality, the color changes to

I was having no issues with my navbar until I introduced an onclick function to it. Here is the code for my onclick function: $('.nav li a').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/ ...

htmlcsstwitter-bootstrapnav

Understanding how objects are created using the reduce method

I'm curious about how the reduce function can transform an array into an object as shown in this example, particularly with the line: p[c[0]] = c[1]; Is this an unconventional syntax for creating key-value pairs that I haven't encountered before ...

javascriptarraysobject

Using Vue.js to send a slot to a child component in a nested structure

Check out this interesting modal component configuration //modal setup <template> <slot></slot> <slot name='buttons'></slot> </template> Imagine using it like a wizard //wizard setup <template> ...

javascriptvue.js

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Tips for passing values and their corresponding labels during a click event in Angular 4

When I click the plus button, I want to hide the li element. Even though the data is passing correctly, the li element is not clearing as expected. The desired outcome is for the li instance to be removed once the plus button is clicked. https://i.stack.im ...

htmlangulardom

Can you explain how the interactive notification on stackoverflow is generated when you are responding to a question and someone posts a new answer?

Have you ever been in a situation where you're writing an answer to a question, but then someone else posts their response and a popup appears notifying you of the new answer? I'm curious about how that whole process works. It seems like the answ ...

phpjavascriptjquerysqlajax

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

htmlcssmobile

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

Would you mind helping me out with this technical issue I'm facing? For the server/API, I am using this link. As for the mock website, it can be found at this URL. The problem is that, in my code, I'm using axios to fetch data from the locally h ...

javascriptreactjssafariaxioscodesandbox

Mobile devices are not showing the fixed header correctly

Recently, I was requested to lend a hand with a certain website: www.backincontrolbook.com Interestingly, when viewed on a PC browser, everything appears as intended. However, switching over to a mobile device (iPad and iPhone specifically), the header de ...

htmlwordpressmobileheader

Spin an object around the global axis using the tween.js library

I'm trying to achieve a gradual rotation of a cube on the world axis using tween. Initially, I was able to rotate the cube around the world axis without tweening with the following code: rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeT ...

javascript3dthree.jsrotationtween.js

Retain the existing HTML files of the old website on the webserver while preventing search engines from indexing them

Recently, I completed a website for a client who is looking to replace their ancient HTML hard-coded website. The challenge lies in the fact that they wish to preserve the old website and its files on the web server at their current location. While this do ...

phphtmlseouser-agentrobots.txt

Retrieving information and employing the state hook

Currently, my goal is to retrieve information from an API and utilize that data as state using the useState hook. fetch('https://blockchain.info/ticker') // Execute the fetch function by providing the API URL .then((resp) => resp.json()) // ...

javascriptreactjsapi

What are the best ways to integrate markdown into my Vue.js projects?

Is there a way to utilize markdown within the context of vue.js instead of regular HTML paragraphs? ...

javascriptnode.jsvue.js

What is the best way to execute a function from a parent element within the child element?

Currently, I am working with two components - Navbar (parent) and Setting Menu (Child). const Navbar: React.FC = () => { const classes = useStyles(); const [randomState, setrandomState] = useState(false); const randomStateFunction = () =>{ ...

reactjstypescript

Validating emails using angular material chips

I'm currently working on implementing a form that utilizes input chips to facilitate sending messages to multiple email addresses. While I've made progress in making the form functional, I'm facing difficulties in displaying error messages w ...

htmlangulartypescriptformsvalidation

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

Is it possible for Angular.js to interact with JSTL expression language?

Is it possible for angular.js to interact with JSTL expression language? I am trying to generate ng-options using an array. Here is an example of what I am attempting to accomplish: <select ng-model="detail" ng-init="Categories = '${Categories}& ...

javascriptangularjsjstlangularjs-ng-repeatangularjs-ng-init

Make sure all Bootstrap elements have square edges

Can someone help me with using bootstrap3 to achieve square corners for all buttons, menus, and navs? I have tried setting the edges to be square using this code snippet, but my specific requirement is to only have square corners for the buttons, menus, a ...

htmlcsstwitter-bootstrap-3

Having trouble saving post data using ajax in django

I am encountering an issue with saving my partial '_dim' while viewing the main template 'sheet_form_create.html'. Every time I try to post the data for my '_dim' partial, I receive an error. Any assistance would be greatly ap ...

javascriptpythonajaxdjango