主页 / 问题 / 987796
Accepted
HamSter
Asked:2020-05-31 19:46:10 +0000 UTC2020-05-31 19:46:10 +0000 UTC

克隆光滑滑块的控制箭头

  • 772

有一个简单的光滑滑块：

if ($('.slider').length) {
  $('.slider').each(function() {

    var $this = $(this);

    $this.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: true,
      customPaging: function(slick, index) {
        return '<a class="page-link">' + (index + 1) + '</a>';
      },
      infinite: true,
      touchMove: true,
      draggable: true,
      lazyLoad: 'ondemand',
      prevArrow: '<button class="slick-prev"></button>',
      nextArrow: '<button class="slick-next"></button>',
    });

  });
}
.x {
  width: 100%;
  height: 100px;
  background: #ccc;
}

.y {
  width: 100%;
  height: 100px;
  background: orangered;
}

.slick-dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex !important;
  justify-content: center;
  margin-top: 20px;
}

.slick-dots .page-link {
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  z-index: 100;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider">
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
</div>

问题：如何复制控制箭头，以便在dotswith旁边多一个1 2 3 4 ...？

jquery

1 个回答

  1. Best Answer

    最有可能的是，唯一的方法是克隆现有的箭头并将单击处理程序附加到滑块的滚动条上。

    $('.slider').on('init reInit',function(e,slick){
  slick.$dots.wrap('<div class="bottom-nav" />');
  slick.$prevArrow.clone().insertBefore(slick.$dots).on('click',function(){
    slick.slickPrev();
  })
  slick.$nextArrow.clone().insertAfter(slick.$dots).on('click',function(){
    slick.slickNext();
  })
})
$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  customPaging: function(slick, index) {
    return '<a class="page-link">' + (index + 1) + '</a>';
  },
  infinite: true,
  touchMove: true,
  draggable: true,
  lazyLoad: 'ondemand',
  prevArrow: '<button class="slick-prev"><</button>',
  nextArrow: '<button class="slick-next">></button>',
});
    .slider{
  margin:0 0 20px;
  border:1px solid;
}
.x {
  width: 100%;
  height: 100px;
  background: #ccc;
}

.y {
  width: 100%;
  height: 100px;
  background: orangered;
}

.slick-dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin: 0 auto;
}
.slick-dots li{
  display: inline-block;
}
.slick-dots .page-link {
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
}

.slick-arrow {
  position: absolute;
  top: 40px;
  width: 20px;
  height: 20px;
  z-index: 100;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.bottom-nav{
  display: flex;
  align-items: center;
  margin: 20px 0 0;
 }
 .bottom-nav .slick-arrow{
  position: static;
 }
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider">
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
</div>

<div class="slider">
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
</div>

    • 2

相关问题