text slider jquery – Simple jQuery Text Slider Example

text slider jquery – Best jQuery Slider and slideshow text slider with example and demo. Slide HTML Text in Dom. as well as create a Simple Responsive jQuery Image Slider, Best Slideshow Example.

text slider jquery

jQuery CSS Text Slider : Learn to Jquery Content Slider Code. Nowadays, jquery slider become more popular.

Simple text slider in jQuery

index.html
jQuery.simpleTxtSlider.js Demo

<!DOCTYPE html>
<html>
<head>
<link href="css/simpleTxtSlider/jquery.simpleTxtSlider.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/simpleTxtSlider/jquery.simpleTxtSlider.js"></script>
<script>
$(function(){
  $.simpleTxtSlider($("#pakainfo-txtslider-fade-example"),{'effectType':'fade'});
});
</script>

<style>
div.txtslider{
  margin:10px auto;
  background: linear-gradient(360deg, #5E005E, #306161);
  color:#fff;
  font-size:18px;
}
div.txtslider ul{
  margin:auto;
}
</style>

</head>
<body> 

<header>
<h3>jQuery.simpleTxtSlider.js Demo</h3>
</header>

<h2>fade pattern</h2>
<div id="pakainfo-txtslider-fade-example" class="txtslider">
<ul>
<li>How To Create a Quotes Slideshow ....</li>
<li>Learn how to create a responsive slideshow with CSS and JavaScript.</li>
<li>How can insert j query slider in dream weaver 8</li>
<li>WordPress Slideshow with Text</li>
<li>Displaying Text Over Image Slides</li>
</ul>
</div>
</body>
</html>

A demo of roll pattern

index.html

<!DOCTYPE html>
<html>
<head>
<link href="css/simpleTxtSlider/jquery.simpleTxtSlider.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/simpleTxtSlider/jquery.simpleTxtSlider.js"></script>
<script>
$(function(){
$.simpleTxtSlider($("#pakainfo-txtslider-roll-example"),{
  delay : 2000,
  effectType : 'roll'
});
  
});
</script>

<style>
div.txtslider{
  margin:10px auto;
  background: linear-gradient(45deg, #5E005E, #306161);
  color:#fff;
  font-size:18px;
}
div.txtslider ul{
  margin:auto;
}
</style>

</head>
<body> 


<h2>A demo of roll pattern</h2>
<div id="pakainfo-txtslider-roll-example" class="txtslider">
<ul>
<li>How To Create a Quotes Slideshow ....</li>
<li>Learn how to create a responsive slideshow with CSS and JavaScript.</li>
<li>How can insert j query slider in dream weaver 8</li>
<li>WordPress Slideshow with Text</li>
<li>Displaying Text Over Image Slides</li>
</ul>
</div>

</body>
</html>

A demo of slide pattern

index.html

<!DOCTYPE html>
<html>
<head>
<link href="css/simpleTxtSlider/jquery.simpleTxtSlider.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/simpleTxtSlider/jquery.simpleTxtSlider.js"></script>
<script>
$(function(){
$.simpleTxtSlider($("#pakainfo-txtslider-slide-example"),{
  delay : 2500,
  effectType : 'slide',
  speed : 1500
});
  
});
</script>

<style>
div.txtslider{
  margin:10px auto;
  background: linear-gradient(45deg, #5E005E, #306161);
  color:#fff;
  font-size:18px;
}
div.txtslider ul{
  margin:auto;
}
</style>

</head>
<body> 


<h2>A demo of slide pattern</h2>
<div id="pakainfo-txtslider-slide-example" class="txtslider">
<ul>
<li>How To Create a Quotes Slideshow ....</li>
<li>Learn how to create a responsive slideshow with CSS and JavaScript.</li>
<li>How can insert j query slider in dream weaver 8</li>
<li>WordPress Slideshow with Text</li>
<li>Displaying Text Over Image Slides</li>
</ul>
</div>

</body>
</html>

css/simpleTxtSlider/jquery.simpleTxtSlider.css

.txtslider {
  margin: 0 auto;
  padding: 10px;
  width: 600px;
  text-align: left;
  border: #ccc 1px solid;
  position: relative;
  overflow: hidden;
  background-color:#ffffff;
}

.txtslider ul {
  width: 100%;
  position: relative;
}

.txtslider ul li {
  width: 100%;
  display: none;
}

Don’t Miss : jQuery range slider with 2 handles

Read Also:  Show country state city dropdown select box using javascript

js/simpleTxtSlider/jquery.simpleTxtSlider.js

(function($) {
    $.simpleTxtSlider = function(element, options) {
        var defaults = {
            speed: 1000,
            delay: 3000,
            easing: 'swing',
            effectType: 'slide'
        }
        var param = {
            'ul': '',
            'li': '',
            'initList': '',
            'ulWidth': '',
            'liHeight': '',
            'txtsliderHook': 'txtsliderHook',
            'effect': {}
        }
        var bestslider = this;
        bestslider.settings = {}
        var $element = $(element),
            element = element;
        bestslider.init = function() {
            bestslider.settings = $.extend({}, defaults, options);
            param.ul = element.children('ul');
            param.li = element.find('li');
            param.initList = element.find('li:first');
            param.ulWidth = param.ul.width();
            param.liHeight = param.li.height();
            element.css({
                height: (param.liHeight)
            });
            param.li.css({
                top: '0',
                left: '0',
                position: 'absolute'
            });
            //dispatch
            switch (bestslider.settings.effectType) {
                case 'fade':
                    bestslider.effect.fade();
                    break;
                case 'roll':
                    bestslider.effect.roll();
                    break;
                case 'slide':
                    bestslider.effect.slide();
                    break;
            }
            bestslider.effect.exec();
        }
        bestslider.effect = {};
        bestslider.effect.exec = function() {
            param.initList.css(param.effect.init.css)
                .animate(param.effect.init.animate, bestslider.settings.speed, bestslider.settings.easing)
                .addClass(param.txtsliderHook);
            if (element.find(param.li).length > 1) {
                setInterval(function() {
                    element.find('.' + param.txtsliderHook)
                        .animate(param.effect.start.animate, bestslider.settings.speed, bestslider.settings.easing)
                        .next()
                        .css(param.effect.next.css)
                        .animate(param.effect.next.animate, bestslider.settings.speed, bestslider.settings.easing)
                        .addClass(param.txtsliderHook)
                        .end()
                        .appendTo(param.ul)
                        .css(param.effect.end.css)
                        .removeClass(param.txtsliderHook);
                }, bestslider.settings.delay);
            }
        }
        bestslider.effect.fade = function() {
            param.effect = {
                'init': {
                    'css': {
                        display: 'block',
                        opacity: '0'
                    },
                    'animate': {
                        opacity: '1',
                        zIndex: '98'
                    }
                },
                'start': {
                    'animate': {
                        opacity: '0'
                    }
                },
                'next': {
                    'css': {
                        display: 'block',
                        opacity: '0',
                        zIndex: '99'
                    },
                    'animate': {
                        opacity: '1'
                    }
                },
                'end': {
                    'css': {
                        display: 'none',
                        zIndex: '98'
                    }
                }
            }
        }
        bestslider.effect.roll = function() {
            param.effect = {
                'init': {
                    'css': {
                        top: '3em',
                        display: 'block',
                        opacity: '0'
                    },
                    'animate': {
                        top: '0',
                        opacity: '1',
                        zIndex: '98'
                    }
                },
                'start': {
                    'animate': {
                        top: '-3em',
                        opacity: '0'
                    }
                },
                'next': {
                    'css': {
                        top: '3em',
                        display: 'block',
                        opacity: '0',
                        zIndex: '99'
                    },
                    'animate': {
                        top: '0',
                        opacity: '1'
                    }
                },
                'end': {
                    'css': {
                        zIndex: '98'
                    }
                }
            }
        }
        bestslider.effect.slide = function() {
            param.effect = {
                'init': {
                    'css': {
                        left: (200),
                        display: 'block',
                        opacity: '0'
                    },
                    'animate': {
                        left: '0',
                        opacity: '1',
                        zIndex: '98'
                    }
                },
                'start': {
                    'animate': {
                        left: (-(200)),
                        opacity: '0'
                    }
                },
                'next': {
                    'css': {
                        left: (param.ulWidth),
                        display: 'block',
                        opacity: '0',
                        zIndex: '99'
                    },
                    'animate': {
                        left: '0',
                        opacity: '1'
                    }
                },
                'end': {
                    'css': {
                        zIndex: '98'
                    }
                }
            }
        }
        bestslider.init();
    }
    $.fn.simpleTxtSlider = function(options) {
        return this.each(function() {
            if (undefined == $(this).data('simpleTxtSlider')) {
                var bestslider = new $.simpleTiecker(this, options);
                $(this).data('simpleTxtSlider', bestslider);
            }
        });
    }
})(jQuery);

I hope you get an idea about text slider jquery.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.