
Lab 40 was about creating a carousel the user could click and drag sideways. The first thing I did after setting up the HTML was opening a div with many other divs inside. These inner divs would become the items the user can click and drag later on. After styling them in the CSS, I stored all the divs in a variable to be used later on in an event listener. I created several event listeners for the carousel: one that would add a class CSS class to the carousel that would allow the user to slide it when the user clicked and held down, one that removed this class when the user stopped holding the mouse down, and one that calculated the left and right offset and actually made scrolling functional when the user moved their mouse a certain way. This made the carousel slide-able.
These skills are useful to a web designer because they allow elements of a website to be displayed in a very appealing way. Simple lists get the job done but since many websites use them, they can be quite boring. A sliding carousel, on the other hand, requires both the user do something to see every item and displays the items in a unique way, making the process stimulating to the user. If a restaurant had a website with an online menu, such a carousel could be used to display the items they served in a more special and attractive way. In short, it gives a distinctive way of displaying multiple items.
Comments
Post a Comment