Shares

jQuery – Lite content slider Plugin ← jQuery Plugins

- 37,349 views - 104 Comments

Jquery lite content slider is a really a light weight content slider with the ability to slide and any content with high customizability.

Download,http://www.aakashweb.com/resources/downloads/jquery.lite-content-slider.zip

  • Features
  • Demo
  • Documentation
  • Download

Features

  • Light weight.
  • Cross browser support.
  • No CSS and programming knowledge required.
  • Can add unlimited slides.
  • Play/Pause feature.
  • Can slide any element any where.

Donate and Support with PayPal

If you find my products useful, then just donate and support my work. It will be an encouragement !

$

Demo

Click the button below to view the example and demonstrations of lite content slider plugin.

Download

Click the button below to download.

Documentation

Basic Usage

$('.sliderWrap').liteSlider({
	content : '.sliderContent',	// The sliding content selector. Can be a list also. eg:li
	width : 760,			// Width of the slider
	height : 300,			// Height of the slider
	autoplay : true,		// Autoplay the slider. Values, true & false
	delay : 3,			// Transition Delay. Default 3s
	buttonsClass : 'buttons',	// Button's class
	activeClass : 'active',		// Active class
	controlBt : '.control',		// Control button selector
	playText : 'Play',		// Play text
	pauseText : 'Stop'		// Stop text
});

Steps in creating a slider

  1. Include Jquery and this plugin to the document head.
  2. Create a wrapper for the sliding contents with <div> or <span> of any class / ID . eg: .sliderWrap
    <div class="sliderWrap">
    
    </div>
  3. Create as many sliding contents within the main wrapper of same class eg: .sliderContent
    <div class="sliderWrap">
         <div class="sliderContent">
              Content 1 goes here
         </div>
    	 
         <div class="sliderContent">
              Content 2 goes here
         </div>
    	 
         <div class="sliderContent">
              Content 3 goes here
         </div>
    	 
         <div class="sliderContent">
              Content 4 goes here
         </div>
    	 
    </div>
  4. Attach the plugin to the slider wrapper, with the property content to the class of the sliding element.
  • Pingback: 14 Outstanding jQuery Plugins & Tutorials « The Creative Project

  • Bazil Xxl

    Hi, how I can stop sliding when I do MouseOver and start sliding again when I do MouseOut?

  • Bazil Xxl

    Ok I have it … I little bit modified your code …

  • Anonymous

    Controlling the actual slide speed (not the delay) would be a nice improvement if it’s not too hard to implement

    • al

      Yes, is there a way to control the speed at all here?

  • Anonymous

    Actually, it is very easy.. in the non-minified version, search for: .animate({ left: animateLeft });change to:.animate({ left: animateLeft },2000);(2 seconds to slide).. You may want to add it as a variable, so that it can be set as a plugin parameter.

  • Dan

    Do you have plans for a Next/Previous option?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Yes. Soon this feature will be implemented

  • Konstantin

    Thank you for sharing. Very nicely done and it seems to work equally good in 4 Chrome, Firefox, Safari and even Internet Explorer!

    Two desirable features, though, are:
    1. Pause on mouse over, resume on mouse out;
    2. Loop the slides so the animation is always in one direction. As it is right now – once last slide is reached animation changes from left-to-right to right-to-left to get back to the first slide.

  • Pingback: jQuery Content Slider: Inhalte nachladen - XHTMLforum

  • Don

    hi, i have a problem in IE7 and IE8. the slides do not slide, the control buttons however switch after few seconds. any ideas? thanks :)

  • Pingback: Jquery slider

  • Jennifer

    can it be a vertical slider that works just like this?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      I think a vertical slider is not possible, but some tweaking in
      the source code will help this.

  • Pingback: 190 + best! jQuery slider tools – Part (II) - Pixel2Pixel Design

  • leo

    Hi, first I love your light weight slider. I just want to know how to have 100% width rather than pixels
     
    width : 100% something 

    TIA

    • leo

      any help?

      width : (“100%”), worked but the sliding stopped

      • http://www.aakashweb.com/ Aakash Chakravarthy

        I think there is a lot more work to tweak this thing. Ill fix it in the next version. For now please use the current version. Thank you..

        • leo

          awesome, thank you! ill look forward to that 100% width

  • Ryan

    I’ve copied your code over exactly, but the control buttons aren’t working ie) I can’t see them. any ideas?

    • Ryan

      I went into the HTML and it looks like the plugin just isn’t generating the buttons for some reason…

      • http://www.aakashweb.com/ Aakash Chakravarthy

        Can you please give me the URL of the page where it is used ?

  • mdda

    (Whoops)

    And all instances of ‘Interval’ should be ‘Timeout’ instead : so that the animation triggers the next interval, rather than the animations being triggered ‘external’ to the jquery code that runs them.

    Martin :-)

  • http://www.aakashweb.com/ Aakash Chakravarthy

    Thanks for the info…. soon changes will be made

  • Gulam Mustafa

    Hi,

    Its really great plugin and its super light.

    I tried using two sliders on same page but it didn’t worked.
     

    • http://www.aakashweb.com/ Aakash Chakravarthy

      It should work. Please give the URL of the page where you use.

  • cymon

    Uncaught TypeError: Cannot call method ‘split’ of undefined
    jquery.lite-content-slider.js:29

    • http://www.aakashweb.com/ Aakash Chakravarthy

      The element to which you have attached does not exist or the property class is not defined. That may be the reason.

  • Alejandro Benavides

    I have a bug, not sure if it’s something I did. I’m previewing it in chrome.

    When I load the page it works fine. When I go to another tab and then come back to the page, the slider goes crazy. It looks like it is trying to render all the slides that would have happened if I was looking at it the entire time. It eventually relaxes and goes at the normal pace.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Can you please give me the URL ?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Can you please give me the URL ?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Can you please give me the URL ?

      • Alejandro Benavides
      • Alejandro Benavides
        • http://www.aakashweb.com/ Aakash Chakravarthy

          When i saw you site, i didn’t see any crazy things.. Even if i change the tabs, nothing happened and the slider looks good only.

          • Alejandro Benavides

            It still seems to do it. What you have to do to recreate it is:

            1. Open the site in Google Chrome
            2. Open another tab and stay there for about 90 seconds
            3. Go back to the tab and watch the animation. It will zip through the divs rapidly until it catches up.

            Thanks.

          • Alejandro Benavides

            I was able to recreate the incident on video to see. Here is a link: http://www.youtube.com/watch?v=tummVYzKbzo

          • http://www.aakashweb.com/ Aakash Chakravarthy

            Ya, after the video i saw the problem. Its just due to the timer increase when the tab is changes or the timer is added when the tab is changed. Ill soon look out in this issue.
            Thanks for you time !

          • Emeri

            Please let me know when this issue is resolved as well. Thanks!

          • Alejandro Benavides

            If you get a chance, can you email me when you get it updated?

            Thanks!

          • Alejandro Benavides

            If you get a chance, can you email me when you get it updated?

            Thanks!

  • Pingback: jQuery slider tools, 200 best! | Perfect RS

  • henk

    Hi, 

    Is is possible to have an automatic height?

    Thanks

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Sorry, height parameter is strictly required and it structures the slider properly..

  • Emeri

    Hi there. This plugin is perfect for what I needed it for. However, I am using Chrome as well and have experienced the same thing that Alejandro Benavides is describing. When you view another tab and come back to the tab with this plugin, it starts to scroll through each content div rapidly. Is there any way to fix this issue yet?

  • Emeri

    Hi there. This plugin is perfect for what I needed it for. However, I am using Chrome as well and have experienced the same thing that Alejandro Benavides is describing. When you view another tab and come back to the tab with this plugin, it starts to scroll through each content div rapidly. Is there any way to fix this issue yet?

  • Anonymous

    how my i edit the code so it only plays through the slides once instead of repeating?

  • Anonymous

    how my i edit the code so it only plays through the slides once instead of repeating?

  • Anonymous

    how my i edit the code so it only plays through the slides once instead of repeating?

  • Divya Setia

    Solution to problem “Hi there. This plugin is perfect for what I needed it for. However, I am using Chrome as well and have experienced the same thing that Alejandro Benavides is describing. When you view another tab and come back to the tab with this plugin, it starts to scroll through each content div rapidly. Is there any way to fix this issue yet?” is:

    Add following code after init()jQuery(window).blur(function() {
                    pauseSlide();
                });

                jQuery(window).focus(function() {
                    playSlide();
                });

  • Divya Setia

    Solution to problem “Hi there. This plugin is perfect for what I needed it for. However, I am using Chrome as well and have experienced the same thing that Alejandro Benavides is describing. When you view another tab and come back to the tab with this plugin, it starts to scroll through each content div rapidly. Is there any way to fix this issue yet?” is:

    Add following code after init()jQuery(window).blur(function() {
                    pauseSlide();
                });

                jQuery(window).focus(function() {
                    playSlide();
                });

  • Divya Setia

    Solution to problem “Hi there. This plugin is perfect for what I needed it for. However, I am using Chrome as well and have experienced the same thing that Alejandro Benavides is describing. When you view another tab and come back to the tab with this plugin, it starts to scroll through each content div rapidly. Is there any way to fix this issue yet?” is:

    Add following code after init()jQuery(window).blur(function() {
                    pauseSlide();
                });

                jQuery(window).focus(function() {
                    playSlide();
                });

    • Alejandro Benavides

      Excuse my inexperience, but where should I add the code?

      • MikeG

        Try pasting after line 132 “init($(this));” in the file: jquery.lite-content-slider.js

      • MikeG

        Try pasting after line 132 “init($(this));” in the file: jquery.lite-content-slider.js

        • Alejandro Benavides

          Actually it worked after line 148.

  • Jianna91

    Please help! Slider has stopped working, can’t find any errors in code. I’m working with the amplify wordpress theme. Files are at http://www.tech-azur.com/MMR-CMS. Site is supposed to launch on friday!!! 

  • Jianna91

    Please help! Slider has stopped working, can’t find any errors in code. I’m working with the amplify wordpress theme. Files are at http://www.tech-azur.com/MMR-CMS. Site is supposed to launch on friday!!! 

    • http://www.aakashweb.com/ Aakash Chakravarthy

      When i saw your website, the slider was working perfectly…

    • Guest

      Jianna91, did you ever figure out what caused it to stop working? I’m also using the amplify wordpress theme, and the slider stopped working 4-5 days ago as well…

  • Pingback: 200 best jQuery slider tools | Interactive Designer Dubai | Website Design and Development Dubai

  • Aja

    Thanks! nice plugin

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thank you..

  • Sammy98

    Hello. Wonderful script. Thank you for making something so simple and easy to use. Did you get a chance to create a previous/next button? Thank you.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      I’ll try it to add in the next version…

  • http://www.aakashweb.com/ Aakash Chakravarthy

    When i saw you site, i found no problem. Everything was working good…

  • http://twitter.com/bduuzis Didzis Gruznovs

    I edit code and get to stop slider on tab change! Just change some lines. Add variable at top: var a = 0;
    Than change playSlide() function to:
    function playSlide(){ clearInterval(timer); timer = setInterval(function(){ a++;    $div.stop(true,true).css(“sliderContent”, a); autoplay(); }, delay); $(options.controlBt).text(options.pauseText); playStatus = true; }

    • Sonomasinger

       This is great, but where do I add this code exactly? Thanks so much @twitter-78972597:disqus

  • http://twitter.com/bduuzis Didzis Gruznovs

    And to stop on mouse over, than you need to change this if -> if(options.autoplay == true){ to this ->
    if(options.autoplay == true){ $(“div.sliderContent”).mouseover(function() { pauseSlide(); }).mouseout(function(){ playSlide()  }); }else{ pauseSlide(); }

    • http://twitter.com/bduuzis Didzis Gruznovs

      CORRECT!

      if(options.autoplay == true){

      playSlide()
      $(“div.sliderContent”).mouseover(function() {
      pauseSlide();
      }).mouseout(function(){
      playSlide()
      });

      }else{
      pauseSlide();
      }

  • Nickast

    excellent job!!!! If it had the next prev button it will be my favorite slider!!!! Please try to add it!! ;)

  • AlyPax

    How do you replace the play and stop buttons with images instead of text?

  • Pingback: Jquery Slider | INFOXE

  • S Sanket

     Button not working on  IE7

    • http://www.aakashweb.com Aakash Chakravarthy

      Ill check that out !

  • Shepme

    Good Day:
    I have the slider up and running. I notice that alot of users of this slider have heading on top of each picture with a slight opacity. How do I do that?
    Thanks
    Shepard

  • Jathin R Web Developer

    if i add a file upload control some where in the page with your slider it wont work

    • http://www.aakashweb.com/ Aakash Chakravarthy

      hm… this doesn’t interfere with file uploads… it can be due to other reasons, please check that ! 

  • Jathin R Web Developer

    if i add a file upload control some where in the page with your slider it wont work(i meant upload file)

  • Pingback: JQuery Slider Tools, 200 Best – part 2 | Free Website Template Center

  • Pingback: 51 Best jQuery Slider Tools Part 2 | Oktilyon Teknoliyon

  • Muhammad Kashif Shabbir

    Cant see buttons and controls!

  • Muhammad Kashif Shabbir

    Cant see buttons and controls!

    • Muhammad Kashif Shabbir

      Got it!
      The Hard Way!

  • http://twitter.com/khanimdad Imdad Ali Khan

    buttons/controls are not visible, what could be the possible reason?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      You should use 


      <div class="buttonsWrap">      <a class="buttons active" href="#"></a>     <a class="buttons" href="#"></a>     <a class="buttons" href="#"></a>     <a class="buttons" href="#"></a>     <a class="buttons" href="#"></a>     <a class="buttons" href="#"></a>     <a class="buttons" href="#"></a>     <a class="buttons" href="#"></a>     <a class="control" href="#">Play</a>     </div>

      According to the number of slides. After that, give the button’s class name as the selector to the “buttonsClass” property.

  • Mansoor

    Hello , I have installed the Amplify theme . Its really nice, the only problem am facing is with contentslider . It goes crazy after certain time if remained open in background tab .

    Any fix for this ,

    Urgent response will be highly appreciated.

    Thanks.

    • Mansoor

       am still waiting … Is this issue been fixed??

  • ebuoe

    AUTOPLAY ERROR :::::::: thanks a lot for this the slider,I installed it and it is working fine , but when i have autoplay on false , clicking any of the slides automatically makes it to scroll automatically ……

    • http://www.aakashweb.com/ Aakash Chakravarthy

      I hear many complaints on this. Ill try to fix that soon.

  • slipsliding

    really like the slider, just one thing would make it exactly what I’m looking for …. that is …. to stop the multiple fly-bys of slides when going from say, first to third.  Any way to do this easily?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Currently it cannot be done, as the code is written to act like that. May be in the next version, Ill try to do a fix on that.

  • Herbertgatchalian

    how do you add aa next and revious button 

  • Guest

    Something I run into is if you use a other change the controlBt : ‘input’ into controlBt : ‘#give elementID’.

    Anyone run into a problem that the slider skips a slide? Number of slides and buttons are correct.

  • Guest

    I have four slides total. I have a top nav that has four buttons that slide perfectly.
    I also have the first slide that has small buttons that should slide to the other 3 slides. This makes it to where there are 7 total buttons on the page.
    How do I make the 3 extra buttons not go to slides that do not exist.

  • Pingback: Awesome 200, JQuery Slider Tools! « creative2slice

  • Pingback: 51 Best jQuery Slider Tools Part 2Best Smashing | Best Smashing

  • Pingback: 200 BEST JQUERY IMAGE SLIDER PLUGIN | Rohidas Vitthal Sanap: Web Developer/Designer

  • http://www.facebook.com/sandeep.patkar Sandeep Patkar

    Hello, can you please tell me how can i make the slides random on load or refresh. thanks

  • Pingback: A1JavaScripts.com » Lite Content Slider Plugin – Slide any content now with Lite Content Slider

  • Pingback: jQuery Slider para imagens veja do melhores Plugins e Tutoriais – Site para Empresas – Blog sobre Internet e Criação de Site

  • Pingback: 175 Melhores Plugins Novidades em jQuery Sliders – Site para Empresas – Blog sobre Internet e Criação de Site

  • Pingback: 175 Melhores Plugins Novidades em jQuery Sliders – Site para Empresas – Blog sobre Internet e Criação de Site

  • Pingback: 200 Best Image Slider jQuery Plugins