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 🙂

2 thoughts on “Easy jQuery Text Slider using easyslider”

  1. YES! I’m wrapping up a marathon coding session, and decided to incorporate Easy Slider into my project…but I couldn’t get my custom controls to work! I found your article after a Google search, replaced the code at line 108, and it works!

    Thank you, thank you, this saved me a bunch of debugging when I’m really tired!!! 🙂

    Will send a tweet to the developer to point him to your blog…it’s been over a year, but I think the version I have is the newest, so the bug is still there.

    Talia

Leave a Reply

Your email address will not be published. Required fields are marked *