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

Question

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

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

然而，由于幻灯片的宽度是相应地改变的，所以很难始终在幻灯片之间定位箭头。我想知道是否有办法控制这些箭头，因为我在想，是否有办法相对于上一步和下一步按钮的中心滑块进行定位，或者是否有办法将js按钮替换为编写的HTML，以便我可以使用max-width和显示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>

​

Answer 1

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

HTML

将此html放在您的滑块之外

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

JS

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