Google trends Public Holidays Coupon Code Code Compiler

Simple Testimonial slider using HTML and CSS and JS


Dec 25, 2018

Simple Testimonial slider using HTML and CSS and JS

In this article I have gone through all it's the basic part of Html CSS & javascript. After reading this tutorial you will be expert in creating any types of testimonials just using the HTML CSS and javascript and the main things of this tutorial is responsive you can see after creating such a testimonials it will be responsive by nature. If you want to get all its content including the image then you can get it just commenting in the comment section.

CSS code 


body{
   text-align:center;
}
.container{
   max-width:800px;
   margin:auto;
   position:relative;
   border:1px solid black;
}
.item{
   width:800px;
   hight:300px;
   text-align:center;
   margin:auto;
}
.icon{
   width:25px;padding:10px;line-height:40px;background:black;color:white;cursor:pointer;text-align:center;
}

HTML code 


<div class="container">
   <div class="item">
    <img src="images/Untitled.png" width="22%">
    <h3><b>Significant Techno Part-1</b></h3>
    <p>
      "Please Subscribe this channel.and click on Notification icon.bcz if in feature i will upload any video then you get notification. Thank you"
    </p>
                     
    </div>
    <div class="item">
         <img src="images/Untitled.png" width="22%">
     <h3><b>Significant Techno Part-2</b></h3>
      <p>
         "Today i teach you Testimonial slide. I hope it's usefull. If You like this video then click on like icon and and share any where facebook, google, twitter and comment if have any query. Thank you guys."
      </p>
    </div>
        <a class="icon">&#10094;</a>
        <a class="icon">&#10095;</a>
</div>

JAVASCRIPT code 


var index=1;
showdiv(index);
function getdiv(n){
   showdiv(index +=n);
}
function showdiv(n){
   var i;
   var as = document.getElementsByClassName("item");
   if(n > as.length){
     index = 1;
   }
   if(n < 1 ){
    index = as.length;
   }
for(i=0;i<as.length;i++){ 
as[i].style.display="none" ;
}
 as[index-1].style.display="block";

 

Copyright 2024. All rights are reserved