Caroufredsel不以移动设备为中心

Question

经过几个星期的尝试，我终于让我的caroufredsel carousel集中在计算机上，结果发现它仍然不能在移动设备(智能手机和平板电脑)上这样做。有人能帮上忙吗。

该网站是http://www.suffolkwindowbox.co.uk -在大多数页面上有不同的滑块，但它们都有相同的设置。

caroufredsel是插件。

脚本是：

jQuery(document).ready(function($) {                
    function runCarousel() {                        
    $("#caroufredsel-keCZE-266").carouFredSel({ 
        circular:   true,
        infinite:   true,
        responsive: false,
        direction:  "left",
        align:  "center",
        width:  "100%",
        height: 560,
        items: {
           visible: 3,
           start: -1,
        },
        scroll: {
           items: 1,
           fx:          "scroll",
           easing:  "swing",
           duration:     1000,
           pauseOnHover: true,
        },
        auto: {
          play: true,
          timeoutDuration:  5000,
        },
        prev: {
          button: "#dev7-caroufredsel-wrapper-keCZE-266 .dev7-caroufredsel-prev",
          key:           null,
        },
        next: {
          button: "#dev7-caroufredsel-wrapper-keCZE-266 .dev7-caroufredsel-next",
          key:          null,
        },

        pagination: { container:    "#dev7-caroufredsel-wrapper-keCZE-266 .dev7-caroufredsel-pag", anchorBuilder   : null, },
        swipe: { onTouch:   true },

    });     
    }                                               
    $("#caroufredsel-keCZE-266").imagesLoaded(runCarousel);     
});                                                 

然后我添加了一些额外的css：

.dev7-caroufredsel-wrapper {
        background-color: #fff;
        height: 560px;
        width: 100%;
        overflow: hidden;
        position: relative;
        top: 50%;
        left: 0;
        align-content:center !important;
}

.dev7-caroufredsel-carousel img {
    display: block;
    float: left;
    margin-left: 0;
}

.dev7-caroufredsel-prev, .dev7-caroufredsel-next {
            background-color: rgba(255, 255, 255, 0.7);
            display: block;
            height: 560px;
            width: 45.4%;
            top: 0;
            position: absolute;
}

.dev7-caroufredsel-prev:hover, .dev7-caroufredsel-next:hover {
            background-color: #fff;
            background-color: rgba(255, 255, 255, 0.8);
}

.dev7-caroufredsel-prev {
            left: -495px;
}

.dev7-caroufredsel-next {
            right: -495px;
}

.dev7-caroufredsel-pag {
            margin-left: -550px;
            position: absolute;
            left: 50%;
            bottom: 10px;
}

.dev7-caroufredsel-pag a {
            border: 2px solid #fff;
            border-radius: 10px;
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px 0 0;
}

.dev7-caroufredsel-pag a:hover {
            background-color: rgba(255, 255, 255, 0.5);
}

.dev7-caroufredsel-pag a span {
            display: none;
}

.dev7-caroufredsel-pag a.selected {
            background-color: #fff;
}

如果我没有包含足够的细节，请原谅我，这是我在here...if上的第一篇帖子，如果你还需要什么，请尽管问。

非常感谢你的帮助。

Answer 1

我觉得真正的问题是关于寻呼机-try的改变：

.dev7-caroufredsel-pag {
    margin-left: 0px;
    position: absolute;
    left: 8%;
    bottom: 10px;
}

为什么不在function runCarousel() responsive: true中设置