Sun. Nov 17th, 2019

Codes

Codes for Coders

No JQuery only Javascript Slider by Rishap Gandhi

2 min read
No Jquery Only Javascript Slider by Rishap Gandhi

No Jquery Only Javascript Slider by Rishap Gandhi

No JQuery only Javascript Slider by Rishap Gandhi

No Jquery Only Javascript Slider by Rishap Gandhi
No Jquery Only Javascript Slider by Rishap Gandhi

Today I will tell you how to create a Simple Javascript Slider without using any jquery. If you know little bit of Javascript then it will be really easy for you to understand how I created this slider. So lets start with it.

First of we will create a basic html section for the slider. In this html I have taken 4 images for the slider. The slider will move from the 1st to 4th then will continue from the frist 1st again,.

<div class="container">
<div class="image-slider-wrapper">
<ul id="image_slider">
<li><img src="images/1.jpg" width="760px" height="300px"></li>
<li><img src="images/2" width="760px" height="300px"></li>
<li><img src="images/3" width="760px" height="300px"></li>
<li><img src="images/4" width="760px" height="300px"></li>
</ul>
</div>
</div>

 

After creating the HTML we need to implement some CSS for the slider.

.container{
width:800px;
height:370px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: #c6c6c6;
}
.image-slider-wrapper{
overflow: hidden;
}
#image_slider{
position: relative;
height: 280px;
padding:0;
}
#image_slider li{
max-width: 100%;
float:left;
list-style: none;
}

Now we will start with the Javascript Slider code. First of we will create an init() function to initiate the slider.

var ul;
var liItems;
var imageWidth;
var imageNumber;
var currentImage=0;

function init(){

ul = document.getElementById('image_slider');
liItems = ul.children;
imageNumber = liItems.length;
imageWidth = liItems[0].children[0].offsetWidth;
ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
slider(ul);
}

The above function will initiate the slide. Now next function this slider function is about the sliding the slider. We are sliding the slider from right to left position. So in this function, we are getting the current image active and slider accordingly to it.

function slider(ul){
animate({
delay:17,
duration: 3000,
delta:function(p){return Math.max(0, -1 + 2 * p)},
step:function(delta){
ul.style.left = '-' + parseInt(currentImage * imageWidth + delta * imageWidth) + 'px';
},
callback:function(){
currentImage++;
if(currentImage < imageNumber-1){
slider(ul);
}
else{
var leftPosition = (imageNumber - 1) * imageWidth;
setTimeout(function(){goBack(leftPosition)},2000);
setTimeout(function(){slider(ul)}, 4000);
}
}
});
}

Next function is goback(). It will reset the slider from the start after reaching on the last image of slider.

function goBack(leftPosition){
currentImage = 0;
var id = setInterval(function(){
if(leftPosition >= 0){
ul.style.left = '-' + parseInt(leftPosition) + 'px';
leftPosition -= imageWidth / 10;
}
else{
clearInterval(id);
}
}, 17);
}

Last is the animate() function which will animate the complete slider from right to left.

function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration
if(progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.dalay || 17);
}
window.onload = init;

Download Code by Rishap GandhiCompress and Resize of Image in PHP by Rishap Gandhi

No JQuery only Javascript Slider by Rishap Gandhi

Leave a Reply

Your email address will not be published. Required fields are marked *