Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Image slider using javscript and css

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.


 

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>
Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts