We Care Through What We Share
  • 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