I'm having trouble trying to figure out how to reset the loop after it reaches the third image. The actual card will be absolutely position to this element, so when changing its left property, there won't be any oddness, as it hasn't previously been set.I am trying to set up an image carousel that loops through 3 images when you mouseover a div. This is definitely not what we want! We can fix both these problems by adding a(nother!) container around our card, which will take on the transition property and our card will be aligned within, so there will be no jump left.įirst we wrap our card with a tag, trying to follow HTML semantics, that will be what is positioned in the card container, and have the transition. The second issue is that when we move the card left is instantly set to a pixel value and the card appears to jump left. You can comment that out to fix it, but of course this will disable the nice animation when clicking the left/right chevrons. This is the transition CSS property on the card slowing down it's movement as it animates between positions. First of all you'll immediately notice what feels like mouse lag. So once that's sorted, now lets look at the function we need to track our mouse event. An alternative if you want or need to allow selection is to have a specific area of the card as the draggable area, for this you would set your onMouseDown handler function to that particular element of the card, like a or any other element you want. Other than that you may also be getting some selection happening when the mouse drags over the heading and image, to prevent that we can use user-select: none in the card class. We need to stop this to prevent it interfering with our dragging of the card, we can do this in CSS by applying pointer-events: none to the image. Once we have that, we can change the CSS left position property to reflect what the mouse does.įirstly you may notice when dragging the card from the image it will be pulled along with your cursor. We can use the event to get the element we should move, the starting position of X, and use document.onMouseMove to track the cursors position.
On each click the event object is passed to our function which we use to log the target, which is the card. Now if we click on a few cards we will see in the Chrome console something like. Here's an example of some data, by all means edit or add your own touch to this.Įnter fullscreen mode Exit fullscreen mode Lets keep it simple, we can use a Javascipt array of objects and import them into our main app.js.
#React image carousel code
NB: I'll use ellipses (.) to signify removed code in some parts to shorten code blocks.įirst thing we need is some data, which we will populate our cards with. I have added basic CSS to the layout and won't be adding all of the styles here to keep things concise, but you may check it out in the project repository and import it to match the styles seen. To make a functioning carousel you may only need to complete the first section, and then you'll have all you need to take it further yourself.
In the age of Instagram and Tinder, who doesn't like to swipe? You can use grids, tables, flexbox, they all do the job, but maybe you want to add a little bit of style and responsiveness to your page? If so, lets create our own carousel, a group of items we can swipe through with pointer events to add some interactivity. When you have any sort of group of similar things, when it comes to presenting them you have a number of choices.
0 kommentar(er)
