Image slide or Carousel
Hello I have I took on a coding challenge for creating a image slide or carousel effect with a swipe effect. It took me sometime to study HTML, CSS, and JavaScript it may seem confusing because CSS and JavaScript somehow use the same names for functions but JavaScript is doing something powerful in the background, it is programming or scripting.
It was kind of hard to digest all the tutorials but Gemini helped find some definitive answers, Gemini finished with suggestions and recommendations but now I need help input from you.
I have concluded that any type of “swipe-gestures” on a mobile device is just logic written in a program that creates this effect when responding to a interaction from the user or the “event.” The image sliding or a form being swiped is a visual effect or cinematic art.
From different sources I found I can display one image and have JavaScript remove or add a CSS rule to display the next image, this is like a wooden box where you are sliding one image in and the first one out. All of these techniques are companied with the CSS rule on transition where you set the child elements to ease-in-out within 0.6 seconds.
The next function that create a similar effect along utilizing CSS’s transition rule, is using JavaScript to manipulate the DOM and update the translateX(), this JavaScript function updates the DOM to a new position on the horizontal axis but utilizes the GPU instead of the CPU. Two different behaviors between JavaScript and CSS naming the same function or rule “translateX.”
The third option I found was also using the CSS transition rule, apply the JavaScript .scrollLeft() method but this is a type of cinematic art where you move the screen to a certain position, where the viewer is following the cinematic movie prompt at the beginning of the Star Wars movie or the ending credits of a movie. The .scrollLeft() method utilizes the CPU instead of the GPU. (I believe)
The last source of examples I found was utilizing JavaScript’s effects for animation and CSS once again has the same named function, property, or method for handling this visual effect with the name “animate.” JavaScript has the .animate() and CSS has the animation property. I found this last method to be far more advanced for a sliding image effect, this animation effect is best for creating a Canva software for creating images and editing photos.
I want to use the second option which is utilizing JavaScript to manipulate the DOM and slide the image to left using the translateX() method. Gemini says this method had best performance output. I believe this is better than the ancient cinematic art of display one image and turning off the rest of the images in a old camera.
Of course now I need to implement the logic of adding a event listener to the touchend, touchdown, mousedown, and mouseup event. Apply a event handler that continues to create this drag and swipe effect.
My question is did I fully understand the concept of this project and my comprehension of CSS and JavaScript. What is the best, are there more, or recommended options?
Hint: I am using jQuery as instructed by several books I have from web resources.
