Easy jQuery Text Slider using easyslider

We can make cool javascript text slider easily using jQuery easyslider plugin. By example, jQuery easyslider works for image slider, but we can customize it to create text slider like this one…

This is the html structure for text slider

<div id="s-prev"> <!-- previous button -->
	<a href="#fp-blog" id="s-prev-link"><img src="public/image/frontpage/prev.jpg" alt="" /></a>
</div>
<div id="slider">
	<ul>
		<li>
			<div class="s-item">
				<div class="s-title">
					Latest Blog Entries
				</div>
				<div class="s-content">
					<b>Title 1 .</b> Lorem ipsum dolor sit amet... <a href="#">read more</a>
				</div>
			</div>
		</li>
		<li>
			<div class="s-item">
				<div class="s-title">
					Latest Blog Entries
				</div>
				<div class="s-content">
					<b>Title 1 .</b> Lorem ipsum dolor sit amet... <a href="#">read more</a>
				</div>
			</div>
		</li>
		<li>
			<div class="s-item">
				<div class="s-title">
					Latest Blog Entries
				</div>
				<div class="s-content">
					<b>Title 1 .</b> Lorem ipsum dolor sit amet... <a href="#">read more</a>
				</div>
			</div>
		</li>
	</ul>
</div>
<div id="s-next"> <!-- next button -->
	<a href="#fp-blog" id="s-next-link"><img src="public/image/frontpage/next.jpg" alt="" /></a>
</div>

And this is the javascript code for easyslider

$('#slider').easySlider({
	auto : true,
	continuous : true,
	prevId : 's-prev-link',
	nextId  : 's-next-link',
	controlsShow : false, //hide default previous and next control, replace with custom control
});

Unfortunately, click both previous and next button do not make easyslider display previous or next slide immediately. My easyslider version is 1.7, and after a couple of searches, I found suspicious code on easySlider1.7.js line 108

$("a","#"+options.nextId).click(function(){
	animate("next",true);
});
$("a","#"+options.prevId).click(function(){
	animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
	animate("first",true);
});
$("a","#"+options.lastId).click(function(){
	animate("last",true);
});

I modified it into

$("a#"+options.nextId).click(function(){
	animate("next",true);
});
$("a#"+options.prevId).click(function(){
	animate("prev",true);
});
$("a#"+options.firstId).click(function(){
	animate("first",true);
});
$("a#"+options.lastId).click(function(){
	animate("last",true);
});

And gladly previous and next button work find afterwards. Have questions? Fell free to ask 🙂