ckportfolio.com - Plugin: jQuery Cycle

Plugin: jQuery Cycle

Making a connection

jQuery plugins are designed to perform specific functions for us, without us being forced to write them from scratch. If you can be strategic and careful with your choice, plugins can be immensely helpful in pushing your project forward.

First, we will start with a plugin named jQuery Cycle 2 (https://cdnjs.com/libraries/jquery.cycle2). The page lists a large number of paths to choose from, but what we need is a core library named "jquery.cycle2.min.js":

Simply bring this path to your fiddle's "Resources" section, and we are ready to write some HTML.

HTML and CSS

We are using a placeholder image service named "Lorem Picsum" (https://picsum.photos/images). To replace the original [Carousel] placeholder, create a "carousel" container and within it place a series of image paths:

Should the images be too small to fill up the corresponding container, simply apply some CSS to have each image fill the entire horizontal space:

Initialization

Finally, it's time for us to consult jQuery Cycle 2's thorough documentation (http://jquery.malsup.com/cycle2/demo/basic.php). The tutorial advises that we can simply add a specific class name to the "carousel" container:

The result is a surprising one: the images should collapse into a single box, and should fade in and out in a certain sequence. You can consult the documentation to learn how you can further modify the plugin behaviour.

Screencast Recording

https://drive.google.com/open?id=1Vs5vzkE0dqdkWSyOcYgkF_xDhtm0RcuI

Fin