Question

我正在使用光滑的滑块库处理滑块，我似乎无法将左右箭头放在图片中，就像我在做文本一样。左箭头根本没有移动，右边只是使用margin-left向右移动。

我试过上场比赛，但对我来说也不行。

这就是我想要它的样子

$(document).ready(function() {



  $('.home-slick-slider').slick({

    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    cssEase: 'linear',
    arrows: true,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });
});

.slick-slide {
  display: none;
  float: left;
  position: relative;
  height: 100%;
  min-height: 1px;
}

.slick-prev:before {
  content: "\f104";
  font-family: FontAwesome;
  font-size: 50px;
  color: #0a5185 !important;
  z-index: 100px;
}

.slick-next:before {
  content: "\f105";
  font-family: FontAwesome;
  font-size: 50px;
  color: #0a5185 !important;
  z-index: 100px;
}

.home-slick-text {
  position: absolute;
  bottom: 50%;
  left: 70%;
  margin-right: 40%;
  color: black;
}

.home-slick-text h1 {
  color: #9FA8A6;
  text-align: right
}

.home-slick-text p {
  color: #9FA8A6 !important;
  text-align: right
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<body>

  <div class="container">
    <div class="home-slick-slider">
      <div class="home-slider-slides">
        <div class="home-slider-content">
          <img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg">
          <div class="home-slick-text">
            <h1>A Quality Connection</h1>
            <p>Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
              for our patients.</p>
          </div>
        </div>
      </div>

      <div class="home-slider-slides">
        <div class="home-slider-content">
          <img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg">
          <div class="home-slick-text">
            <h1>A Quality Connection</h1>
            <p>Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
              for our patients.</p>
          </div>
        </div>
      </div>



      <div class="home-slider-slides">
        <div class="home-slider-content">
          <img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg">
          <div class="home-slick-text">
            <h1>A Quality Connection</h1>
            <p>Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
              for our patients.</p>
          </div>
        </div>
      </div>



    </div>

  </div>
</body>

Answer 1

您只需要正确设置z-index（它没有单位，因此请移除px）并调整两个导航箭头的left和right属性：

.home-slick-slider>.slick-prev {
  left: 10px;
  z-index: 1;
}
.home-slick-slider>.slick-next {
  right: 10px;
  z-index: 1;
}

这样，它们将显示在图像上方。

＆＃13;

$(document).ready(function() {
  $('.home-slick-slider').slick({

    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    cssEase: 'linear',
    arrows: true,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });
});

＆＃13;

.slick-slide {
  display: none;
  float: left;
  position: relative;
  height: 100%;
  min-height: 1px;
}
.home-slick-slider>.slick-prev {
  left: 10px;
  z-index: 1;
}
.home-slick-slider>.slick-next {
  right: 10px;
  z-index: 1;
}
.slick-prev:before {
  content: "\f104";
  font-family: FontAwesome;
  font-size: 50px;
  color: #0a5185 !important;
  z-index: 100;
}

.slick-next:before {
  content: "\f105";
  font-family: FontAwesome;
  font-size: 50px;
  color: #0a5185 !important;
  z-index: 100;
}

.home-slick-text {
  position: absolute;
  bottom: 50%;
  left: 70%;
  margin-right: 40%;
  color: black;
}

.home-slick-text h1 {
  color: #9FA8A6;
  text-align: right;
}

.home-slick-text p {
  color: #9FA8A6 !important;
  text-align: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<body>

  <div class="container">
    <div class="home-slick-slider">
      <div class="home-slider-slides">
        <div class="home-slider-content">
          <img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg">
          <div class="home-slick-text">
            <h1>A Quality Connection</h1>
            <p>Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
              for our patients.</p>
          </div>
        </div>
      </div>

      <div class="home-slider-slides">
        <div class="home-slider-content">
          <img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg">
          <div class="home-slick-text">
            <h1>A Quality Connection</h1>
            <p>Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
              for our patients.</p>
          </div>
        </div>
      </div>



      <div class="home-slider-slides">
        <div class="home-slider-content">
          <img class="img-responsive" src="https://i.pinimg.com/originals/a0/73/1c/a0731cd9655f23c9596456ff800f1d85.jpg">
          <div class="home-slick-text">
            <h1>A Quality Connection</h1>
            <p>Our mission is to shape the future of health care in our community through an integrated partnership of providers and Baptist Health hospitals that work collaboratively toward common goals for improving quality, safety, efficiency and outcomes
              for our patients.</p>
          </div>
        </div>
      </div>



    </div>

  </div>
</body>

＆＃13;

光滑的滑块箭头图像不工作

1 个答案: