主页 / 问题 / 865796
Accepted
stiv
Asked:2020-08-08 13:48:11 +0000 UTC2020-08-08 13:48:11 +0000 UTC

单击时如何填充光滑滑块按钮的边框？

  • 772

每次单击时，按钮的边框应逐渐填满，即当到达最后一张幻灯片时，按钮周围将有一个完整的边框。

一般来说，它看起来是这样的——点击“后退”按钮，“前进”按钮的行程会减少，即“前进”按钮充当progress bar

在此处输入图像描述

在codepen上有一个例子：

https://codepen.io/st-iv/pen/JBmvWO 您可能可以将下面的进度条作为基础，但到目前为止有些东西不起作用。而难点在于如何在元素周围布置这个不完整的边框

$slider.slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 400,
    nextArrow: '<div class="slider-arrow arrow-next"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Green_Arrow_Right.svg" alt=""></div>', // Кастомная стрелка "далее"
    prevArrow: '<div class="slider-arrow arrow-prev"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Green_Arrow_Right.svg" alt=""></div>', // Кастомная стрелка "назад"
  });  
});
javascript

1 个回答

  1. Best Answer

    $('.slider').on('init reInit afterChange',function(event,slick,currentSlide){
  //Рассчитываем длину окружности в кнопке по школьной формуле (с=2πr)
  var circleLength = $('.slick-next circle').attr('r')*Math.PI*2;
  
  //Определяем индекс текущего слайда. При событиях "init" и "reInit" параметр "currentSlide" не определён, в этом случае currentSlide приравниваем к нулю. Также добавляем единицу, т.к. отсчёт слайдов начинается с нуля. 
  var i =  (currentSlide ? currentSlide : 0) + 1;
  
  //Определяем долю заполнения, разделив индекс текущего слайда на общее количество слайдов
  var part = i/slick.slideCount;
  
  //Задаём кругу внутри кнопки свойство "stroke-dasharray". Первый параметр - длина видимой части границы, второй - длина пустого промежутка.
  $('.slick-next circle').css('stroke-dasharray', circleLength*part+','+circleLength);
});

$('.slider').slick({
  dots:false,
  arrows:true,
  nextArrow:'<svg class="slick-arrow slick-next" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" transform="rotate(-90,20,20)" /><path d="M18,10 l10,10 -10,10" /></svg>',
  prevArrow:'<svg class="slick-arrow slick-prev" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" /><path d="M22,10 l-10,10 10,10" /></svg>',
  appendArrows:$('.nav')
});
    *{
  box-sizing:border-box;
}
body{
  background-color:#cda;
}
.slide{
  height:100px;
  background-color:gray;
  color:#fff;
  line-height:100px;
  text-align:center;
  font-weight:bold;
  font-size:75px;
}
.slick-arrow{
  display:inline-block;
  width:40px;
  height:40px;
  cursor:pointer;
}
.slick-arrow circle{
  fill:#fff;
  stroke:green;
  stroke-width:2;
  stroke-dasharray:0,1000px;
  transition: all .2s linear;
}
.slick-arrow path{
  stroke-width:2;
  fill:none;
  stroke:black;
  stroke-linecap:round;
  
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>
<div class="nav"></div>

    • 8

相关问题