Today, We want to share with you testimonial slider html javascript.In this post we will show you simple testimonial slider bootstrap, hear for responsive testimonial slider we will give you demo and example for implement.In this post, we will learn about
Bootstrap Testimonial Slider free Download with an example.
pure css testimonial slider
index.html
using slick
$(document).ready(function() { $(".imresizeronial-carousel").slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: false, arrows: true, prevArrow: $(".imresizeronial-carousel-controls .prev"), nextArrow: $(".imresizeronial-carousel-controls .next") }); });
Testimonials Slider Example with Demo
HTML Code
Krunal A. Sisodiya
Litanswers is one of the best sources to get free answers for Chegg Questions, At Lit Answers you can easily ask for any question and we will reply back with.
Mr. Ankit Kathiriya
Litanswers & Textsheet alternatives; and lots more. Sound's good? Let's get started.
Naresh Chovatiya
This site uses cookies as well as records your IP address for usage statistics. Read more. OK. Skip to Main Content. LIT Library: LIT Library FAQs banner.
Mayur G Dhameliya
Do you help people heal? Use this website to promote your services and testimonials and gain some customers in no time!
Ms. Bhavik R. Tarapara
Textsheet Alternatives 2020 Textsheet.com was a great source of answers to homework and assignments, hence was preferred by a lot.
Jquery Code
// vars 'use strict' var imresizer = document.getElementById("imresizer"), imresizerDots = Array.prototype.slice.call(document.getElementById("imresizer-points").children), imresizerContent = Array.prototype.slice.call(document.getElementById("imresizer-content").children), imresizerLeftArrow = document.getElementById("left-arrow"), imresizerRightArrow = document.getElementById("right-arrow"), imresizerSpeed = 4500, currentBanner = 0, currentActive = 0, imresizerTimer, touchStartPos, touchEndPos, touchPosDiff, ignoreTouch = 30; ; window.onload = function() { // Testim Script function playBanner(slide) { for (var k = 0; k < imresizerDots.length; k++) { imresizerContent[k].classList.remove("active"); imresizerContent[k].classList.remove("inactive"); imresizerDots[k].classList.remove("active"); } if (slide < 0) { slide = currentBanner = imresizerContent.length-1; } if (slide > imresizerContent.length - 1) { slide = currentBanner = 0; } if (currentActive != currentBanner) { imresizerContent[currentActive].classList.add("inactive"); } imresizerContent[slide].classList.add("active"); imresizerDots[slide].classList.add("active"); currentActive = currentBanner; clearTimeout(imresizerTimer); imresizerTimer = setTimeout(function() { playBanner(currentBanner += 1); }, imresizerSpeed) } imresizerLeftArrow.addEventListener("click", function() { playBanner(currentBanner -= 1); }) imresizerRightArrow.addEventListener("click", function() { playBanner(currentBanner += 1); }) for (var l = 0; l < imresizerDots.length; l++) { imresizerDots[l].addEventListener("click", function() { playBanner(currentBanner = imresizerDots.indexOf(this)); }) } playBanner(currentBanner); // keyboard shortcuts document.addEventListener("keyup", function(e) { switch (e.keyCode) { case 37: imresizerLeftArrow.click(); break; case 39: imresizerRightArrow.click(); break; case 39: imresizerRightArrow.click(); break; default: break; } }) imresizer.addEventListener("touchstart", function(e) { touchStartPos = e.changedTouches[0].clientX; }) imresizer.addEventListener("touchend", function(e) { touchEndPos = e.changedTouches[0].clientX; touchPosDiff = touchStartPos - touchEndPos; console.log(touchPosDiff); console.log(touchStartPos); console.log(touchEndPos); if (touchPosDiff > 0 + ignoreTouch) { imresizerLeftArrow.click(); } else if (touchPosDiff < 0 - ignoreTouch) { imresizerRightArrow.click(); } else { return; } }) }
CSS Code
@import url(//cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css); *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; -moz-user-select: none; user-select: none; cursor: default; } html { width: 100%; height: auto; } body { width: 100%; height: auto; font-size: 16px; font-family: Dubai-Light; background: rgba(30,30,30); } .imresizer { width: 100%; position: absolute; top: 50%; -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -ms-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); } .imresizer .wrap { position: relative; width: 100%; max-width: 1020px; padding: 40px 20px; margin: auto; } .imresizer .arrow { display: block; position: absolute; color: #eee; cursor: pointer; font-size: 2em; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding: 5px; z-index: 22222222; } .imresizer .arrow:before { cursor: pointer; } .imresizer .arrow:hover { color: #ea830e; } .imresizer .arrow.left { left: 10px; } .imresizer .arrow.right { right: 10px; } .imresizer .points { text-align: center; position: absolute; width: 100%; bottom: 60px; left: 0; display: block; z-index: 3333; height: 12px; } .imresizer .points .point { list-style-type: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #eee; margin: 0 10px; cursor: pointer; -webkit-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; position: relative; } .imresizer .points .point.active, .imresizer .points .point:hover { background: #ea830e; border-color: #ea830e; } .imresizer .points .point.active { -webkit-animation: imresizer-scale .5s ease-in-out forwards; -moz-animation: imresizer-scale .5s ease-in-out forwards; -ms-animation: imresizer-scale .5s ease-in-out forwards; -o-animation: imresizer-scale .5s ease-in-out forwards; animation: imresizer-scale .5s ease-in-out forwards; } .imresizer .cont { position: relative; overflow: hidden; } .imresizer .cont > div { text-align: center; position: absolute; top: 0; left: 0; padding: 0 0 70px 0; opacity: 0; } .imresizer .cont > div.inactive { opacity: 1; } .imresizer .cont > div.active { position: relative; opacity: 1; } .imresizer .cont div .img img { display: block; width: 100px; height: 100px; margin: auto; border-radius: 50%; } .imresizer .cont div h2 { color: #ea830e; font-size: 1em; margin: 15px 0; } .imresizer .cont div p { font-size: 1.15em; color: #eee; width: 80%; margin: auto; } .imresizer .cont div.active .img img { -webkit-animation: imresizer-show .5s ease-in-out forwards; -moz-animation: imresizer-show .5s ease-in-out forwards; -ms-animation: imresizer-show .5s ease-in-out forwards; -o-animation: imresizer-show .5s ease-in-out forwards; animation: imresizer-show .5s ease-in-out forwards; } .imresizer .cont div.active h2 { -webkit-animation: imresizer-content-in .4s ease-in-out forwards; -moz-animation: imresizer-content-in .4s ease-in-out forwards; -ms-animation: imresizer-content-in .4s ease-in-out forwards; -o-animation: imresizer-content-in .4s ease-in-out forwards; animation: imresizer-content-in .4s ease-in-out forwards; } .imresizer .cont div.active p { -webkit-animation: imresizer-content-in .5s ease-in-out forwards; -moz-animation: imresizer-content-in .5s ease-in-out forwards; -ms-animation: imresizer-content-in .5s ease-in-out forwards; -o-animation: imresizer-content-in .5s ease-in-out forwards; animation: imresizer-content-in .5s ease-in-out forwards; } .imresizer .cont div.inactive .img img { -webkit-animation: imresizer-hide .5s ease-in-out forwards; -moz-animation: imresizer-hide .5s ease-in-out forwards; -ms-animation: imresizer-hide .5s ease-in-out forwards; -o-animation: imresizer-hide .5s ease-in-out forwards; animation: imresizer-hide .5s ease-in-out forwards; } .imresizer .cont div.inactive h2 { -webkit-animation: imresizer-content-out .4s ease-in-out forwards; -moz-animation: imresizer-content-out .4s ease-in-out forwards; -ms-animation: imresizer-content-out .4s ease-in-out forwards; -o-animation: imresizer-content-out .4s ease-in-out forwards; animation: imresizer-content-out .4s ease-in-out forwards; } .imresizer .cont div.inactive p { -webkit-animation: imresizer-content-out .5s ease-in-out forwards; -moz-animation: imresizer-content-out .5s ease-in-out forwards; -ms-animation: imresizer-content-out .5s ease-in-out forwards; -o-animation: imresizer-content-out .5s ease-in-out forwards; animation: imresizer-content-out .5s ease-in-out forwards; } @-webkit-keyframes imresizer-scale { 0% { -webkit-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -webkit-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -webkit-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -webkit-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @-moz-keyframes imresizer-scale { 0% { -moz-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -moz-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -moz-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -moz-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @-ms-keyframes imresizer-scale { 0% { -ms-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -ms-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -ms-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -ms-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @-o-keyframes imresizer-scale { 0% { -o-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -o-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -o-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -o-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @keyframes imresizer-scale { 0% { box-shadow: 0px 0px 0px 0px #eee; } 35% { box-shadow: 0px 0px 10px 5px #eee; } 70% { box-shadow: 0px 0px 10px 5px #ea830e; } 100% { box-shadow: 0px 0px 0px 0px #ea830e; } } @-webkit-keyframes imresizer-content-in { from { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes imresizer-content-in { from { opacity: 0; -moz-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes imresizer-content-in { from { opacity: 0; -ms-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes imresizer-content-in { from { opacity: 0; -o-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } } @keyframes imresizer-content-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes imresizer-content-out { from { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-moz-keyframes imresizer-content-out { from { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-ms-keyframes imresizer-content-out { from { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -ms-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes imresizer-content-out { from { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); transform: translateY(-100%); } } @keyframes imresizer-content-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } } @-webkit-keyframes imresizer-show { from { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes imresizer-show { from { opacity: 0; -moz-transform: scale(0); transform: scale(0); } to { opacity: 1; -moz-transform: scale(1); transform: scale(1); } } @-ms-keyframes imresizer-show { from { opacity: 0; -ms-transform: scale(0); transform: scale(0); } to { opacity: 1; -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes imresizer-show { from { opacity: 0; -o-transform: scale(0); transform: scale(0); } to { opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes imresizer-show { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @-webkit-keyframes imresizer-hide { from { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } to { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @-moz-keyframes imresizer-hide { from { opacity: 1; -moz-transform: scale(1); transform: scale(1); } to { opacity: 0; -moz-transform: scale(0); transform: scale(0); } } @-ms-keyframes imresizer-hide { from { opacity: 1; -ms-transform: scale(1); transform: scale(1); } to { opacity: 0; -ms-transform: scale(0); transform: scale(0); } } @-o-keyframes imresizer-hide { from { opacity: 1; -o-transform: scale(1); transform: scale(1); } to { opacity: 0; -o-transform: scale(0); transform: scale(0); } } @keyframes imresizer-hide { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0); } } @media all and (max-width: 300px) { body { font-size: 14px; } } @media all and (max-width: 500px) { .imresizer .arrow { font-size: 1.5em; } .imresizer .cont div p { line-height: 25px; } }
Demo : https://codepen.io/feyinway/pen/LjMPgv
I hope you get an idea about hubspot testimonial slider.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.