javascript - Caroufredsel 不以移动设备为中心

Question

经过数周的尝试，我终于让我的 caroufredsel 轮播以计算机为中心，却发现它仍然无法在移动设备(智能手机和平板电脑)上运行。请任何人帮忙。

网址是http://www.suffolkwindowbox.co.uk - 大多数页面上都有不同的 slider ，但它们都具有相同的设置。

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;
}

如果我没有提供足够的详细信息，请原谅我，这是我在这里的第一篇文章...如果您需要其他任何内容，请尽管询问。

非常感谢您的帮助。

Answer 1

我觉得问题真的出在寻呼机上-尝试更改:

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

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