CSS code snippet on Testimonial Carousel 1:
selector{
--distance: -1.8em;
--background: #929292;
--padding: 2;
}
selector .elementor-swiper-button{
width: 2em;
transform: translateX(var(--distance)) translateY(-1em);
height: 2em;
}
selector .elementor-swiper-button.elementor-swiper-button-next{
transform: scaleX(-1) translateX(var(--distance)) translateY(-1em);
}
selector .elementor-swiper-button i{
width: 100%;
height: 0.1em;
background: currentColor;
position: relative;
opacity: 0.7;
transform: translateY(0.97em) scale(calc(1/var(--padding)));
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover i{
opacity: 1;
}
selector .elementor-swiper-button i:before,
selector .elementor-swiper-button i:after{
content: "";
position: absolute;
width: 50%;
transform: rotate(45deg) translateX(-0.04em);
transform-origin: left center;
height: 0.1em;
background: currentColor;
}
selector .elementor-swiper-button i:after{
transform: rotate(-45deg) translateX(-0.04em);
}
selector .elementor-swiper-button:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: var(--background);
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.3;
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover:before{
opacity: 0.8;
}
/* Small Desktop Device */
@media (max-width: 1250px){
selector{
--distance: 0em;
}
}
/* Tablet Device */
@media (max-width: 1024px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
selector .elementor-swiper-button{
font-size: var(--size) !important;
}
}
/* Mobile Device */
@media (max-width: 767px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
}
CSS code snippet on Testimonial Carousel 2 (Full Width Slider):
/* Fix Slider Issues */
selector .elementor-main-swiper{
width: 100% !important;
}
selector .swiper-wrapper{
align-items: flex-start;
}
/* Left and Right Button */
selector{
--distance: 2em;
--background: #fff;
--padding: 2;
}
selector .elementor-swiper-button{
width: 2em;
transform: translateX(var(--distance)) translateY(-1em);
height: 2em;
}
selector .elementor-swiper-button.elementor-swiper-button-next{
transform: scaleX(-1) translateX(var(--distance)) translateY(-1em);
}
selector .elementor-swiper-button i{
width: 100%;
height: 0.1em;
background: currentColor;
position: relative;
opacity: 0.7;
transform: translateY(0.97em) scale(calc(1/var(--padding)));
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover i{
opacity: 1;
}
selector .elementor-swiper-button i:before,
selector .elementor-swiper-button i:after{
content: "";
position: absolute;
width: 50%;
transform: rotate(45deg) translateX(-0.04em);
transform-origin: left center;
height: 0.1em;
background: currentColor;
}
selector .elementor-swiper-button i:after{
transform: rotate(-45deg) translateX(-0.04em);
}
selector .elementor-swiper-button:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: var(--background);
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.3;
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover:before{
opacity: 0.8;
}
/* Tablet Device */
@media (max-width: 1024px){
selector{
--distance: 1em;
--background: #fff;
--padding: 2;
--size: 25px;
}
selector .elementor-swiper-button{
font-size: var(--size) !important;
}
}
/* Mobile Device */
@media (max-width: 767px){
selector{
--distance: 1em;
--background: #fff;
--padding: 2;
--size: 20px;
}
}
JavaScript code snippet for Testimonial Carousel 2 (Full Width Slider):
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
/* Adjust Height */
function adjustSlideHeight(){
$('.full-width-slider').each(function(){
$(this).find('.swiper-wrapper').height($(this).find('.swiper-slide-active').children('.elementor-testimonial').height())
})
}
$(document).ready(function(){
setInterval(adjustSlideHeight, 1000)
$('body').on('mousemove click', function(){
adjustSlideHeight()
var count = 0
var updating = setInterval(function(){
adjustSlideHeight()
if(count > 100) clearInterval(updating)
count++
},100)
})
})
/* Slider Animation Repeat */
function triggerAnimation($t, i){
var $this = $t
setTimeout(function(){
currentIndex[i] = $this.find('.swiper-slide-active').index()
if( currentIndex[i] != previousIndex[i] ) {
var activeslide = $this.find('.swiper-slide-active .elementor-testimonial__text'),
activeslideHTML = activeslide.html()
activeslide.empty()
activeslide.html(activeslideHTML)
$this.find('[data-settings]').each(function(){
var $this = $(this),
settings = $(this).attr('data-settings')
if( settings ){
var settingsObj = JSON.parse(settings)
if( settingsObj._animation ){
$this.addClass('elementor-invisible')
$this.removeClass( settingsObj._animation + ' animated' )
if($this.closest('.swiper-slide-active').length){
var delay = settingsObj._animation_delay ? settingsObj._animation_delay : 0
setTimeout(function(){
$this.removeClass('elementor-invisible')
$this.addClass( settingsObj._animation + ' animated' )
}, delay)
}
}
}
})
}
previousIndex[i] = currentIndex[i]
},50)
}
var currentIndex = [],
previousIndex = []
$(document).ready(function(){
$('.full-width-slider').each(function(i){
var index = $(this).index()
currentIndex[i] = 1
previousIndex[i] = 1
var indexFind = setInterval(function(){
var activeIndex = $('.full-width-slider').eq(index).find('.swiper-slide-active')
if(activeIndex.length){
currentIndex[i] = activeIndex.index()
previousIndex[i] = activeIndex.index()
clearInterval(indexFind)
}
},200)
$(this).on('click', function(){
var $this = $(this)
triggerAnimation($this,i)
setTimeout(function(){
triggerAnimation($this,i)
},500)
setTimeout(function(){
triggerAnimation($this,i)
},1000)
})
})
})
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top
var elementBottom = elementTop + $(this).outerHeight()
var viewportTop = $(window).scrollTop()
var viewportBottom = viewportTop + $(window).height()
return elementBottom > viewportTop && elementTop < viewportBottom
}
var repeatTrigger
$(window).on('load scroll', function(){
clearInterval(repeatTrigger)
$('.full-width-slider').each(function(index){
var $this = $(this)
if($this.isInViewport()){
repeatTrigger = setInterval(function(){
triggerAnimation($this, index)
},500)
}
})
})
</script>
