HTML/CSS - 轮播幻灯片放映中的多张图片

Question

我正在尝试创建一次显示 4 张图片的幻灯片，然后您可以单击左右箭头转到下一组图片。当我尝试在 google chrome 中打开我的 html 文件时，所有图像都垂直而不是水平地堆叠在一起，并且我的箭头没有显示。我不确定这是为什么。我尝试查找和测试其他滑块示例，但它们都做同样的事情，即图像垂直堆叠在一起，并显示 none 个箭头。

我的页面有背景图片，并且大小也必须为 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;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="homepage.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    
    <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="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </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>
      </div>
  
    
    <script src="homepage.js"></script>
    </body>
</html>

我希望幻灯片看起来像：

Answer 1

你的代码是 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;
  }
}

<!-- Slick Slider -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>



<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="homepage.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    
    <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="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </div>
                        <div>
                            <img src="http://placehold.it/200x150" alt="" />
                        </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>
      </div>
  
    
    <script src="homepage.js"></script>
    </body>
</html>

HTML/CSS - 轮播幻灯片放映中的多张图片

HTML/CSS - Multiple images in carousel slide show

html

javascript

css

image

slideshow