首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何将js滑动箭头转换为html标记

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

Stack Overflow用户
提问于 2021-03-02 16:39:41
回答 1查看 30关注 0票数 0

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

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

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

代码语言:javascript
复制
$(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)
代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2021-03-02 16:59:28

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

HTML

将此html放在您的滑块之外

代码语言:javascript
复制
<ul class="custom-nav">
        <li class="arrow prev"></li>
        <li class="arrow next"></li>
</ul>

JS

代码语言:javascript
复制
$('.slick-carousel').slick({
  prevArrow: $('.prev'), //add custom class
  nextArrow: $('.next'), //add custom class
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66435942

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档