How To Create Image Carousel

Submitted by alpha_luna on Friday, April 8, 2016 - 13:11.
In this tutorial, we are going to learn about on How To Create Image Carousel. Now, we’re creating a beautiful image carousel using jQuery. In this source code, I have five (5) images to run for the carousel source code. The feature of this tutorial has a next and previous button for circling the image back to back.

Directions:

Image Carousel HTML

In this code below, this is HTML code for our five (5) images including our next and previous button controls. 
  1. <center>
  2. <div id="carousel_image" style="margin:50px;">
  3. 	<img class="start_image" src="image/33.png" style="margin-left:-275px;">
  4. 	<img src="image/22.jpg" style="margin-left:-275px;">
  5. 	<img src="image/11.png" style="margin-left:-275px;">
  6. 	<img src="image/44.jpg" style="margin-left:-275px;">
  7. 	<img src="image/55.jpg" style="margin-left:-275px;">
  8.  
  9. 	<div class="carousel_button" id="previous_image" style="margin-left:-260px; margin-top:100px;">
  10. 		<input type="button" value="Previous">
  11. 	</div>
  12. 	<div class="carousel_button" id="next_image" style="margin-right:-255px; margin-top:100px;">
  13. 		<input type="button" value="Next">
  14. 	</div>	
  15. </div>
  16. </center>

Image Carousel jQuery

This script function is used for circling the image back to back. When we click our controls. 
  1. <script src="js/code_js.js"></script>
  2.  
  3. <script>
  4. $(document).ready(function() {
  5. 	$(".start_image").show();
  6. 	$("#carousel_image").hover(function(){$(".carousel_button").show();},function(){$(".carousel_button").hide();})
  7. 	$(".carousel_button").on('click',function(){
  8. 		var id = $(this).attr('id');
  9. 		var nav;
  10. 		if(id=="previous_image") {
  11. 			nav = $("img.start_image").prev('img');
  12. 			if(nav.length == 0) nav = $("img").last();
  13. 		} else if(id=="next_image") {
  14. 			nav = $("img.start_image").next('img');
  15. 			if(nav.length == 0) nav = $("img").first();
  16. 		}
  17. 		$("img.start_image").hide();
  18. 		$("img.start_image").removeClass("start_image");
  19. 		nav.addClass("start_image");
  20. 		nav.fadeIn(1000);
  21. 	});	
  22. });
  23. </script>

Image Carousel CSS

This is the CSS code for our Image Carousel. 
  1. <style type="text/css">
  2. .carousel_button {
  3. 	display:none;
  4. 	cursor:pointer;
  5. 	position: absolute;
  6. 	top: 100px;
  7. 	opacity: 0.8;
  8. 	padding: 10px;
  9. 	background: #333;
  10. 	color: #FFF;
  11. 	font-weight: bold;
  12. 	font-size: 20px;
  13.  
  14. 	}
  15. #previous_image {
  16. 	left:0px;
  17. 	}
  18.  
  19. #next_image {
  20. 	right:0px;
  21. 	}
  22.  
  23. #carousel_image img {
  24. 	display:none;
  25. 	}
  26.  
  27. #carousel_image {
  28. 	position:relative;
  29. 	width:300px;
  30. 	height:200px;
  31. 	}
  32. </style>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.

Tags

Add new comment

About text formats
  • 2092 views