$('.bann').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 4000,
  customPaging: function (slider, i) {
    return ('<div class="slike"></div>')
  }
});
$(".bann").on("afterChange", function (slick, currentSlide) {
    var i = $(this).find('.slick-active').index();
    $(this).find('.slick-dots').children('li').children('.slike').html('')
    $(this).find('.slick-dots').children('li').eq(i-1).children('.slike').append('<svg width="30" height="30" viewBox="0 0 66 76" xmlns="http://www.w3.org/2000/svg"> <circle cx="32" cy="40" r="33" stroke-width="5" stroke="rgba(255,255,255,1)" fill="none" class="svg"></circle><circle id="ring" cx="400" cy="32" r="33" stroke-width="5" stroke="#E19E22" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=" 0 1069"></circle></svg>');
    $(this).find('.slick-dots').children('li').eq(i-1).children('.slike').css({ 'transition': 'stroke-dasharray 0s', 'stroke-dasharray': '207.01, 207.01' })
    // targetRing.style.strokeDasharray = "0, 314";
    rotate360('ring')
});
// rotate360('ring')
var targetRing
function rotate360(id) {
  targetRing = document.getElementById(id);
  var totalLength = targetRing.getTotalLength();
  $(' svg circle').css('transition', 'stroke-dasharray 4s')
  targetRing.style.strokeDasharray = totalLength + ', ' + totalLength;
}
$('.mode1Ul li a').css('height', $('.mode1l').innerHeight());
$('.mode5Ul').slick({
  dots: false,
  autoplay: true,
  autoplaySpeed: 4000,
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
$('.mode6Ul').slick({
  dots: false,
  // autoplay: true,
  autoplaySpeed: 4000,
  slidesToShow: 1,
  slidesToScroll: 1,
});
$('.mode4tab').tab()