HTML/CSS -轮播幻灯片中的多个图像
HTML/CSS -轮播幻灯片中的多个图像
提问于 2021-03-01 09:22:07
我正在尝试创建一次显示4个图像的幻灯片，然后您可以单击左侧和右侧的箭头以转到下一组图像。当我试图在google chrome中打开我的html文件时，所有的图片都是垂直堆叠在一起，而不是水平堆叠在一起，并且我的箭头没有显示出来。我不知道为什么会这样。我试着查找和测试滑块的其他示例，但它们都做了相同的事情，图像垂直堆叠在一起，没有一个箭头显示出来。
我的页面有一个背景图像，也必须有1920px 1100px的大小。我不确定这是否是可能影响它的因素。如果你能帮我解决这个问题，我将不胜感激。
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background-image: url("background.png");
background-repeat: no-repeat;
background-size: 1920px 1100px;
margin: 0;
overflow: visible;
}
img {
z-index: 15;
width: 100%;
height: auto;
padding: 5px;
}
.slick-dots {
z-index: 15;
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display:inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color:black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color:#999;
border:none;
width: 15px;
height: 15px;
border-radius:50%;
}
:hover{
background-color: black;
}
}
}
/* Custom Arrow */
.prev{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
.next{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
@media screen and (max-width: 800px) {
.next {
display: none !important;
}
}
我希望幻灯片看起来像这样：
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-01 13:38:08
你的代码是fint，只是在代码中缺少一些bootstrap & js cdn，而且你的css设计在scss格式中我更改为css格式，它工作得很好。注意：
由于代码片断，它可能不支持scss格式，这就是输出不能正确显示的原因
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-image: url("background.png");
background-repeat: no-repeat;
background-size: 1920px 1100px;
margin: 0;
overflow: visible;
}
img {
z-index: 15;
width: 100%;
height: auto;
padding: 5px;
}
.slick-dots {
z-index: 15;
text-align: center;
margin: 0 0 10px 0;
padding: 0;
}
.slick-dots li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
}
.slick-dots li.slick-active button {
background-color: black;
}
.slick-dots li button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: #999;
border: none;
width: 15px;
height: 15px;
border-radius: 50%;
}
.slick-dots li :hover {
background-color: black;
}
/* Custom Arrow */
.prev {
z-index: 15;
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
}
.prev :hover {
cursor: pointer;
color: black;
}
.next {
z-index: 15;
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
}
.next :hover {
cursor: pointer;
color: black;
}
@media screen and (max-width: 800px) {
.next {
display: none !important;
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66415525
复制相关文章
相似问题
腾讯云开发者
