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.
  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>

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
Images
image slider
image slider using jquery
image slider using javascript
slider

Add new comment

About text formats
  • 2122 views