经过数周的尝试,我终于将我的旋转木马旋转木马放在计算机上,但发现它在移动设备(智能手机和平板电脑)上仍然没有这样做。请有人帮忙。
该网站为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
中设置