如何将 js 滑动箭头转换为 html 标记答案

【问题标题】：how to transform the js slide arrow into html markup如何将 js 滑动箭头转换为 html 标记
【发布时间】：2021-03-02 16:59:27
【问题描述】：

h1，我得到了类似下面的设计，它是一个滑块显示，中心模式滑块，箭头放置在下一张和上一张幻灯片之间。 enter image description here

我为我的工作找到了这个很好的来源 (https://codepen.io/haileyang/pen/jOVxYxN)。

但是，由于幻灯片的宽度是响应式修改的，因此很难始终在幻灯片旁边找到箭头。我想知道是否有任何方法可以控制这些箭头，因为我在想是否有办法仅相对于上一个和下一个按钮的中心滑块进行定位，或者是否有办法将该 js 按钮替换为书面 HTML 以便我可以使用 max -width 和 display flex 与我想要的差不多。

$(function() {
  $('.slick-carousel').slick({
    centerMode: true,
    centerPadding: '67px',
    slidesToShow: 1,
    responsive: [{
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '45px',
        slidesToShow: 1
      }
    }, {
      breakpoint: 480,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '45px',
        slidesToShow: 1
      }
    }]
  }); // $('.slick-carousel')
  
    $('.slick-item').on('click', function(e) {
    e.preventDefault();
    var activity = $(this);
    var title = activity.find('h3').text();
    var desc = activity.find('p').text();
    var img = activity.find('a').attr('href');
    var html = '<div class="modal fade lightbox-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">';
    html += '<div class="modal-dialog modal-lg" role="document">';
    html += '<div class="modal-content">';
    html += '<div class="modal-body">';
    html += '<div class="caption">';
    html += '<div class="caption-content">';
    html += '<h3>' + title + '</h3>';
    html += '</div>';
    html += '</div>';
    html += '<img src="' + img + '" alt="" class="img-responsive">';
    html += '<p>' + desc + '</p>';
    html += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    $("body").append(html);
    $(".lightbox-modal").modal().on("hidden.bs.modal", function() {
      $(this).remove()
    })
    return false;
  });
  
}); // (function)

body {
  padding: 30px 0;
}

/*!*
* Slick Custom Theme
*/
.slick-carousel .slick-item {
  color: white;
  background-color: #3498db;
  min-height: 250px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  margin: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slick-carousel .slick-item:hover {
  opacity: .7
}

.slick-prev:before,
.slick-next:before {
  color: black;
  content: '';
}

.slick-arrow {
  width: 55px;
  height: 55px;
  z-index: 5;
  border-top: 3px solid #06d1a4;
  border-right: 3px solid #06d1a4;
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

.slick-arrow:hover {
  opacity: .5
}

.slick-prev {
  left: 0%;  
  transform: rotate(225deg);
}

.slick-next {
  right: 0%;
  transform: rotate(45deg);
}


/**!
* Caption Styles
*/

.caption-item {  
  right: 0;
  margin: 0px;
  padding: 0px;
}

.caption-link {
  display: block;
  position: relative;
  margin: 0 auto;
  max-width: 400px;
}

.caption-link .caption-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  transition: all ease .5s;
}

.caption-layer.green {
  background: rgba(173, 219, 50, .5);
}

.caption-layer.light-green {
  background: rgba(6, 209, 164, .7);
}

.caption-layer.blue {
  background: rgba(152, 231, 254, .5);
}

.caption-link .caption-layer:hover,
.caption-layer.video-icon {
  opacity: 1;
}

.caption-link .caption-layer .caption-content {
  position: absolute;
  top: 35%;
  width: 100%;
  text-align: center;
  font-size: 50px;
  color: #fff;
}

.caption-link .caption-layer .caption-content p {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="jumbotron">
    <div class="container text-center">
      <h2>Slick Slider: <br> Create your custom theme</h2>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="slick-carousel">
        <div class="slick-item">
          <a href="http://lorempixel.com/960/250/food/1/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>SALAD</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/1/" alt="Image" class="img-responsive">
          </a>
        </div>
        <div class="slick-item">
          <a href="http://lorempixel.com/960/250/food/2/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>POTATO</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/2/" alt="Image" class="img-responsive">
          </a>
        </div>
        <div class="slick-item">
          <a href="http://lorempixel.com/270/250/food/3/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>SNORKELING</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/3/" alt="Image" class="img-responsive">
          </a>
        </div>
        <div class="slick-item">
                    <a href="http://lorempixel.com/960/250/food/4/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>SALAD</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/4/" alt="Image" class="img-responsive">
          </a>
        </div>
        <div class="slick-item">
                    <a href="http://lorempixel.com/960/250/food/5/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>SALAD</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/5/" alt="Image" class="img-responsive">
          </a>
        </div>
        <div class="slick-item">
                    <a href="http://lorempixel.com/960/250/food/6/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>SALAD</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/6/" alt="Image" class="img-responsive">
          </a>
        </div>
        <div class="slick-item">
                    <a href="http://lorempixel.com/960/250/food/7/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>SALAD</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/7/" alt="Image" class="img-responsive">
          </a>
        </div>
        <div class="slick-item">
                    <a href="http://lorempixel.com/960/250/food/8/" class="caption-link">
            <div class="caption-layer light-green">
              <div class="caption-content">
                <h3>FRUIT</h3>
                <p class="hidden">Explore some of the World’s Best Snorkel Sites!An easy way to enjoy the underwater beauty that surrounds Ambergris Caye is to go snorkeling. All you need is a mask, snorkel, and fins. People of all ages and experience levels will take
                  home wonderful memories about their time in the water with us. Just in front of our resort on a quick kayak ride you can enjoy on of the best snorkeling site, Mexico Rocks.</p>
              </div>
            </div>
            <img src="http://lorempixel.com/270/250/food/8/" alt="Image" class="img-responsive">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以在HTML 中使用自定义navigation 箭头，如下所示

HTML

将此 html 放在滑块之外

<ul class="custom-nav">
        <li class="arrow prev"></li>
        <li class="arrow next"></li>
</ul>

$('.slick-carousel').slick({
  prevArrow: $('.prev'), //add custom class
  nextArrow: $('.next'), //add custom class
});

【讨论】：