Simple responsive Jquery image Slider without using any plugin

Simple responsive Jquery image Slider without using plugin

To display multiple images under a specific area generally we use controls like Carousel or Slider. It was noticed these Control majorly appears in main page. Here in the below app I am creating an easily configurable JQuery image Slider. To show you the demo here I am with 3 files index.htm, slider.js and main.css. Slider.js and main.css embedded in index.htm file. By simply copying the below files you can create your own free Jquery Slider.

The logic I implemented here is so simple. In my HTML page I have 2 div’s. One is for slider images and the other one I am using for Auto Slide Show. In my first div I have a ul element. Under this in each li I am loading images using simple image tag from HTML. To customize my Jquery image slider better here I added 2 anchor tags for next and previous actions.

To maintain a healthy look and feel I have few CSS classes in style.css file. As it is a simple jquery slider the main logic is inside the js file. In js file I am with 4 variables. IndivisualSlideWidth and IndivisualSlideHeight are storing li width and height. NumberOfSlides storing total number of images I want to show in Slider. In TotalWidthOfAllSlides I am calculating and storing the total width of UL element. During slide show I am hiding the total length and showing each slide independently. After this in my js file I have 2 functions moveSlideLeft() and moveSlideRight(). These function are responsible for slides movement. To configure auto slider option under on change event of autoOptionCheckbox I am calling the moveSlideRight() function. Here for interval between each slide I declared 5000 milliseconds.

jquery-slider.htm

<!DOCTYPE html>
<html>
<head>
<title>Simple JQuery image Slider</title>
<!--JQuery CDN Link-->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<!--Applying Styles to the Page-->
<link rel="stylesheet" href="main.css">
<script src="slider.js"></script>
</head>
<body>
<h2>JQuery image Slider</h2>
<div id="jq_slider">
<a href="#" class="go_next">>></a>
<a href="#" class="go_prev"><<</a>
<ul>
<li><img src="Slide-A.jpg" alt="Katrina Kaif HD Still" title="Katrina Kaif HD Still" /></li>
<li><img src="Slide-B.jpg" alt="Priyanka Chopra HD Still" title="Priyanka Chopra HD Still" /></li>
<li><img src="Slide-C.jpg" alt="Deepika Paducon HD Still" title="Deepika Paducon HD Still" /></li>
<li><img src="Slide-D.jpg" alt="Sonakshi Sinha HD Still" title="Sonakshi Sinha HD Still" /></li>
</ul>  
</div>
<div class="auto_slider">
<input type="checkbox" id="autoOptionCheckbox">
<label for="checkbox">Auto Slider Option</label>
</div>
</body>
</html>

slider.js

$(document).ready(function () {

/* The below two variables are defined for width and height of Slides */
var IndivisualSlideWidth = $('#jq_slider ul li').width();
var IndivisualSlideHeight = $('#jq_slider ul li').height();

/* The auto Slider Function */
$('#autoOptionCheckbox').change(function(){
/* Defining time in milliseconds for auto Slider option */
setInterval(function () {
/* Calling the Function to rotate Slides */
moveSlideRight();
}, 5000);
});

/* Counting the Number of Slides */
var NumberOfSlides = $('#jq_slider ul li').length;

/* Calculating all Slides width for UL element */
var TotalWidthOfAllSlides = NumberOfSlides * IndivisualSlideWidth;

/* Setting width and height for main div */
$('#jq_slider').css({ width: IndivisualSlideWidth, height: IndivisualSlideHeight });

$('#jq_slider ul').css({ width: TotalWidthOfAllSlides, marginLeft: - IndivisualSlideWidth });
$('#jq_slider ul li:last-child').prependTo('#jq_slider ul');

/* This Function is responsible for moving Slide to left */
function moveSlideLeft() {
$('#jq_slider ul').animate({
left: + IndivisualSlideWidth
}, 300, function () {
$('#jq_slider ul li:last-child').prependTo('#jq_slider ul');
$('#jq_slider ul').css('left', '');
});
};

/* This Function is responsible for moving Slide to right */
function moveSlideRight() {
$('#jq_slider ul').animate({
left: - IndivisualSlideWidth
}, 300, function () {
$('#jq_slider ul li:first-child').appendTo('#jq_slider ul');
$('#jq_slider ul').css('left', '');
});
};

/* Handling previous Click Funtionality */
$('a.go_prev').click(function () {
moveSlideLeft();
});

/* Handling next Click Funtionality */
$('a.go_next').click(function () {
moveSlideRight();
});
});

main.css

html, body { margin: 0; padding: 0; font-family: 'Verdana'; background: #c8fcff; color: #000; }
h2 { text-align: center; }

#jq_slider { position: relative; overflow: hidden; border-radius: 6px; margin: 20px auto 0 auto; }

#jq_slider ul { position: relative; margin: 0; padding: 0; list-style: none; }
#jq_slider ul li { position: relative; display: block; width: 700px; height: 350px; text-align: center; float: left; margin: 0; padding: 0; }

a.go_prev, a.go_next { position: absolute; z-index: 999; top: 40%; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #FFF; text-decoration: none; opacity: 0.7; cursor: pointer; font-weight: normal; font-size: 16px; }
a.go_prev:hover, a.go_next:hover { opacity: 0.9; -webkit-transition: all 0.2s ease; }
a.go_prev { border-radius: 0 3px 3px 0; }
a.go_next { border-radius: 3px 0 0 3px; right: 0; }

.auto_slider { margin: 10px auto; position: relative; font-size: 16px; width: 180px; }

images

Slide-ASlide-A.jpg

Slide-BSlide-B.jpg

Slide-CSlide-C.jpg

Slide-DSlide-D.jpg