Basic Full Width Slideshow Plugin with jQuery and jQuery UI

A simple jQuery plugin used to create a responsive, full width and customizable image carousel/slideshow with straightforward Html markups.

Dependencies:

• jQuery
• jQuery UI
• Ionicons. Optional, just for the navigation buttons.

How to use it:

1. Include ui.carousel.css and Ionicons.css in the head section of your web page.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css">
<link rel="stylesheet" href="src/ui.carousel.css">

2. Include jQuery, jQuery UI and jQuery ui.carousel plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="src/ui.carousel.js"></script>

3. Insert a list of images into your web page as shown below.

<div id="carousel-demo">
  <ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
  </ul>
</div>

4. Initialize the slideshow with default settings.

(function($){
  $('#carousel-demo').carousel();
}(jQuery));

Options that define the behavior of the carousel.

1. Whether or not the carousel is full-width. Full-Width has arrows on bottom instead of sides and Item/Page is full width of container.

fullWidth: false

2. Page to start on.

startPage: 1,

3. Whether or not to show the Page x of x text. And set the text to use if pageText.enabled.

pageText: {
  enabled: true,
  text: "Page"
},

4. Which icons to use for the navigation buttons. If no icons are defined, the navigation buttons will not be rendered.

icons: {
  prev: "ion-chevron-left",
  next: "ion-chevron-right"
},

5. Callback to invoke when the page changes.

callback: null

---

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