BX slider carousel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
<ul class="bxslider">
			<div class="slides" id="slide1"><img src="http://www.inihdwallpaper.com/wp-content/uploads/wallpaper/amazingpict/wallpapers-078//nice%20sunset%20graphic.jpg"/>
			</div>
			<div class="slides" id="slide2"><img src="https://warpnet-media.s3.amazonaws.com/9d3620a65e7909aadd2d3c59c4e2519784e6c2edd69cbbc31b6ca59e"/>
			</div>
			<div class="slides" id="slide3"><img src="https://www.bhmpics.com/walls/holidays_top_nice-other.jpg"/>
			</div>
			<div class="slides" id="slide4"><img src="http://www.inihdwallpaper.com/wp-content/uploads/wallpaper/amazingpict/wallpapers-078//nice%20sunset%20graphic.jpg"/>
			</div>
			<div class="slides" id="slide5"><img src="https://warpnet-media.s3.amazonaws.com/9d3620a65e7909aadd2d3c59c4e2519784e6c2edd69cbbc31b6ca59e"/>
			</div>
			<div class="slides" id="slide6"><img src="https://www.bhmpics.com/walls/holidays_top_nice-other.jpg"/>
			</div>
			
		</ul>
		<div id="bx-pager">
		        <a data-slide-index="0" class="bx-pager-link" href=""> 1</a>
		        
		        <a data-slide-index="1" class="bx-pager-link" href=""> 2</a>
		        
		        <a data-slide-index="2" class="bx-pager-link" href=""> 3</a>

		        <a data-slide-index="3" class="bx-pager-link" href=""> 4</a>
		        
		        <a data-slide-index="4" class="bx-pager-link" href=""> 5</a>
		        
		        <a data-slide-index="5" class="bx-pager-link" href=""> 6</a>
		        
		</div>

CSS

/* CSS Document for bx carousel */

#bx-pager {
	position: absolute;
	bottom: 38%;
	right: 1%;
}
#bx-pager a {
	padding-left: 10px;
	padding-right: 10px;
	display: block;
	background: #9FDADA;
	border: 1px solid;
	text-decoration: none;
	color: black;
	border-radius: 10px;
	font-size: 29px;
	box-shadow: 0px 3px 7px black;
	margin-top: 13px;
}
#bx-pager a.active {
	background: #B26816;
}
/* for images in slider */
.slides img {
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 100%;
}
.slides {
	backface-visibility: hidden;
}

/* for full screen slider */
body {
	height: 100%;
	width: 100%;
	margin: 0px !important;
	overflow-y: hidden;
}
.bx-wrapper {
    border: none !important;
}
.bx-viewport {
	height: 100% !important;
	box-shadow: none !important;
	border: none !important;
}

/* for play pause buttons */
.buttons {
	border-radius: 10px;
	width: 70px;
	height: 50px;
	box-shadow: 0px 1px 1px black;
	background: rgba(255,255,255,0.7);
	color: black;
	position: absolute;
	right: 3%;
	line-height: 45px;
	font-size: 25px;
	text-align: center;
	cursor: pointer;
}
#playButton {
	top: 70%;
}
#pauseButton {
	top: 80%;
}

JavaScript

$(document).ready(function () {
    var slideNumber = 0;
    var slider = $('.bxslider').bxSlider({
      auto: true,
      startSlide: 0, // name suggests itself
      randomStart: false,
      pagerCustom: '#bx-pager', // div for custom pager labels
      slideSelector: 'div:not(.bx-clone)',
      preloadImages: 'all',
      controls: false,
      onSlideBefore: function() {
        slideNumber = slider.getCurrentSlide();
      },
      onSlideAfter: function() {
        var slideNumberBefore = slideNumber;
        slideNumber = slider.getCurrentSlide();
        if(slideNumber != slideNumberBefore) {
            slider.stopAuto(); // stops auto on click of pager
            slider.startAuto(); // starts auto on click of pager
          }
      }
    });
  $(document).on('click','.bx-pager-link',function() {
        slider.stopAuto(); // stops auto on click of pager
        slider.startAuto(); // starts auto on click of pager
    });
    $(document).on('click','#playButton',function() {
        slider.startAuto(); // starts auto on click of pager
    });
    $(document).on('click','#pauseButton',function() {
        slider.stopAuto(); // stops auto on click of pager
    });
});