How To Create Image Carousel

Submitted by: 
Language: 
Visitors have accessed this post 1094 times.

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. <div id="carousel_image" style="margin:50px;">
  2. <img class="start_image" src="image/33.png" style="margin-left:-275px;">
  3. <img src="image/22.jpg" style="margin-left:-275px;">
  4. <img src="image/11.png" style="margin-left:-275px;">
  5. <img src="image/44.jpg" style="margin-left:-275px;">
  6. <img src="image/55.jpg" style="margin-left:-275px;">
  7.  
  8. <div class="carousel_button" id="previous_image" style="margin-left:-260px; margin-top:100px;">
  9. <input type="button" value="Previous">
  10. </div>
  11. <div class="carousel_button" id="next_image" style="margin-right:-255px; margin-top:100px;">
  12. <input type="button" value="Next">
  13. </div>
  14. </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.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.