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
jQuery.simpleTxtSlider.js Demo
fade pattern
A demo of roll pattern
index.html
A demo of roll pattern
A demo of slide pattern
index.html
A demo of slide pattern
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
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.