OK, slightly complex question. I have a carousel on my page (using CarouFredSel plugin) sometimes this carousel will have 3 images in it, sometimes 4 or more. The carousel is set to display 3 images at a time, with the center image being larger.
My issue is this, if I only have 3 images, I can't slide the carousel left and right in order to make the adjacent images central (and therefore larger). To get around this I add a dummy image (i.e. just write <img src="" /> so the slider thinks there are 4 images, this allows me to slide, however, I want to be able to stop the slider before getting to the 4th 'dummy' image.
My HTML is as follows:
<div id="wrapper">
<div id="carousel">
<img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas.jpg" />
<img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Birds.jpg" />
<img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/christmas_alt2.jpg" />
<img src="" />
</div>
<a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next" href="#">></a>
</div>
and jQuery for the slider plugin:
$(function() {
var _center = {
width: 275,
height: 390,
marginLeft: 0,
marginTop: 0,
marginRight: 0
};
var _left = {
width: 140,
height: 200,
marginLeft: 0,
marginTop: 100,
marginRight: 20
};
var _right = {
width: 140,
height: 200,
marginLeft: 20,
marginTop: 100,
marginRight: 0
};
var _outLeft = {
width: 100,
height: 100,
marginLeft: 150,
marginTop: 200,
marginRight: -150
};
var _outRight = {
width: 100,
height: 100,
marginLeft: 0,
marginTop: 200,
marginRight: 0
};
$('#carousel').carouFredSel({
auto: false,
prev: {
button: "#prev2",
key: "left"
},
swipe: true,
width: 597,
height: 392,
align: false,
items: {
visible: 3,
width: 100
},
next: {
button: "#next2",
key: "right",
items: 1,
duration: 400,
onBefore: function( data ) {
data.items.old.eq( 0 ).animate(_outLeft);
data.items.visible.eq( 0 ).animate(_left).removeClass('center right').addClass('left');
data.items.visible.eq( 1 ).animate(_center).addClass('center').removeClass('right left');
data.items.visible.eq( 2 ).animate(_right).css({ zIndex: 1 }).removeClass('left center').addClass('right');
data.items.visible.eq( 2 ).next().css(_outRight).css({ zIndex: 0 });
setTimeout(function() {
data.items.old.eq( 0 ).css({ zIndex: 1 });
data.items.visible.eq( 0 ).css({ zIndex: 2 });
data.items.visible.eq( 1 ).css({ zIndex: 3 });
data.items.visible.eq( 2 ).css({ zIndex: 2 });
}, 200);
}
},
prev: {
button: "#prev2",
key: "left",
items: 1,
duration: 400,
onBefore: function( data ) {
data.items.old.eq( 2 ).animate(_outRight);
data.items.visible.eq( 0 ).animate(_left).css({ zIndex: 1 }).removeClass('center right').addClass('left');
data.items.visible.eq( 0 ).prev().css(_outLeft).css({ zIndex: 0 });
data.items.visible.eq( 1 ).animate(_center).addClass('center').removeClass('right left');
data.items.visible.eq( 2 ).animate(_right).removeClass('left center').addClass('right');
setTimeout(function() {
data.items.old.eq( 2 ).css({ zIndex: 1 });
data.items.visible.eq( 2 ).css({ zIndex: 2 });
data.items.visible.eq( 1 ).css({ zIndex: 3 });
data.items.visible.eq( 0 ).css({ zIndex: 2 });
}, 200);
}
}
});
$('#carousel').children().eq( 0 ).css(_left).css({ zIndex: 2 }).addClass('left').removeClass('center right');
$('#carousel').children().eq( 1 ).css(_center).css({ zIndex: 3 }).addClass('center').removeClass('right left');
$('#carousel').children().eq( 2 ).css(_right).css({ zIndex: 2 }).addClass('right').removeClass('center left');
$('#carousel').children().eq( 3 ).css(_outRight).css({ zIndex: 1 });
$('#carousel').children().eq( 4 ).css(_outLeft).css({ zIndex: 1 });
});
and here is a JSFiddle, so you can see what I mean: http://jsfiddle.net/hvZzc/1/
you need to add the minimum to your code:
"Minimum: Number The minimum number of items needed to create a carousel. If null, the number for items.visible is inherited and increased by 1." ( from their website)
adding that tag to your code this one will look like:
items: {
visible: 3,
minimum: 3,
width: 100
},
instead of:
items: {
visible: 3,
width: 100
},