8

При каждом клике бордер кнопки должен постепенно заполняться т.е когда будет достигнут последний слайд, у кнопки будет полный бордер вокруг.

В общем виде это выглядит так,- по нажатию на кнопку "назад" у кнопки "вперед" обводка будет уменьшаться т.е кнопка "вперед" выступает в роли progress bar

введите сюда описание изображения

Есть пример на codepen:

https://codepen.io/st-iv/pen/JBmvWO наверное можно взять за основу прогресс бар ниже, но пока что-то не получается. И сложность ещё в том, как верстать этот неполный border вокруг элемента

$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>', // Кастомная стрелка "назад"
  });  
});
3
  • habr.com/post/271881
    – Netahaki
    8 авг 2018 в 9:31
  • Здравствуйте. Вы напишите пожалуйста подробнее, что это задание именно по slick слайдеру. Ведь по одной надписи в вашем коде и отдаленному примеру на codepen можно не догадаться о том. 8 авг 2018 в 17:21
  • 1
    У всех разный уровень знаний, для вас может это просто, у меня же возникли сложности, поэтому я и обратился за помощью, чтобы мне дали дельный совет, для этого же этот сайт. А в стиле ваших ответов, можно решать любые вопросы "гуглится без проблем, берешь короче одну переменную умножаешь на другую". Попробуйте действительно помочь, всегда ценится больше дела чем больше слов :)
    – stiv
    9 авг 2018 в 14:39

1 ответ 1

8

$('.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/[email protected]/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/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>

1
  • 2
    отличный ответ (+) 9 авг 2018 в 20:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.