Lab #10 Cycle Simple Slideshow
In this lab, I was given all of the code for the HTML, CSS, and jQuery for the page. My objective was to use that jQuery and a plugin called Cycle2 in order to manipulate the 3 sub-content holders on the bottom of the page to be animated into a slideshow. The left slide was supposed to be a vertical transition, the middle one was to be a horizontal transition and the last slide would be a fade-in/out.
In order to accomplish the task, I first linked the HTML webpage with the jQuery file and the cycle2 plugin associated with jQuery. After linking the 2, I went into my JavaScript file and typed out a jQuery to create cycles for the transitioning of 'scrollVert' for the first one, and the 'fade' for the last one. I was unable to create the 'scrollHorz' transition within the JavaScript and it wasn't working for me. However, I was able to bypass the problem by going directly into the div of the second section and adding the special class made by the plugin "cycle-slideshow". This allowed me to directly add the 'scrollHorz' effect to the div and then it worked.
Web designers can use these kinds of transitions to be able to make their website more appealing and capture the attention of more people. This would most likely be seen on a website regarding slideshows for galleries or for webpages advertising a product that could be in a slideshow to professionally present it.

Comments
Post a Comment