Facebook Inspired Dynamic Carousel Plugin - jQuery Carousel-Slider

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" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<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 = {
      subject:'Sample',
      JSON :result
  };
  $('#example').slider(setting);
});

4. The JSON structure should be like these:

{ 
  "Sample":[
    {
      "title":"Title 1",
      "des":"Description 1",
      "imgpath":"1.jpg"
    },
    {
      "title":"Title 2",
      "des":"Description 2",
      "imgpath":"2.jpg"
    },
    {
      "title":"Title 3",
      "des":"Description 3",
      "imgpath":"3.jpg"
    },
    ...
  ]
}

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

$('#example').slider({

  // subject
  subject:'Default',

  // card's width .
  cardw : 145,  

  // card's height
  cardh : 145,

  // the number of visible cards
  cardn : 7,    

  // margin between cards 
  margin : 9    
  
});

Change log:

2018-01-16

• mobile compatible

---

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