一张幻灯片中的多个图像

Question

我正在minimal theme中使用Shopify，并创建了一个包含4张图像的slideshow，但是它是垂直显示而不是水平显示。如何更改为水平显示而不是垂直显示。我曾尝试寻找解决方案，但似乎找不到。下面是我尝试获得的用于水平显示多图像滑块的代码。所附的图片是我想要实现的。

HTML

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

CSS

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

Javascript

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

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

Answer 1

看起来您只引用了Slick Slider JS文件，而不是CSS文件，从而导致它像这样堆叠。我精确地复制了您的代码，确保包含了slick-theme.css和slick.css文件，并且文件应能正常工作。

$('.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
]
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet"/>


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