【jQuery】How to display a slider (slick) in a fan shape and loop it | Demo page

.block {
  opacity: 0;
  height: 500px;
  overflow: hidden;
  margin: 100px auto 0;
  transition: all 1.5s 1s;
}
.block.active {
  opacity: 1;
}
.slider img {
  width: 440px;
}
.slider li {
  margin: 0 70px;
  transition: all 0.4s;
}
.slider li.left {
  margin-top: 10px;
  transform-origin: top right;
  transform: rotate(-7deg);
}
.slider li.left2 {
  margin-top: 100px;
  margin-right: 100px;
  transform-origin: top right;
  transform: rotate(-20deg);
}
.slider li.right {
  margin-top: 10px;
  transform-origin: top left;
  transform: rotate(7deg);
}
.slider li.right2 {
  margin-top: 100px;
  margin-left: 100px;
  transform-origin: top left;
  transform: rotate(20deg);
}

$(function() {

  var count=0;
  if($('.slider').length){
    var list=$('.slider').html();
    for(i=0;i<10;i++){
      $('.slider').append(list)
    }
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed:1500,
    dots: false,
    infinite: true,
    centerMode: true,
    variableWidth: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    swipe: false,
    arrows:true,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        centerPadding: 0,
        fade: true
      }
    }]
  });
  $('.slider').on('setPosition', function(){
    if(count==0){
    $('.slick-current').prev().addClass('left');
      $('.left').prev().addClass('left2');
    $('.slick-current').next().addClass('right');
      $('.right').next().addClass('right2');
    }
    count++;
  });
  $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    next='[data-slick-index='+nextSlide+']';
    $('.slider li').removeClass('right left right2 left2');
    $(next).prev().addClass('left');
      $('.left').prev().addClass('left2');
    $(next).next().addClass('right');
      $('.right').next().addClass('right2');
  });
  }
});

$(window).on('load', function(){
  $(".block").addClass("active");
});