Create Simple Text Slider / Rotator With CSS, Jquery Without Plugin

In this tutorial I am going to show you how to create simple text slider / rotator with CSS, Jquery without plugin. It is helpful for adding auto rotational testimonial on your website or you can slide any text based div you want with auto rotation and custom rotation speed and timer along with next previous buttons.

Create Simple Text Slider / Rotator With CSS, Jquery

HTML

Markup html for text slider in unordered list, In the below example under div container 3 li has been created with some quotes with author name and we need to auto slide these quotes after page load.

  

    
<> 
    

        

            

                

                    
"Be who you are and say what you feel because those who mind don't matter and those who matter don't mind."

                    
                
                

                    
Dr. Seuss
                
            

 

                

                    
"Life has taught us that love does not consist in gazing at each other, but in looking outward together in the same direction."

                    
                
                

                    
Antoine de Saint-Exupery
                
            

 

                

                    
"Love is like a friendship caught on fire. In the beginning a flame, very pretty, often hot and fierce, but still only light and flickering. As love grows older, our hearts mature and our love becomes as coals, deep-burning and unquenchable."

                    
                
                

                    
Bruce Lee
                
            
                    
    

CSS

Add some stylesheet on page for styling your text slider.

JS

Finally write jquery code to make you text slider movable with custom speed, In below code you can set slider speed as per your need.

See live demo and download source code.

DEMO | DOWNLOAD

The above code written by Ty Stelmach, you can follow their official repository for future updates.