I am currently working on customizing a jQuery slider similar to NivoSlider. I want to replace the default images with my own controls.
Here is what I have in HTML:
<div id="slider" class="nivoSlider">
<img src="img/slider/start1.jpg" alt="" />
<img src="img/slider/start2.jpg" alt=""/>
<img src="img/slider/start3.jpg" alt="" />
</div>
<!--controls-->
<ul class="lista">
<li class="first"></li><!--thumbnail here on background image-->
<li class="second"></li>
<li class="third"></li>
</ul>
By clicking on, for example, the second li element, I aim to change the main image in the slider and its corresponding thumbnail. The code snippet below shows how I've managed so far (I'm relatively new to JavaScript):
$('.first').click(function(){
$(this).css('background', 'url(img/slider/1min_a.jpg)');
$('.second').css('background', 'url(img/slider/2min.jpg)');
$('.third').css('background', 'url(img/slider/3min.jpg)');
});
$('.second').click(function(){
$(this).css('background', 'url(img/slider/2min_a.jpg)');
$('.first').css('background', 'url(img/slider/1min.jpg)');
$('.third').css('background', 'url(img/slider/3min.jpg)');
});
$('.third').click(function(){
$(this).css('background', 'url(img/slider/3min_a.jpg)');
$('.first').css('background', 'url(img/slider/1min.jpg)');
$('.second').css('background', 'url(img/slider/2min.jpg)');
});
I have two questions:
1. How can I simplify this code?
2. How can I incorporate a fadeOut/fadeIn effect to prevent the "blink" when changing backgrounds?