Cacher is the code snippet organizer for pro developers

// 05 - Rotator
$(".rotatorData").each(function() {
	var rotatorData = $(this);
	var numberOfItems = rotatorData.find("ul li").length;
	rotatorData.parent().find("ul li a").contents().unwrap();
	rotatorData.parent().find("ul li").first().addClass('active');
	rotatorData.parent().find(".arrowLeft").html("‹");
	rotatorData.parent().find(".arrowRight").html("›");
	rotatorData.parent().find(".currentSlide").html("1");
	rotatorData.parent().find(".currentSlide").after("<div style='float:left;'>&nbsp;/&nbsp;</div>");
	rotatorData.parent().find(".totalSlides").html(numberOfItems);
});
$(".rotatorNav .arrowLeft").on('click', function(event) {
	event.preventDefault();
	var rotatorData = $(this).parent().parent().find(".rotatorData ul");
	var rotatorActive = rotatorData.find("li.active");
	var rotatorPosition = rotatorActive.index();
	if (rotatorPosition > 0) {
		rotatorActive.removeClass('active');
		rotatorActive.prev().addClass('active');
		$(".currentSlide").html(rotatorPosition);
	}
	console.log("rotatorPosition", rotatorPosition);
});
$(".rotatorNav .arrowRight").on('click', function(event) {
	event.preventDefault();
	var rotatorData = $(this).parent().parent().find(".rotatorData ul");
	var rotatorActive = rotatorData.find("li.active");
	var rotatorPosition = rotatorActive.index() + 1;
	var rotatorTotal = rotatorData.find("li").length;
	if (rotatorPosition < rotatorTotal) {
		rotatorActive.removeClass('active');
		rotatorActive.next().addClass('active');
		$(".currentSlide").html(rotatorPosition + 1);
	}
	console.log("rotatorPosition", rotatorPosition);
});

#visualEditor .rotatorNav{
	display: none;
}

    /* Rotator Section - Overrides and Addons to above
    ============================================== */
    .rotatorReadMore {
      padding-right: 40px;
      padding-left: 35px;
    }
    .rotatorReadMore .rotatorNav{
      position: absolute;
      right: 15px;
      top: 0px;
      z-index: 10;
      font-size:24px;
      line-height: 70px;
      color: #000;
    }
    .rotatorReadMore .rotatorNav .arrowLeft{
      display: block;
      float: left;
      padding-right:5px;
      font-size:60px;
     line-height: 60px;
     cursor: pointer;
    }
    .rotatorReadMore .rotatorNav .arrowRight{
      display: block;
      float: left;
      padding-left:5px;
      font-size:60px;
     line-height: 60px;
     cursor: pointer;
    }
    .rotatorReadMore .rotatorNav .currentSlide{
      display: block;
      float: left;
      color: #e67311;
    }
    .rotatorReadMore .rotatorNav .totalSlides{
      display: block;
      float: left;
      font-size: 16px;
     line-height: 60px;
    }
    .rotatorReadMore .rotatorData ul {
      display: block;
      margin:0;
      padding:0;
      width:100%;
      height: 100%;
    }
    .rotatorReadMore .rotatorData ul li {
      position: relative;
      display: block;
      margin:0;
      padding:0;
      width:100%;
      height: 100%;
      z-index: 0;
    }
    .rotatorReadMore .rotatorData ul li.active {
      z-index: 1;
    }
    .rotatorReadMore .rotatorData ul li img{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      -webkit-clip-path: polygon(0 0, 0 100%, 93% 100%, 93% 54%, 97% 50%, 93% 46%, 93% 0);
      clip-path: polygon(0 0, 0 100%, 93% 100%, 93% 54%, 97% 50%, 93% 46%, 93% 0);
      height: 639px !important;
      width: 330px !important;
    }
    .rotatorReadMore .rotatorData.flipped ul li img{
      -webkit-clip-path: polygon(7% 0, 7% 54%, 2% 50%, 7% 46%, 7% 100%, 100% 100%, 100% 0);
      clip-path: polygon(7% 0, 7% 54%, 3% 50%, 7% 46%, 7% 100%, 100% 100%, 100% 0);
    }
    .rotatorReadMore .rotatorData ul li span{
      position: absolute;
      top: 312px;
      left: 0;
      width: 100%;
      display: block;
    }
    .rotatorReadMore .rotatorData ul li > span > h2{
      color: #fff;
      text-align: center;
      font-size: 34px;
      font-weight:bold;
    }
    .rotatorReadMore img.fullWidth{
      padding:8px;
      border-left: 0px !important;
    }
    .rotatorReadMore .imageReadMore .plusBox{
      bottom: 40px;
    }
    .rotatorReadMore .imageReadMore.right .plusBox{
      right: -8px;  
    }
    .rotatorReadMore .imageReadMore .readMoreBox{
      bottom: 8px;
    }
    .rotatorReadMore .imageReadMore.right .readMoreBox{
      right: -8px;
    }
    .rotatorReadMore .imageReadMore.left .plusBox{
      left: -8px;
    }
    .rotatorReadMore .imageReadMore.left .readMoreBox{
      left: -8px;
    }

/* ============================================= */

<div class="container container-fluid">
		<div class="row">
			<div class="rotatorNav">
				<div class="arrowLeft"><</div>
				<div class="currentSlide">0</div>
				<div class="totalSlides">0</div>
				<div class="arrowRight">></div>
			</div>
			<div data-editor="element" data-title='Body Copy' class="col-md-12 rotatorData">
				[EXAMPLE Rotator]
			</div>
		</div>
	</div>