Facebook Inspired Dynamic Carousel Plugin - jQuery Carousel-Slider

Facebook Inspired Dynamic Carousel Plugin - jQuery Carousel-Slider
File Size: 904 KB
Views Total: 7389
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Carousel-Slider is an easy, dynamic jQuery slider plugin to generate a nice-looking, Facebook inspired carousel UI from a JSON file. The carousel slider will be placed in a modern card layout and allows you to generate multiple carousel UIs from the same data source.

How to use it:

1. Add references to jQuery library, jquery_carousel_slider.css and jquery_carousel_slider.js as follows:

<link rel="stylesheet" href="css/jquery_carousel_slider.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
<script src="js/jquery_carousel_slider.js"></script>

2. Create a container element to place the generated carousel slider.

<div class="box" id="example"></div>

3. Initialize the plugin and specify the data source to load.

$.getJSON("data.js",function (result){
  var setting = {
      JSON :result

4. The JSON structure should be like these:

      "title":"Title 1",
      "des":"Description 1",
      "title":"Title 2",
      "des":"Description 2",
      "title":"Title 3",
      "des":"Description 3",

5. Possible options to customize the Facebook like carousel slider.


  // subject

  // card's width .
  cardw : 145,  

  // card's height
  cardh : 145,

  // the number of visible cards
  cardn : 7,    

  // margin between cards 
  margin : 9    

Change log:


  • mobile compatible

This awesome jQuery plugin is developed by Carr1005. For more Advanced Usages, please check the demo page or visit the official website.