经过数周的尝试,我终于将我的旋转木马旋转木马放在计算机上,但发现它在移动设备(智能手机和平板电脑)上仍然没有这样做。请有人帮忙。

该网站为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;
}


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

非常感谢您的帮助。

最佳答案

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

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


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

10-08 19:22