How to develop a responsive image slider using pure javascript and css




Image sliders or carousel slider is an essential part of a websites, yet it depends on the requirement also. There are lots of image slider is available in the web with amazing features. Some time web developers and web designers facing issues to integrate the slider with web page due to conflict of Jquery libraries. If the web page is loaded with lots of third party plugins, some time Jquery conflict appears. To overcome the issue i have tried to develop a image slider without using jquery libraries. I have developed using pure Javascript and css.

The following code had written to create a image slider using pure javascript

<!DOCTYPE html>
<html>
<head>
<style>

.sliders {.sliders {  max-width: 900px;  position: relative;  margin: auto;}
.prevbtn, .nextbtn { top: 45%;      cursor: pointer;    position: absolute;  
  width: auto;    padding: 15px;    margin-top: -21px;    color: #0a0a0a;  
  font-weight: bold;    font-size: 19px;    transition: 0.7s ease;   
 background: #e2d8d8;  border-radius: 0 3px 3px 0;}

.nextbtn {  right: 0;  border-radius: 3px 0 0 3px;}

.caption {  color: #f2f2f2;    font-size: 15px;    padding: 12px 10px; 
  position: absolute;    bottom: 1%;    width: 97.9%;    text-align: center;  
  background: rgba(19, 17, 17, 0.36);
}
.bullet {  cursor: pointer;  height: 15px;  width: 15px;  margin: 0 2px;  background-color: #bbb;  border-radius: 50%;  display: inline-block;  transition: background-color 0.6s ease;}
.active, .bullet:hover {  background-color: #717171;}
@media only screen and (max-width: 300px) {  .prev, .next,.text {font-size: 11px}}.bullets{text-align:center;}.jquerytrainingSlides img{width:100%;}

</style>
</head>
<body>

<div class="sliders">

<div class="jquerytrainingSlides ">

<img src="slide1.png">
<div class="caption">Caption One</div>
</div>

 

<div class="jquerytrainingSlides ">

<img src="slide2.png">
<div class="caption">Caption Two</div>
</div>
<div class="jquerytrainingSlides ">

<img src="slide3.png">
<div class="caption">Caption Three</div>
</div>

<a class="prevbtn" onclick="navigateSlide(-1)">&#62;</a>
<a class="nextbtn" onclick="navigateSlide(1)">&#60;</a>

</div>
<br>

<div class="bullets">
<span class="bullet" onclick="jumpSlide(1)"></span>
<span class="bullet" onclick="jumpSlide(2)"></span>
<span class="bullet" onclick="jumpSlide(3)"></span>

</div>

<script>
var slideNumber = 1;
function jquerytrainingSlide(slide) {
this.slideNumber = slide;
this.processSlide(this.slideNumber);
}

jquerytrainingSlide.prototype.processSlide = function(n) {
var i;
var slides = document.getElementsByClassName("jquerytrainingSlides");
var bullet = document.getElementsByClassName("bullet");
if (n > slides.length) {slideNumber = 1}
if (n < 1) {slideNumber = slides.length}
for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";
}
for (i = 0; i < bullet.length; i++) {
bullet[i].className = bullet[i].className.replace(" active", "");
}
slides[slideNumber-1].style.display = "block";
bullet[slideNumber-1].className += " active";
};

var jquerytrainingSlideObject= new jquerytrainingSlide(1);

function navigateSlide(n) {
jquerytrainingSlideObject.processSlide(slideNumber += n);
}

function jumpSlide(n) {
jquerytrainingSlideObject.processSlide(slideNumber = n);
}
</script>

</body>
</html>

Leave comment

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