In my quest to create a basic image slider, I've managed to achieve it using a combination of JavaScript and HTML. Take a look at the code provided below.
I've included all the necessary codes for clarity's sake. However, the issue arises with the showItemAtIndex function. Whenever it alters the display property of the images, the webpage unexpectedly scrolls back to the top of the image – quite bizarre.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
@param carousel_id: the tag id containing the carousel components.
The structure of the carousel container should mimic that of Bootstrap.
*/
var ImageSlider = function(carousel_id)
{
var parent = this;
this.selected_item_index = 0;//current index of the visible image (defaulted to the first image)
this.carousel_container = document.getElementById(carousel_id);//container housing the main slider
this.carousel_items = this.carousel_container.getElementsByClassName("carousel-inner")[0].getElementsByClassName("item");
this.carousel_indicators = this.carousel_container.getElementsByClassName("carousel-indicators")[0].getElementsByTagName("li");
//listen to click events on the right arrow, allowing users to navigate to the previous image
this.carousel_container.getElementsByClassName("right carousel-control")[0].addEventListener("click", function(){
var new_item_index = parent.selected_item_index + 1;
new_item_index = new_item_index % parent.carousel_items.length;
showItemAtIndex(new_item_index);
});
//listen to click events on the left arrow, enabling users to view the next image
this.carousel_container.getElementsByClassName("left carousel-control")[0].addEventListener("click", function(){
var new_item_index = parent.selected_item_index - 1;
if (new_item_index < 0) {
new_item_index = new_item_index + parent.carousel_items.length;
}
showItemAtIndex(new_item_index);
});
/*this function will display the item at the specified itemIndex */
var showItemAtIndex = function(itemIndex){
/*
TODO:
step1 : update carousel images
step2 : update carousel-indicators
step3: update this.selected_item_index
*/
/* now we need to display the newly selected item */
var carousel_height = parent.carousel_container.height;
var new_selected_item = parent.carousel_items[itemIndex];
new_selected_item.style.display = "inline-block";
//step1
/* first thing we need to hide the current selected items */
var current_carousel_selected_item = parent.carousel_items[parent.selected_item_index];
current_carousel_selected_item.style.display = "none";
//Animate(current_carousel_selected_item,0);
//step2
/* remove 'active' from all elements */
var carousel_indicators_length = parent.carousel_indicators.length;
for(var i = 0 ; i < carousel_indicators_length ; i++ ){
var monoCarouselIndicator = parent.carousel_indicators[i];
monoCarouselIndicator.className = "";
}
/* add 'active' class to the indicator representing the selected element */
var selectedIndicatorElement = parent.carousel_indicators[itemIndex];
selectedIndicatorElement.className = "active";
//step3
parent.selected_item_index = itemIndex;
}
/* hide all items but leave the selected one (selected = indexed at zero) */
var carousel_item_length = this.carousel_items.length;
for(var i = 1; i < carousel_item_length ; i++){
var monoItem = this.carousel_items[i];
// monoItem.style.height = "0px";
monoItem.style.display = "none";
}
}
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<style>
body {
background: #ececee;
}
</style>
</head>
<body>
<!-- header section -->
<div class="container header" style="height:300px;" >
</div>
<!-- carousel section -->
<div class="container carosel_section" id="carosel_section">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="height: 100%;">
<img style="height: 100%;" class="img-responsive"
src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="item" style="height: 100%;">
<img style="height: 100%;" class="img-responsive"
src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="item" style="height: 100%;">
<img style="height: 100%;" class="img-responsive"
src="http://eskipaper.com/images/images-4.jpg">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button"
data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"
aria-hidden="true"></span> <span class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#myCarousel"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- load image slider -->
<script>
new ImageSlider("myCarousel");
</script>
<!-- bottom section section -->
<div class="container header" style="height:300px;" >
</div>
</body>
</html>