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

Also Read This ๐Ÿ‘‰   jquery array Basics- All about jquery Arrays Best Example and Demo - Top 10+ PHP functions

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.