More examples
You are now viewing this carousel:
HTML
<div id="wrapper"> <div id="carousel"> <img src="img/large/rally1.jpg" alt="rally1" width="600" height="400" border="0" /> <img src="img/large/rally2.jpg" alt="rally2" width="600" height="400" border="0" /> <img src="img/large/rally3.jpg" alt="rally3" width="600" height="400" border="0" /> <img src="img/large/rally4.jpg" alt="rally4" width="600" height="400" border="0" /> </div> <div id="pager"></div> </div>
JavaScript
$(function() {
$('#carousel').carouFredSel({
items: 1,
auto: false,
scroll: {
fx: 'none'
},
pagination: {
container: '#pager',
event: 'mouseenter',
anchorBuilder: function(nr) {
var src = $(this).attr('src').replace('/large/', '/small/');
return '<img src="'+ src +'" border="0" />';
}
}
});
});
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
width: 700px;
height: 400px;
margin: -200px 0 0 -350px;
position: absolute;
left: 50%;
top: 50%;
}
#carousel {
width: 600px;
height: 400px;
overflow: hidden;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
#carousel img {
display: block;
}
#pager {
width: 110px;
overflow: hidden;
position: absolute;
z-index: 2;
bottom: -10px;
right: 0;
}
#pager img {
display: block;
float: left;
width: 70px;
height: 70px;
padding: 10px 5px 10px 30px;
opacity: 0.7;
}
#pager img.selected {
background: url(img/thumb-selected.png) 0 0 no-repeat transparent;
width: 80px;
height: 80px;
padding: 10px 10px 10px 20px;
opacity: 1;
}
Description:
A basic image swapping slideshow example that will swap the lare image onmouseover of one of the thumbnails by creating a carousel with the fx-option set to none.
This carousel is created for your inspiration, using only the jQuery-library and the jQuery.carouFredSel-plugin.
you may use it for free in all of your projects.
Currently showcasing 72 cool carousels, so go ahead and pick one to view:
All carousels on this website are created for your inspiration, using only the jQuery-library and the jQuery.carouFredSel-plugin.
They have been tested to work on FireFox and Chrome.
Y O U R B R O W S E R I S O L D ,
U P D A T E I T !