Simple Pure JQuery Slider With AutoPlay On_Off Feature

Just about every website have to have several attentions which may only get by an incredible Slider which may catch your prospective customers eyes together with let these phones stay there which may increase the huge benefits additionally. So process it but also need to worry about on the back conclude problems. There are numerous sliders upon internet however the size are likely to be to high which may effect your loading interval so think hard before using them.< ! –more–>

This JavaScript-JQuery Image Slider manufactured by utilizing JQuery together with JavaScript technique, there can be a jquery involve but zero external jquery record. It is usually pretty wonderful slider which work towards all key browser, including FOR INSTANCE variants via IE9 to be able to IE11. This Slider is reasonably custom-made and capability to add fundamentally images. On top of that, it allow anyone add textual content and back-links into etc involved with it. It is in fact Light Fat Slider for the reason that it’s didn’t use any kind jquery so it ensure your site should not decelerate.

Features:

1.) Pure JavaScript Added.
2.) No External JavaScript Or JQuery File.
3.) Pure CSS3 Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style>
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 1300px;
height: 600px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
</style>

JavaScript:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
//<![CDATA[
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
//]]>
</script>

HTML:

<h1>Incredibly Basic Slider</h1>
<div id="slider">
<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>
<ul>
<li><img src="Slider-Images1.jpg"/></li>
<li><img src="Slider-Images2.jpg"/></li>
<li><img src="Slider-Images3.jpg"/></li>
<li><img src="Slider-Images4.jpg"/></li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>

Customization:

1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…