I’m trying to build a JavaScript carousel exactly like the simple version of the famous JCarousel but I want to do it with no jQuery at all. Why do I want to do that? Well, because I’m trying to really learn and understand how JavaScript works.
I’ve been searching forever to find an example with no use of libraries but I haven’t been able to find anything. If anyone can point me out to something similar to what I need I’d appreciate.
Now, basically my question when it comes to build the carousel is related to the movement of the images in the list. So I have all the images in a list, I have buttons for the arrows left and right, ok but when I trigger the event I just don’t know where to start in order to move all the images left or right…
Any clues?
You’ll likely find examples that use libraries because some of these things are pretty intense. The theory is that you’ll want to make a very wide div with all the images arranged horizontally, then on button pushes, set the div’s css’s left position to add or remove the value of the image’s width. Libraries are very good at wiring up button clicks to callback functions, querying and setting an element’s css, measuring an element’s width, and manipulating the dom to take (for example) a list of
<li>tags and making it into a very wide div. Add the graphic design constraints, and though I applaud and reverence your desire to do it by hand, you’ll spend a very long time reinventing the wheel.