Jqx-Media-Slider

Simple and Customizable jQuery Media Slider Plugin

This project is maintained by Jigar Dafda

Welcome to Jqx Media Slider Documentation Page

Simple, yet customizable jQuery media slider plugin

This is a simple yet a customizable slider, it can have any kind of content as a slider such as images, texts, html etc. for more, see the examples below.

Examples
  1. Minimal Configuration
  2. Changed Offset
  3. Custom Height And Width
  4. Full Width Carousel
  5. Slider With Text
  6. Slider With YouTube Videos
  7. Slider Buttons - Inside The Container
  8. Custom Navigation Buttons

Getting Started

First thing, include jQuery Library from cdn or local server. from Jqx-Media-Slider repo include minified javascript and css files.

Supported Browsers

  • IE9+
  • All Modern Browsers ( Chrome, Firefox etc. )

Options and Events

items
Type: Array
Default Value: [ ] ( Empty Array )
An array of items(images, strings, html etc.) to be shown in slider.
itemWidth
Type: Number (pixels)
Default Value: 50 (pixels)
Width of the item container.
itemHeight
Type: Number (pixels)
Default Value: 50 (pixels)
Height of the item container.
widthBetweenItems
Type: Number (pixels)
Default Value: 3 (pixels)
Width between two items in slider.
changeOffset
Type: Number (pixels)
Default Value: itemWidth + widthBetweenItems/2 (pixels)
Width change on click on previous or next button.
sliderButtons
Type: String ['out', 'in', 'hidden']
Default Value: 'out' (string)
Position of sliders navigation buttons.
itemRender
Type: Function
Default Value:
Retuned value of this function will be added in the container.

Instance Methods

Following are the ways to get instace of the media slider.

appendItems
Appends the new items to the slider.
next
Goes to next.
prev
Goes to previous.
destroy
Destroys the media slider.

Examples

Example 1 : Minimal Configuration

Code:

Example 2 : Changed Offset

Code:

Example 3 : Custom Height And Width

Code:

Example 4 : Full Width Carousel

Code:

Example 5 : Slider With Text

Code:

Example 6 : Slider With YouTube Videos

Code:

Example 7 : Slider Buttons - Inside The Container

Code:

Example 8 : Custom Navigation Buttons

Code:

Authors and Contributors

@jigardafda . This repository is open to contribution.

Support or Contact

Having trouble with jQx-Media-Slider? Feel free to mail me at jigar.dafda [ at ] gmail.com.