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">❮</a>
<a class="icon">❯</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";