Question

我想将滑块放置在网站标题下方作为导航菜单，光滑的轮播似乎是一个不错的选择，但它无法正常工作

当滑块是页面中唯一的代码时，滑块工作正常，但是当我插入页眉/导航栏的代码时，滑块不再响应页面中的CSS代码，并且会分散所有内容。

CSS代码：

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css"><style type="text/css">

/* Header CSS */------------

* {box-sizing: border-box;}

body { 
    background-color: #FFF8E7;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    overflow: hidden;
    background-color: white;
    padding: 20px 10px;
}

.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px; 
    line-height: 25px;
    border-radius: 4px;
}

.header img {
    width: 100px;
}

.header a:hover {
    background-color: #ddd;
    color: black;
}

.header-right {
    float: right;
}

@media screen and (max-width: 500px) {
    .header img {
        padding-left: 10px;
        padding-bottom: 10px;
    }

.header a {
    float: none;
    display: block;
    text-align: left;
}

.header-right {
    float: none;
}

img {
    witdth: 100%
    margin-left: auto;
    margin-right: auto;

}

/* CSS-Slider */----------------

.slider {
    width: 50%;
    margin: 500px auto;
}

.slick-slide {
  margin: 0px 0px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: gray;
}

HTML代码：

<body>
  <div class="header">
  <img src="logo.png">
  <div class="header-right">
    <a href="#home">Item1</a>
    <a href="#contact">Item2</a>
    <a href="#about">Item3</a>
  </div>
  </div>

  <section class="slider-for">
    <div>
      <img src="banner.jpg">
    </div>
    <div>
      <img src="banner.jpg">
    </div>
  </section>

  <section class="slider-nav">
    <div>
      <img src="test.jpg">
    </div>
    <div>
      <img src="test.jpg">
    </div>
  </section>

脚本：

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,

  focusOnSelect: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

当与页眉/导航栏放在一起时，平滑功能将不起作用

0 个答案: