Basic Full Width Slideshow Plugin with jQuery and jQuery UI

File Size: 484 KB
Views Total: 1081
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//">
<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="//"></script>
<script src="//"></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">
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>

4. Initialize the slideshow with default settings.


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.