[Tutorial] Image Slider Transition Effects - using javascript and CSS

Image slider transition effects is one technical skill in website when you want to show your product to customers. See below site (image and video)

Explore My Other Channel for More Cool and Valuable Insights

👉 Youtube Learn Tech Tips

👉 Tiktok

👉 Facebook:

File structures

These are my folder and files location in my PC

Javascript - commons.js 

This file will be control image slider transition effects. I have commen in below code, please take a look. This action at 5 seconce will be auto transition to another image.

$(document).ready(function() {

 // Set Default State of each portfolio piece
 $(".sd-paging_btrix").show();
 $(".sd-paging_btrix a:first").addClass("active");

 // Get size of images, how many there are, 
 //   then determin the size of the image reel.
 var imageWidth = $(".sd-window").width();
 var imageSum = $(".sd-image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;

 // Adjust the image reel to its new size
 $(".sd-image_reel").css({'width' : imageReelWidth});

 // sd-paging_btrix + Slider Function
 rotate = function(){ 
     // Get number of times to slide
     var triggerID = $active.attr("rel") - 1;    
     var image_reelPosition = triggerID * imageWidth; 

            // Remove all active class
     $(".sd-paging_btrix a").removeClass('active');  
            // Add active class (the $active is declared 
                          // in the rotateSwitch function)
     $active.addClass('active'); 

     // Slider Animation
     $(".sd-image_reel").animate({left: -image_reelPosition}, 500 );
 }; 

 //Rotation + Timing Event
 rotateSwitch = function(){ 
 
      // This will repeat itself every 5 seconds (milliseconds)
      play = setInterval(function(){    
                 $active = $('.sd-paging_btrix a.active').next();
   
          // If sd-paging_btrix reaches the end go back to first
          if ( $active.length === 0) {   
      $active = $('.sd-paging_btrix a:first'); 
          }
              rotate();    //Trigger the sd-paging_btrix and slider function
     }, 5000);   
 };

 rotateSwitch();   // Run function on launch

 // when hover to image
 $(".sd-image_reel a").hover(function()  {
         clearInterval(play); // Stop the rotation
    }, function() {
       rotateSwitch();  // Resume rotation
    }); 

 //On Click
 $(".sd-paging_btrix a").click(function() { 
 
    // Activate the clicked sd-paging_btrix
    $active = $(this);   
  
    // Reset Timer, Stop the rotation
    clearInterval(play); 
  
    // Trigger rotation immediately
    rotate();     
  
    // Resume rotation
    rotateSwitch(); 

    // Prevent browser jump to link anchor  
    return false;   
 }); 

});

CSS - style.css

This file will control style of website, so easy to use it, please take a look.

.sd-container {
 width: 660px;padding: 0;margin: 0 auto;
}

.sd-image_reel {
 position: absolute;top: 0; left: 0;
}

.sd-image_reel img {float: left;}

.sd-main-view {float: left;position: relative;}

.sd-window {
     -moz-box-shadow: 0px 0px 5px #303030;
     -webkit-box-shadow: 0px 0px 5px #303030;
     box-shadow: 0px 0px 5px #303030;
     border:1px solid #000000;
     height:240px; 
     width: 660px;
     margin-top:15px;overflow: hidden;
     position: relative;
}

.sd-paging_btrix {
     position: absolute;
     bottom: 10px; right: -7px;
     width: 178px; height:47px;
     z-index: 100; /*--Assures the paging stays on the top layer--*/
     text-align: center;
     line-height: 40px;
     background: url(../paging_bg2.png) no-repeat;
     display: none; 
}

.sd-paging_btrix a {
      padding: 5px;text-decoration: none;color: #fff;
}

.sd-paging_btrix a.active {
     font-weight: bold; background: #920000; border: 1px solid #610000;
     -moz-border-radius: 3px;
     -khtml-border-radius: 3px;
     -webkit-border-radius: 3px;
}

.sd-paging_btrix a:hover {font-weight: bold;}

index.html - main site

This file will show to you the GUI same here. I have three button here so i must have three <a> section with 3 image (1.jpg, 2.png, 3,jpg) ...

  <a href="https://learn-tech-tips.blogspot.com/">
               <img alt="Learn Tech Tips" src="1.jpg" width="660" /></a>

<html lang="en">
<head>
  
  <title>Learn Tech Tips:</title>
    
  <link href="css/styles.css" rel="stylesheet"></link>   
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" 
             type="text/javascript"></script>
  <script src="commons.js" type="text/javascript"></script>   
</head>

<body>  

  <div class="sd-container">
    <div class="sd-main-view">
      <div class="sd-window">
        <div class="sd-image_reel">
           <a href="https://learn-tech-tips.blogspot.com/">
               <img alt="Learn Tech Tips" src="1.jpg" width="660" /></a>
           <a href="https://learn-tech-tips.blogspot.com/">
               <img alt="Learn Tech Tips" src="2.png" width="660" /></a>
           <a href="https://learn-tech-tips.blogspot.com/">
               <img alt="Learn Tech Tips" src="3.jpg" width="660" /></a>

        </div>
     </div>
     <div class="sd-paging_btrix">
         <a href="https://www.blogger.com/blogger.g?blogID=1486059340628392194#" 
              rel="1">1</a>
         <a href="https://www.blogger.com/blogger.g?blogID=1486059340628392194#" 
              rel="2">2</a>
         <a href="https://www.blogger.com/blogger.g?blogID=1486059340628392194#" 
              rel="3">3</a>
      </div>
   </div>
 </div>
</body>
</html>

Download source code here

Are you interested in topic Image Slider Transition Effects - using javascript and CSS from Webzone Tech Tips? If you have any thoughts or questions, please share them in the comment section below. I would love to hear from you and chat about it

Webzone Tech Tips Zidane