Simple Testimonial slider using HTML and CSS and JS

Simple Testimonial slider using HTML and CSS and JS

Dec 25, 2018 / HTML / CSS / JavaScript /

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";

 

Comments

ajas ( Aug 3, 2019 07:21:04 )

global99.ae

ajas ( Aug 3, 2019 07:21:03 )

global99.ae

Kelvin ( Jul 25, 2019 01:09:06 )

I want it

Kelvin ( Jul 25, 2019 01:09:02 )

I want it

Would you like to share your thoughts?

Your email address will not be published. Required field are marked*

Copyright 2018. All rights are reserved Significant Techno Web Design & Web Development By Significant Techno