Masked Circle Slider

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
  <link href='https://fonts.googleapis.com/css?family=Roboto:300|400' rel='stylesheet' type='text/css'>

  <div class="slider" id="slider-1">
    <div class="item">
      <svg xmlns="http://www.w3.org/2000/svg" class="original">
        <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/1.jpg?raw=true" mask="url(#donutmask)"></image>
      </svg>
      <div class="tit">DAISY</div>
    </div>
    <div class="item">
      <svg xmlns="http://www.w3.org/2000/svg" class="original">
        <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/3.jpg?raw=true"  mask="url(#donutmask)"></image>  
      </svg>
      <div class="tit">CANDIDUM</div>
    </div>
    <div class="item">
      <svg xmlns="http://www.w3.org/2000/svg" class="original">
        <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/4.jpg?raw=true" mask="url(#donutmask)"></image>  
      </svg>
      <div class="tit">MARIGOLD</div>
    </div>
    <div class="item">
      <svg xmlns="http://www.w3.org/2000/svg" class="original">
        <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/2.jpg?raw=true" mask="url(#donutmask)"></image>  
        
      </svg>
      <div class="tit">BLOSSOM</div>
    </div>
  </div>
  
  <svg>
    <defs>
      <mask id="donutmask">
        <circle id="outer" cx="250" cy="250" r="400" fill="white"/>
        <circle id="inner" cx="250" cy="250" r="300"/>
      </mask>
    </defs>
  </svg>
  
  <div class="cursor"></div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"  ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

html, body {
	height: 100vh;
	overflow: hidden;
	cursor: none;
  }
  @media (pointer: coarse) {
	html, body {
	  cursor: default;
	}
  }
  
  .slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transition: 0.5s ease-in-out;
  }
  .down .slider {
	transform: scale(0.9);
  }
  .down .slider .item .tit {
	opacity: 0;
  }
  .slider * {
	outline: none;
  }
  .slider .item {
	position: relative;
	z-index: 1;
	width: 100vw;
	height: 100vh;
  }
  .slider .item svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
  }
  .slider .item .tit {
	text-align: center;
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	letter-spacing: 2rem;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 7vw;
	transition: all 0.3s ease-in-out;
  }
  
  #slider-1 {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
  }
  #slider-1 .tit {
	display: none;
  }
  
  #slider-2 {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	transform: scale(1) !important;
	pointer-events: none;
  }
  
  .cursor {
	pointer-events: none;
	position: absolute;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	margin-left: -15px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05);
	transition: transform ease-in-out 0.2s, background ease-in-out 0.2s;
	transform: translateZ(0);
	z-index: 100;
	left: -9999px;
  }
  .cursor:before, .cursor:after {
	content: "";
	position: absolute;
	border-left: 6px solid rgba(255, 255, 255, 0.5);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	top: 10px;
	left: 52px;
	opacity: 0;
	transition: left ease-in-out 0.1s, opacity ease-in-out 0.2s;
  }
  .cursor:after {
	border-left: none;
	border-right: 6px solid rgba(255, 255, 255, 0.5);
	left: -27px;
  }
  .down .cursor {
	transform: scale(0.7) translateZ(0);
	background: rgba(255, 255, 255, 0.4);
  }
  .down .cursor:before, .down .cursor:after {
	opacity: 1;
	left: 49px;
  }
  .down .cursor:after {
	left: -24px;
  }
  @media (pointer: coarse) {
	.cursor {
	  display: none;
	}
  }

$('.slider').clone().removeAttr('id').attr('id', 'slider-2').appendTo('body');

$('#slider-1').slick({
    arrows: false,
    speed: 750,
    asNavFor: '#slider-2',
    dots: false
}).on('mousedown touchstart', function () {
    $('body').addClass('down');
}).on('mouseleave mouseup touchend', function () {
    $('body').removeClass('down');
});

$(window).on('keydown', function () {
    $('body').addClass('down');
}).on('keyup', function () {
    $('body').removeClass('down');
});

$('#slider-2').slick({
    fade: true,
    arrows: false,
    speed: 300,
    asNavFor:
    '#slider-1',
    dots: false
});

setTimeout(function(){
  $(window).trigger('keydown');
  setTimeout(function(){
    $('#slider-1').slick('slickNext');
    setTimeout(function(){
      $(window).trigger('keyup');
    }, 500);
  }, 600);
}, 1500);

$('#slider-1 image').removeAttr('mask');

$(window).on('resize', function () {
    $('#donutmask circle').attr({
        cx: $(window).width() / 2,
        cy: $(window).height() / 2
    });
    $('#donutmask #outer').attr({
        r: $(window).height() / 2.6
    });
    $('#donutmask #inner').attr({
        r: $(window).height() / 4.5
    });
}).resize();

$(window).on('mousemove', function(e){
  $('.cursor').css({
    top: e.pageY + 'px',
    left: e.pageX + 'px',
  })
});