i have made 3 divs. added position: absolute to them. made three buttons, linking each to their corresponding div. now, i want it to show the certain div that it's button is related to. for example, if im clicking the first button, it should take me to the first div, only that one being visible at a time (since i added position absolute). then if the second button is clicked, it should take me to the second div, in a manner similar to a slider. any kind of help would be much appreciated, im an absolute beginner, please let me know what javascript code i need for this with an explanation. thanks.
It sounds like you want to be able to 'scroll' sideways through the divs so that only one 'active' div is viewable at any one time, with the other two off screen.
If this is the case, I would probably try and take care of the animation and placement in css. Simply create a class that is off to the left, with:
transform: translate-x(-100vw);
and on that is off to the right with:
transform: translate-x:(100vw);
then perhaps put a timing function on all of the divs:
transition: all 0.6s ease-in-out;
Then I would have the onClick for each button add/remove the relevant classes. You could do this with plain JS, jQuery, or if you are using something like react or Ember you could put those classes/classNames in your template as a conditional on some factor
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments