我已经设法从我用于滑块的代码构建自定义轮播。\
现在一切正常,但我遇到了一个小问题!以下是我到目前为止: - http://goo.gl/lw4FVS
我想要的是4张幻灯片始终显示在中央无褪色区域内。正如你所看到的那样,它只是偏离中心。
无论您使用什么屏幕尺寸,我都必须在中心显示四个旋转木马项目。
我的jquery代码如下: -
var carouselsliderWidth = 0;
var carouselsliderWidth = 0;
var carouselimageWidth = $('.carousel-slider .carousel-slide:first').width();
var carouselcount = 0;
var carouselimageCount = 0;
var carouselimageLeft = 0;
carouselrepositionImages();
$('.carousel-slider .carousel-slide').each(function(){
carouselsliderWidth = carouselsliderWidth + $(this).width();
});
$('.carousel-slider').width(carouselsliderWidth);
//alert(carouselimageWidth);
function carouselrepositionImages() {
carouselimageLeft = 234 - (($(window).width() - 234) / 2 );
$('.carousel-slider .carousel-slide').css('left','-'+carouselimageLeft+'px');
}
$('a.carousel-move-left').click(function(){
if($('.carousel-slider .carousel-slide:not(":animated")').length != 0) {
$('.carousel-slider .carousel-slide:first').addClass('carousel-move-0');
carouselfirstImage = $('.carousel-slider').children('.carousel-slide.carousel-move-0').clone();
$('.carousel-slider').width(carouselsliderWidth+carouselimageWidth);
$('.carousel-slider').append(carouselfirstImage);
$('.carousel-slider .carousel-slide').animate({'left':'-='+carouselimageWidth}, 500 ,function(){
$('.carousel-slider .carousel-slide:last').removeClass('carousel-move-0');
$('.carousel-slider').children('.carousel-slide.carousel-move-0').remove();
$('.carousel-slider .carousel-slide').css('left','-'+carouselimageLeft+'px');
$('.carousel-move-0').removeClass('carousel-move-0');
})
}
return false;
});
$('a.carousel-move-right').click(function(){
if($('.carousel-slider .carousel-slide:not(":animated")').length != 0) {
$('.carousel-slider .carousel-slide:last').addClass('carousel-move-5');
carouselfirstImage = $('.carousel-slider').children('.carousel-slide.carousel-move-5').clone();
$('.carousel-slider').width(carouselsliderWidth+carouselimageWidth);
$('.carousel-slider').prepend(carouselfirstImage);
$('.carousel-slider .carousel-slide').css('left','-'+(carouselimageLeft+carouselimageWidth)+'px');
$('.carousel-slider .carousel-slide').animate({'left':'+='+carouselimageWidth}, 500 ,function(){
$('.carousel-slider .carousel-slide:first').removeClass('carousel-move-5');
$('.carousel-slider').children('.carousel-slide.carousel-move-5').remove();
$('.carousel-slider .carousel-slide').css('left','-'+carouselimageLeft+'px');
$('.carousel-move-5').removeClass('carousel-move-5');
})
}
return false;
});
$(window).resize(function(){
carouselrepositionImages();
//resizeOverlay();
})
任何有关如何做到这一点的帮助或建议都会很棒。谢谢善良的人。