上一页箭头弄乱了图像宽度答案

【问题标题】：prevArrow messing up the image width上一页箭头弄乱了图像宽度
【发布时间】：2021-01-21 10:06:12
【问题描述】：

我已经实现了 Slick.js 来挖掘项目，但由于某种原因，当我使用 nextArrow 和 prevArrow 时，我的图片被裁剪到宽度的 60% 左右，我试图制作一个自定义类，其宽度为 100%，但是这并没有解决问题。刚刚检查了只prevArrow导致了问题

它应该是这样的：

下面是它的样子：

$('.slider-one').not(".slick-initialized").slick({
  autoplay: true,
  autoplaySpeed: 3000,
  dots: true,
  prevArrow: ".site-slider .slider-btn .prev",
  nextArrow: ".site-slider .slider-btn .next"
});

.wid {
  width: 100% !important;
  height: 500px;
}


/*Slider*/

.site-sider {
  position: relative;
}

.position-top {
  position: absolute;
  top: 45%;
}

.site-slider .slider-btn .prev,
.site-slider .slider-btn .next {
  background-color: #091a5d;
  padding: 1rem 1.5rem;
  border-radius: 50%;
  color: white;
  margin: 0 1rem;
  opacity: 0;
  transition: opacity 1s ease;
}

.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next {
  opacity: 0.9;
}

.right-0 {
  right: 0;
}

.slick-dots {
  left:50%;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 16px 0;
  list-style-type: none;
  position: absolute;
  bottom: 0;
  right: 50%;
}

.slick-dots li {
  margin: 0 0.6rem;
}

.slick-dots button {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  background-color: white;
  text-indent: -99999px;
  border-radius: 100%;
}

.slick-dots .slick-active button {
  transform: scale(2.5);
  box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!--Font-->
  <script src="https://kit.fontawesome.com/158e82d513.js" crossorigin="anonymous"></script>
  <!--Slider-->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

  <!--Styles-->
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <main>

    <!--Slider-->
    <div class="container-fluid p-0">
      <div class="site-slider">
        <div class="slider-one">
          <div>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" class="wid img-fluid" alt="Slika 1">
          </div>
          <div>
            <img src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" class="wid img-fluid" alt="Slika 2">
          </div>
          <div>
            <img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="wid img-fluid" alt="Slika 3">
          </div>
        </div>
        <div class="slider-btn">
          <span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
          <span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
        </div>
      </div>
    </div>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script src="js/main.js"></script>
</body>

所以如果有人知道如何解决这个问题，请帮助兄弟:)

【问题讨论】：

你能创建一个我们可以在其中运行你的滑块的 sn-p 吗？
@EmielZuurbier 发布了它
我的意思是一个代码 sn-p，图像讲述的故事与您已经解释的相同。我们需要能够在运行滑块时检查 HTML 和 CSS。在问题编辑器中查找 <> 图标以创建 sn-p。其中包括您的 HTML、CSS、JS、jQuery 和 Slick.js 来创建交互式示例。
@EmielZuurbier 我不知道如何在其中插入图像，但你知道粗略的想法
@EmielZuurbier 我添加了图片

标签： javascript html css image slick.js

【解决方案1】：

如果您使用的是 bootstrap 3 使用此

.slick-prev:before, .slick-next:before {
            font-family: "Glyphicons Halflings","slick", sans-serif;
            font-size: 40px;
    }
    .slick-prev:before { content: "\e257"; }
    .slick-next:before { content: "\e258"; }

【讨论】：

字体真棒

【解决方案2】：

直接使用图片代替类

$('.slider-one').not(".slick-initialized").slick({
  prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
  nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>"  });

【讨论】：

使用图标代替图片将替换为
你不能这样做，它的 js 由于“”冲突