Slick Jump from Last to first [Solved]

by Faisal Khan Janjua

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<div class="volSlider">
  <div class="slideSingle">
    <h2 class="bundleTitle">1. 4G Monthly Smart</h2>
    <p>Remaining Volume</p>
    <h1 class="bundleInfo">35.50GB</h1>
    <span class="BundleExpiry">Expiry Date: 28 January 2018</span>
  </div>
  <div class="slideSingle">
    <h2 class="bundleTitle">2. 4G Monthly Smart</h2>
    <p>Remaining Volume</p>
    <h1 class="bundleInfo">35.50GB</h1>
    <span class="BundleExpiry">Expiry Date: 28 January 2018</span>
  </div>
  <div class="slideSingle">
    <h2 class="bundleTitle">3. 4G Monthly Smart</h2>
    <p>Remaining Volume</p>
    <h1 class="bundleInfo">35.50GB</h1>
    <span class="BundleExpiry">Expiry Date: 28 January 2018</span>
  </div>
  <div class="slideSingle">
    <h2 class="bundleTitle">4. 4G Monthly Smart</h2>
    <p>Remaining Volume</p>
    <h1 class="bundleInfo">35.50GB</h1>
    <span class="BundleExpiry">Expiry Date: 28 January 2018</span>
  </div>
</div>

<h3>
apply style to .slick-center and set slider option to "centerMode: true, centerPadding: 0,"
</h3>

SCSS

$lsBlue: #007ad0;
$darkGray: #333;
$white: #FFF;
@mixin transition($trnsTime:300ms){
	transition: all ease-in-out $trnsTime;
	-o-transition: all ease-in-out $trnsTime;
	-ms-transition: all ease-in-out $trnsTime;
	-moz-transition: all ease-in-out $trnsTime;
	-webkit-transition: all ease-in-out $trnsTime;
}
@mixin scale($scaleSize:1){
	transform: scale($scaleSize);
	-o-transform: scale($scaleSize);
	-ms-transform: scale($scaleSize);
	-moz-transform: scale($scaleSize);
	-webkit-transform: scale($scaleSize);
}
@mixin border-radius($radius: 0px) {
	border-radius: $radius;
	-o-border-radius: $radius;
	-ms-border-radius: $radius;
	-moz-border-radius: $radius;
	-webkit-border-radius: $radius;
}


.volSlider {
	padding-left: 14px;
	padding-right: 14px;
	& .slideSingle{
		padding: 30px 10px;
		& .bundleTitle {
			margin: 0;
			font-size: 16px;
			font-weight: 300;
			color: $darkGray;
			margin-bottom: 4px;
			@include transition(.2s);
		}
		& p {
			margin: 0;
			color: $lsBlue;
			font-size: 11px;
			@include transition(.2s);
		}
		& .bundleInfo {
			margin: 0;
			font-size: 28px;
			color: $lsBlue;
			@include transition(.2s);
		}
		& .BundleExpiry {
			margin: 0;
			font-size: 10px;
			color: $darkGray;
			@include transition(.2s);
		}
	}
	& .volArrow{
		top: 42%;
		z-index: 1;
		width: 22px;
		height: 22px;
		color: $lsBlue;
		text-align:center;
		position: absolute;
		border: 1px solid $lsBlue;
		@include border-radius(3px);
		&.volNxt{
			left: 0;
			background: #f4f4f4 url('../images/arrow_slide_n.png') no-repeat center center;
		}
		&.volPrv{
			right: 0;
			background: #f4f4f4 url('../images/arrow_slide_p.png') no-repeat center center;
		}
	}
	& .slick-track {
		padding-top: 16px;
		padding-bottom: 16px;
	}
	/* Slide Jump issue set Start */
	& .slick-slide{
		@include scale(0.72);
		@include transition(0.3s);
		border: 2px solid $lsBlue;
	}
	& .slick-slide.slick-center {
		@include scale(1.2);
		background: $lsBlue;
		/* Slide Jump issue set End */
		&...

JavaScript

$(document).ready(function(){
  jQuery('.volSlider').slick({
    // speed: 750,
    dots: false,
    arrows: true,
    infinite: true,
    autoplay: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '0px',
    focusOnSelect: true,
    nextArrow: '<span class="volArrow volNxt"> &#10094; </span>',
    prevArrow: '<span class="volArrow volPrv"> &#10095; </span>',
  });
});