Ultimate jQuery Content Slider Plugin – DG_Slider

What is DG_Slider?

DG_Slider is a jQuery  plugin that carries you on a content slider or carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is light weight, at about 14 KB in size, yet very flexible and customizable to fit most of our needs. DG_Slider is a great plug-in. It offers a host of features and it is so customizable that you are limited only by your imagination.

Features

  • Horizontal, vertical, and fade transitions
  • Display and move multiple slides at once (carousel)
  • Prev / next, pager, auto controls
  • Start / Stop control
  • Easing transitions
  • Random start
  • Ticker mode also 🙂
  • Before, after, first, last, next, prev callback functions
  • Optional styling included
  • Tons of customizable options

Demo

DG_Slider : A ultimate jquery content slider plugin with multiple options
Click & Download DG_Slider.zip

Instructions

METHOD #1: EASY

Simply place the following code anywhere inside the <head> tag of your webpage:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://cloud.github.com/downloads/Dhirajkumar/DG_Slider/jquery.DG_Slider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').DG_Slider();
});
</script>

NOTE: the element to which the slider is being applied must be structured in a similar fashion:

<ul id="slider1">
<li>Slide one content</li>
<li>Slide two content</li>
<li>Slide three content</li>
<li>And so on...</li>
</ul>

or

<div id="slider1">
<div>Slide one content</div>
<div>Slide two content</div>
<div>Slide three content</div>
<div>And so on...</div>
</div>

METHOD #2: ADVANCED

STEP ONE: Download DG_Slider.zip or visit http://demo.web3designs.com/DG_Slider.zip

STEP TWO: Unzip and place the file jquery.DG_Slider.min.js in the same location as the webpage that is displaying the slider.

STEP THREE: include the following code in the <head> section of your webpage:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.DG_Slider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').DG_Slider();
});
</script>

General

mode Type of transition between each slide default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'
speed In ms, duration of time slide transitions will occupy default: 500
infiniteLoop Display the first slide successively after the last default: true
options: true, false
controls Display previous and next controls default: true
options: true, false
prevText Text displayed for ‘previous’ control default: 'prev'
options: string
prevImage Filepath of image used for ‘previous’ control. ex: ‘images/prev.jpg’ default: ''
options: string
prevSelector jQuery selector – element to contain the previous control. ex: ‘#prev’ default: ''
options: valid jQuery selector
nextText Text displayed for ‘next’ control default: 'next'
options: string
nextImage Filepath of image used for ‘next’ control. ex: ‘images/next.jpg’ default: ''
options: string
nextSelector jQuery selector – element to contain the next control. ex: ‘#next’ default: null
options: valid jQuery selector
startingSlide Show will start on specified slide. Note: slides are zero based default: 0
options: integer
randomStart If true show will start on a random slide default: false
options: true, false
hideControlOnEnd If true, will hide ‘next’ control on last slide and ‘prev’ control on first default: false
options: true, false
captions Display image captions (reads the image ‘title’ attribute) default: false
options: true, false
captionsSelector jQuery selector – element to contain the captions. ex: ‘#captions’ default: null
options: valid jQuery selector
wrapperClass Classname attached to the slider wraper default: 'bx-wrapper'
options: string
easing Used with jquery.easing.1.3.js – see http://gsgd.co.uk/sandbox/jquery/easing/ for available options default: 'swing'

Auto

auto Make slide transitions occur automatically default: false
options: true, false
pause In ms, the duration between each slide transition default: 3000
options: integer
autoControls Display ‘start’ and ‘stop’ controls for auto show default: false
options: true, false
autoControlsSelector jQuery selector – element to contain the auto controls. ex: ‘#auto-controls’ default: null
options: valid jQuery selector
startText Text displayed for ‘start’ control default: 'start'
options: string
startImage Filepath of image used for ‘start’ control. ex: ‘images/start.jpg’ default: ''
options: string
stopText Text displayed for ‘stop’ control default: 'stop'
options: string
stopImage Filepath of image used for ‘stop’ control. ex: ‘images/stop.jpg’ default: ''
options: string
autoDelay In ms, the amount of time before starting the auto show default: 0
options: integer
autoDirection Direction in which auto show will traverse default: 'next'
options: 'next', 'prev'
autoHover If true show will pause on mouse over default: false
options: true, false
autoStart If false show will wait for ‘start’ control to be clicked to activate default: true
options: true, false

Pager

pager Display a numeric pager default: false
options: true, false
pagerType If ‘full’, pager displays 1,2,3… If ‘short’ pager displays 1 / 4 default: 'full'
options: 'full', 'short'
pagerSelector jQuery selector – element to contain the pager. ex: ‘#pager’ default: null
options: valid jQuery selector
pagerLocation Location of pager default: 'bottom'
options: 'bottom', 'top'
pagerShortSeparator Characters used in between ‘short’ pager numbers. Ex: value ‘of’ would display 1 of 4 default: '/'
options: string
pagerActiveClass Classname attached to the active pager link
default: 'pager-active'
options: string

Multiple display

displaySlideQty Number of slides to display at once default: 1
options: integer
moveSlideQty Number of slides to move at once default: 1
options: integer

Ticker

ticker Continuous motion ticker mode (similar to a news ticker) default: false
options: true, false
tickerSpeed Use a value between 1 and 5000 to determine ticker speed – the smaller the value the faster the ticker speed default: 5000
options: integer
tickerDirection Direction in which ticker show will traverse default: 'next'
options: 'next', 'prev'
tickerHover If true ticker will pause on mouseover default: false
options: true, false

Callbacks

onBeforeSlide Performs provided function before every slide transition function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
// perform actions here
}
onAfterSlide Performs provided function after every slide transition. Note: function will be performed on slider initialization function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
// perform actions here
}
onFirstSlide Performs provided function when the first slide is reached function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
// perform actions here
}
onLastSlide Performs provided function when the last slide is reached function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
// perform actions here
}
onPrevSlide Performs provided function when a ‘previous’ slide transition is performed function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
// perform actions here
}
onNextSlide Performs provided function when a ‘next’ slide transition is performed function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
// perform actions here
}
buildPager Calls provided function on each pager item function(slideIndex, slideHtmlObject){
// return output;
}

Public functions

goToSlide(slideIndex) Got to the specified slide. Note: slide indices are zero based
goToNextSlide() Go to the next slide
goToPreviousSlide() Go to the previous slide
goToFirstSlide() Go to the previous slide
goToLastSlide() Go to the last slide
getCurrentSlide() Returns the current slide index
getSlideCount() Returns the number of total slides
stopShow() Stops an auto show
startShow() Starts an auto show
stopTicker() Stops a ticker show
startTicker() Starts a ticker show
destroyShow() Destroys the active slideshow
reloadShow() Reinitialize a slide show
Posted by: Dhiraj kumar

3 thoughts on “Ultimate jQuery Content Slider Plugin – DG_Slider”

  1. Fantastic website you have here but I was wanting to know if
    you knew of any message boards that cover the same topics talked about here?
    I’d really like to be a part of community where I can get responses from other experienced individuals that share the same interest. If you have any suggestions, please let me know. Appreciate it!

    Reply

  2. Hi Dhiraj,

    Thank you for your amazing work.
    I was wondering if the onLastSlide param works. It doesn’t work when I try to use it.
    Thank you for your help.

    Reply

  3. Hello Dhiraj,
    really it’s so nice.. i like it

    but i got problem in pages the direction=rtl

    it’s work fine in direction=ltr

    i try to resolve it but i couldn’t

    i want it work in pages direction=rtl

    thank much

    Reply

Leave a comment