自定义轮播显示四个始终位于屏幕中心的项目

时间:2014-06-24 11:16:32

标签: jquery carousel responsive-slides

我已经设法从我用于滑块的代码构建自定义轮播。\

现在一切正常,但我遇到了一个小问题!以下是我到目前为止: - 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();
})

任何有关如何做到这一点的帮助或建议都会很棒。谢谢善良的人。

0 个答案:

没有答案
相关问题