Javascript 一张幻灯片中有多个图像

我正在使用

Shopify

中的

最小主题

，并创建了一个带有4幅图像的

幻灯片

，但它是垂直显示而不是水平显示的。如何将其更改为水平显示而不是垂直显示。我试图寻找一个解决方案，但似乎找不到。下面是我尝试的代码，用于获取水平显示的多图像滑块。附加的图像是我试图实现的

HTML

CSS

html{框大小：边框框；}
*，*：之前，*：之后{框大小：继承；}
img{
宽度：100%；
高度：自动；
填充物：5px；
}
.圆点{
文本对齐：居中；
裕度：0 10px 0；
填充：0；
李{
显示：内联块；
左边距：4倍；
保证金权利：4px；
&.滑头活跃{
钮扣{
背景色：黑色；
}
}
钮扣{
字体：0/0A；
文本阴影：无；
颜色：透明；
背景色：#999；
边界：无；
宽度：15px；
高度：15px；
边界半径：50%；
}
：悬停{
背景色：黑色；
}
}
}
/*自定义箭头*/
上一篇{
颜色：#999；
位置：绝对位置；
最高：38%；
左：-2米；
字号：1.5em；
：悬停{
光标：指针；
颜色：黑色；
}
}
.下一个{
颜色：#999；
位置：绝对位置；
最高：38%；
右：-2米；
字号：1.5em；
：悬停{
光标：指针；
颜色：黑色；
}
}
@媒体屏幕和屏幕（最大宽度：800px）{
.下一个{
显示：无！重要；
}
}

Javascript

$（'.responsive'）。光滑({
点：是的，
prevArrow:$（'.prev'），
下一行：$（'.next'），
无限：错，
速度:300,，
幻灯片放映：4，
幻灯片滚动：4，
响应：[
{
断点：1024，
设置：{
幻灯片放映：3，
幻灯片滚动：3，
无限：是的，
圆点：对
}
},
{
断点：600，
设置：{
幻灯片放映：2，
幻灯片滚动：2
}
},
{
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}
//现在可以通过添加以下内容在给定断点取消单击：
//设置：“取消单击”
//而不是设置对象
]
});

---

任何链接或代码更改都将不胜感激。

看起来您只是引用了Slick Slider JS文件，而不是CSS文件，导致它像这样堆叠。我准确地复制了您的代码，确保包含了

slick主题.css

和

slick.css

文件，并且它可以正常工作

$（'.responsive'）.slick({
点：是的，
prevArrow:$（'.prev'），
下一行：$（'.next'），
无限：错，
速度:300,，
幻灯片放映：4，
幻灯片滚动：4，
响应：[
{
断点：1024，
设置：{
幻灯片放映：3，
幻灯片滚动：3，
无限：是的，
圆点：对
}
},
{
断点：600，
设置：{
幻灯片放映：2，
幻灯片滚动：2
}
},
{
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}
//现在可以通过添加以下内容在给定断点取消单击：
//设置：“取消单击”
//而不是设置对象
]
});
html{框大小：边框框；}
*，*：之前，*：之后{框大小：继承；}
img{
宽度：100%；
高度：自动；
填充物：5px；
}
.圆点{
文本对齐：居中；
裕度：0 10px 0；
填充：0；
李{
显示：内联块；
左边距：4倍；
保证金权利：4px；
&.滑头活跃{
钮扣{
背景色：黑色；
}
}
钮扣{
字体：0/0A；
文本阴影：无；
颜色：透明；
背景色：#999；
边界：无；
宽度：15px；
高度：15px；
边界半径：50%；
}
：悬停{
背景色：黑色；
}
}
}
/*自定义箭头*/
上一篇{
颜色：#999；
位置：绝对位置；
最高：38%；
左：-2米；
字号：1.5em；
：悬停{
光标：指针；
颜色：黑色；
}
}
.下一个{
颜色：#999；
位置：绝对位置；
最高：38%；
右：-2米；
字号：1.5em；
：悬停{
光标：指针；
颜色：黑色；
}
}
@媒体屏幕和屏幕（最大宽度：800px）{
.下一个{
显示：无！重要；
}
}


<div class="container">
<div class="row">
  <div class="col-md-12 heroSlider-fixed">
    <div class="overlay">
  </div>
     <!-- Slider -->
    <div class="slider responsive">
      <div>
                <img src="https://cdn.shopify.com/s/files/1/0080/8235/8334/files/shoes.PNG?11833828067426270267" alt="shoes" height="100" width="100" />
                </div>
                <div>
                    <img src="https://cdn.shopify.com/s/files/1/0080/8235/8334/files/bags.PNG?11833828067426270267" alt="bags" height="100" width="100" />
                </div>
                <div>
                    <img src="https://cdn.shopify.com/s/files/1/0080/8235/8334/files/Clothing.PNG?11833828067426270267" alt="clothing" height="100" width="100" />
                </div>
                <div>
                    <img src="https://cdn.shopify.com/s/files/1/0080/8235/8334/files/formal.PNG?11833828067426270267" alt="formal" height="100" width="100" />
      </div>
    </div>
             <!-- control arrows -->
            <div class="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            </div>
            <div class="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            </div>

  </div>
</div>

<style>
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

img {
width: 100%;
height: auto;
padding: 5px;
}


.slick-dots {
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{
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
    :hover{
        cursor: pointer;
        color: black;
    }
}
.next{
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;
}
}
</style>

<script>
$('.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
  }
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
</script>