Struggling to create a responsive slider using Bootstrap? You're not alone. Check out the code below and let me know what I'm missing. If there's a better way to do this, feel free to share some tutorial links.
HTML
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xm-12 col-lg-12 img-responsive">
<div id="slideShow"></div>
</div>
</div>
</div> <!-- container -->
CSS
#slideShow {
}
#slideShow img{
position: absolute; // if i delete then the slider becomes responsive the images don't work as a slide //
opacity: 0;
left: 20%;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#slideShow .current{
opacity: 1;
}
body{
padding-top: 50px;
}
JavaScript
window.onload = function(){
/* code for image slideshow */
var imgsrc = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
for(var i = 1; i<=imgsrc.length; i++)
{
var slideShow = document.getElementById("slideShow");
var newImage = new Image();
newImage.src = "image/" + imgsrc[i];
slideShow.appendChild(newImage);
}
slideShow.childNodes[0].setAttribute("class","current img-responsive");
var x = 0;
setInterval(function(){
slideShow.childNodes[x%3].setAttribute("class","img-responsive");
slideShow.childNodes[(x+1)%3].setAttribute("class","current img-responsive");
x++;
},3000);
/* end of code for image slideshow */
}; // end of window onload function