Carousel refers to a scrolling list of items in either horizontal or vertical order. The scrolling items can be anything like videos, images text etc.
Carousel basically created using HTML, CSS and JQuery.
If you search Google for jQuery carousel plugins, I'm sure you'll get thousands of plugins. Among all the carousels I have used, the one I like the most is CarouFredSel. The reason being that not only it's free and has a wide range of configuration options, but on top of that, it's extremely easy to embed in your website.
CarouFredSel is a circular, responsive carousel plugin built using the jQuery.
Let's see how we can download and use this plugin.
Downloading CarouFredSel plugin
You can download CarouFredSel plugin from the following URL:
https://www.jqueryscript.net/slideshow/Circular-Responsive-Slideshow-Plugin-carouFredSel.html
This is for downloading all the source files of CarouFredSel.
Once the download is complete, open the download location, Right-click on the CarouFredSel’s .ZIP file and select the Extract Here option from the context menu.
Inside Zip folder
Let’s start with Installation:
Initial folder structure
My carousel will contain 4 images but you can have as many as you like.
As you can see from the screenshot above, I have my root folder with the name of CarouFredSel. Inside this root folder, I have 3 folders and 1 separate file.
First there is a css folder that contains a style.css file. Next, I have an images folder that contains 3 images. After that, there is a js folder which is, for the time being, empty. We will put our JavaScript files in this folder. Finally, there is an index.html file which is a simple HTML file.
Set HTML
(Include this code in index.html file.)
Write CSS
Include Js
Just before the closing </body> tag, write the following line:
Note: Make sure that you add carouFredsel's plugin AFTER calling jQuery's library. Otherwise it won't work.
Calling the Plugin
Just BEFORE the closing body tag and AFTER the line where we have referenced the carouFredsel plugin, open up a new <script></script> tag and in between them, write the following code.
Now call the carouFredSel initialize function and your carousel is ready.
Save the file, open it up in any browser. And IT WORKED!!
Following URL for advance options:
http://caroufredsel.falsecode.ru/advanced.html