#af.carousel.js
af.carousel
To use af.carousel you must do the following
- Create a div with the content inside you want to page between. You must set the height and width of this div, along with overflow:hidden
<div id="my_div" style="width:768px;height:400px;overflow:hidden">
<div style="float:left;width:766px;height:400px;border:1px solid white;background:yellow;"></div>
<div style="float:left;width:766px;height:400px;border:1px solid white;background:green;"></div>
</div>- if you want the dots to show up for paging, create the div
<div id="carousel_dots" style="text-align: center; margin-left: auto; margin-right: auto; clear: both;position:relative;top:-40px;z-index:200"></div>- Call the javascript function to create the carousel
var carousel = $("#my_div").carousel();There are additional configuration options that are passed in as an object parameter
var options={
vertical:false, // page up/down
horizontal:true, // page left/right
pagingDiv:null, // div to hold the dots for paging
pagingCssName:"carousel_paging", //classname for the paging dots
pagingCssNameSelected: "carousel_paging_selected", //classname for the selected page dots
wrap:true //Creates a continuous carousel
}
var carousel = $("#my_div").carousel(options);There are two functions for adding/removing items
carousel.addItem(element);
carousel.removeItem(); //remove all items
carousel.removeItem(index); //remove an item by index
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent