Remove slide delay vanilla js - javascript

I've got some section with infinite carousel using vanilla js.
My logic is based on using justify-content:flex-end for previous slide and justify-content:flex-start for next one.
My carousel has default justify-content:flex-start and it works fine when slides to next, but there is some render delay if I'm using slide to prev.
It's because of using justify-content:flex-end for prev, but how to get rid of delay?
This is my code
const slider = document.querySelector('.slider')
const carousel = document.querySelector('.carousel')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
let direction
prev.addEventListener('click', () => {
if (direction === -1) {
slider.appendChild(slider.lastElementChild)
direction = 1
}
direction = 1
carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(20%)'
})
next.addEventListener('click', () => {
direction = -1
carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-20%)'
})
slider.addEventListener('transitionend', () => {
if (direction === -1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === 1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none'
slider.style.transform = 'translate(0)'
setTimeout(() => {
slider.style.transition = 'transform 0.5s'
})
})
.section {
display: flex;
justify-content: center;
align-items: center;
padding: 80px 0;
background-color: green;
position: relative;
}
.carousel {
display: flex;
width: 70%;
height: 100%;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
.slider {
display: flex;
width: 100%;
height: 100%;
transition: all 0.5s;
}
.item {
display: flex;
width: 20%;
flex: 1;
flex-shrink: 0;
flex-basis: 20%;
height: 70px;
}
.prev,
.next {
position: absolute;
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid green;
cursor: pointer;
z-index: 3;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
<section class="section">
<div class="prev">Prev</div>
<div class="next">Next</div>
<div class="carousel">
<div class="slider">
<div class="item"> Item 1</div>
<div class="item"> Item 2</div>
<div class="item"> Item 3</div>
<div class="item"> Item 4</div>
<div class="item"> Item 5</div>
<div class="item"> Item 1</div>
<div class="item"> Item 2</div>
<div class="item"> Item 3</div>
<div class="item"> Item 4</div>
<div class="item"> Item 5</div>
</div>
</div>
</section>

Not sure if this is the best approach. Your code is appending (and prepending) elements after the slider has transitioned. Because of the overflow:hidden you don't notice it happen when it appends to the end of the slider but you notice when it prepends to the start which is why you see it render after the translation.
So you could move the slider 20% to the left so you don't see when the element is prepended and not change most of your code.
const slider = document.querySelector('.slider')
const carousel = document.querySelector('.carousel')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
let direction
prev.addEventListener('click', () => {
if (direction === -1) {
slider.appendChild(slider.lastElementChild)
direction = 1
}
direction = 1
// removed - carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(20%)'
})
next.addEventListener('click', () => {
direction = -1
// removed - carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-20%)'
})
slider.addEventListener('transitionend', () => {
if (direction === -1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === 1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none'
slider.style.transform = 'translate(0)'
setTimeout(() => {
slider.style.transition = 'transform 0.5s'
})
})
.section {
display: flex;
justify-content: center;
align-items: center;
padding: 80px 0;
background-color: green;
position: relative;
}
.carousel {
display: flex;
width: 70%;
height: 100%;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
.slider {
display: flex;
width: 100%;
height: 100%;
transition: all 0.5s;
/* Only change */ margin-left: -20%;
}
.item {
display: flex;
width: 20%;
flex: 1;
flex-shrink: 0;
flex-basis: 20%;
height: 70px;
}
.prev,
.next {
position: absolute;
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid green;
cursor: pointer;
z-index: 3;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
<section class="section">
<div class="prev">Prev</div>
<div class="next">Next</div>
<div class="carousel">
<div class="slider">
<div class="item"> Item 1</div>
<div class="item"> Item 2</div>
<div class="item"> Item 3</div>
<div class="item"> Item 4</div>
<div class="item"> Item 5</div>
<div class="item"> Item 6</div>
<div class="item"> Item 7</div>
<div class="item"> Item 9</div>
<div class="item"> Item 0</div>
</div>
</div>
</section>

Related

Add and Remove Class of Tab Onscroll (If else Tab JavaScript)

I want to use scroll to add and remove a class of Tabs
When I scroll down the page, then all tab switch to active. Then, when I scroll up the page, the all tab switched to inactive.
In the current condition, when I scroll down the page, it removes the current tab class, and when I scroll up the page, it adds the active class to the first tab. But, it's not what I want. I want it when I scroll down it moves to the next tab, when I scroll up it moves to the previous tab. I think I should use the if else tab.
//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
let firstTab = function(tabs) {tabs.classList.add('tab-active')};
let firstContent = function(content) {content.classList.add('content-active')};
firstTab(tabs[0]); //Already remove the ready and callback
firstContent(content[0]);
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
for (let i = 0; i < tabs.length; i++) {
window.addEventListener('scroll', () => tabScroll(i)); //Already remove the multiple scroll listeners in a loop. But, idk whether it's right or not
}
function tabClick(currentTab) {
//Remove Active Class
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
function tabScroll(currentTab) {
if(document.documentElement.scrollTop > 0) {
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
}
})
.container {
width: 100vw;
height: 400px;
}
.tabs {
display: flex;
height: 65px;
overflow: hidden;
align-items: center;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 10px;
cursor: pointer;
}
.tab-active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100%;
margin-top: 5px;
height: calc(100% - 65px);
}
.content-item {
width: 100%;
height: 100%;
display: none;
padding: 0px;
border: none;
position: absolute;
}
.content-wrapper1 {
width: 100%;
height: 100%;
}
.content-wrapper2 {
width: 100%;
height: 100%;
}
.content-wrapper3 {
width: 100%;
height: 100%;
}
.content-iframe {
height: 100%;
width: 100%;
}
.content-show {
display: flex;
animation-name: fade-out;
animation-duration: 2.5s;
}
#keyframes fade-out {
0% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
.content-active {
display: flex;
border: none;
justify-content: center;
height: 100%;
animation-name: fade-in;
animation-duration: 2.5s;
}
#keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0.01;
}
100%{
display: block;
opacity: 1;
}
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to solve this guys. Thank you so much..

How to add class in sequence based on button click?

I only found examples using jQuery, but I would like to know how to add and remove classes in sequence, according to the button click, using Vanilla JS. I tried using forEach but I was only able to add all the classes at once.
document.querySelector('#addBtn').addEventListener('click', () => {
document.querySelectorAll('.dot').forEach(e => {
e.classList.add('active')
})
})
document.querySelector('#removeBtn').addEventListener('click', () => {
document.querySelectorAll('.dot').forEach(e => {
e.classList.remove('active')
})
})
.dots{
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot{
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active{
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
You can check the below logic with querySelectorAll for finding the last active elements and using nextElementSibling to apply the change
document.querySelector('#addBtn').addEventListener('click', () => {
const activeElements = document.querySelectorAll('.dot.active')
//no active elments
if (!activeElements || !activeElements.length) {
//set active class for the first found element
const firstElement = document.querySelector('.dot')
if (firstElement) {
firstElement.classList.add('active')
return
}
}
//finding the last active element
const lastElement = activeElements[activeElements.length - 1];
//apply the class the next element of the current active element
const nextElement = lastElement.nextElementSibling
if (nextElement) {
nextElement.classList.add('active')
}
})
document.querySelector('#removeBtn').addEventListener('click', () => {
const activeElements = document.querySelectorAll('.dot.active')
//finding the last active element
const lastElement = activeElements[activeElements.length - 1];
if (lastElement) {
//remove the active class from the last active element
lastElement.classList.remove('active')
}
})
.dots {
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot {
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active {
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
You can break out of the loop once a dot has had active added/removed.
document.querySelector('#addBtn').addEventListener('click', () => {
const dots = document.querySelectorAll('.dot');
for (let dot of dots) {
if (![...dot.classList].includes('active')) {
dot.classList.add('active');
break;
}
}
});
document.querySelector('#removeBtn').addEventListener('click', () => {
const dots = document.querySelectorAll('.dot');
for (let dot of [...dots].reverse()) {
if ([...dot.classList].includes('active')) {
dot.classList.remove('active');
break;
}
}
});
.dots{
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot{
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active{
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
Please check answer below. Explanation is in comments.
document.querySelector('#addBtn').addEventListener('click', () => {
// Get active elements
let activeEl = document.querySelectorAll('.dot.active');
let nextActiveEl;
// If we found active element then find the next sibling else select the first element
if (activeEl.length > 0) {
nextActiveEl = activeEl[activeEl.length - 1].nextElementSibling
} else {
nextActiveEl = document.querySelectorAll('.dot')[0];
}
// If selected element is not null then add class active
if (nextActiveEl)
nextActiveEl.classList.add('active');
})
document.querySelector('#removeBtn').addEventListener('click', () => {
// Get active elements
let activeEl = document.querySelectorAll('.dot.active');
// If we found active element then remove active class of last active element
if (activeEl.length > 0) {
activeEl[activeEl.length - 1].classList.remove('active');
}
})
.dots {
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot {
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active {
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>

Infinite carousel with indicator and smooth transition

I'm struggling with infinite carousel below:
let $carousel = document.querySelector('.carousel');
let $ref_ribbon = document.querySelector('.carousel__ribbon');
let $ref_right = document.querySelector('.carousel__button--right');
let $ref_left = document.querySelector('.carousel__button--left');
let $ref_counter = 0;
let $direction;
const transfer = () => {
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
} else if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
}
$ref_ribbon.style.transition = "none";
$ref_ribbon.style.transform = "translateX(0px)";
setTimeout(function() {
$ref_ribbon.style.transition = "transform .7s ease-in-out";
})
}
const right_button = () => {
if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
$direction = -1;
}
$direction = -1;
$carousel.style.justifyContent = 'flex-start';
$ref_ribbon.style.transform = `translateX(-${300}px)`;
}
const left_button = () => {
$ref_counter--;
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
$direction = 1;
}
$direction = 1;
$carousel.style.justifyContent = 'flex-end';
$ref_ribbon.style.transform = `translateX(${300}px)`;
}
$ref_right.addEventListener('click', right_button);
$ref_left.addEventListener('click', left_button);
$ref_ribbon.addEventListener('transitionend', transfer)
.carousel {
display: flex;
margin: auto;
position: relative;
height: 200px;
width: 300px;
background-color: red;
justify-content: flex-start;
}
.carousel__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 100;
}
.carousel__button--left {
left: 0;
}
.carousel__button--right {
right: 0;
}
.carousel__ribbon {
display: flex;
flex-direction: row;
outline: 3px solid black;
height: 100%;
transition: transform .7s ease-in-out;
}
.carousel__pane {
display: flex;
background-color: skyblue;
height: 100%;
width: 300px;
flex-shrink: 0;
outline: 1px dashed navy;
}
.carousel__content {
text-align: center;
margin: auto;
}
.carousel__indicator {
display: flex;
gap: 10px;
left: 50%;
transform: translateX(-50%);
height: 30px;
position: absolute;
bottom: 0;
}
.carousel__circle {
height: 10px;
width: 10px;
background-color: gray;
border-radius: 50%;
cursor: pointer;
}
.carousel__circle--active {
background-color: black;
}
<div class="carousel">
<button class="carousel__button carousel__button--left"><</button>
<button class="carousel__button carousel__button--right">></button>
<div class="carousel__ribbon">
<div class="carousel__pane">
<p class="carousel__content">Pane 1</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 2</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 3</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 4</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 5</p>
</div>
</div>
<div class="carousel__indicator">
<div class="carousel__circle carousel__circle--active"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
</div>
</div>
I would like to connect indicator so when somebody click on proper circle then carousel will automatically slide to this particular panel. Also, I would like to set this circles that they will show which panel is currently active.
In addition, I would like to get such effect that carousel will jump to this particular panel immediately, ommiting other panels between.
So, if active one is first panel and I click fifth circle, then carousel will smoothly change panel like to the panel number two, but instead of number two I will see number five.
Sadly I always fail to get this effect. I would appriciate if somebody more experienced direct me how to deal with this problem.

Update mouse position on scroll

I came across this website's work page and would like to recreate the xray effect of each of the card element.
Here's my code for the xray effect: https://codepen.io/carljustineoyales/pen/yLMEVYd
HTML
<section class="banner">
<h1>this is a banner page</h1>
</section>
<section class="projects" id="projects">
<div class="cardlist" >
<div class="cardlist__grid" >
<div class="card" id="card" onmouseover="setSize()" onmouseout="resetSize()">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card" id="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
<div class="cardlist--skeleton" id="skeleton">
<div class="cardlist--skeleton--bg"></div>
<div class="cardlist__grid">
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
</section>
</body>
SCSS
* {
margin: 0;
padding: 0;
}
.banner {
height: 100vh;
}
.projects {
max-width: 1440px;
width: 100%;
margin: 100px auto;
// padding: 100px 0;
position: relative;
}
.cardlist {
width: 100%;
color: #000;
&__grid {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&--skeleton {
--x: 0;
--y: 0;
--size: 0px;
clip-path: circle(var(--size) at var(--x) var(--y));
user-select: none;
pointer-events: none;
// clip-path: circle(100px at 0 0);
// clip-path: circle(300px at 0% 0%);
transition: clip-path 0.1s ease;
&--bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #838383;
z-index: -1;
}
width: 100%;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 1;
background-color: #838383;
}
}
.card {
padding: 50px;
&__thumbnail {
width: 500px;
height: 644px;
background-color: #838383;
&--black {
background-color: #000;
}
}
}
JS
let mouseX=0
let mouseY=0
let size = 0;
const projects = document.querySelector('#projects');
function setSize() {
size = 200
skeleton.style.setProperty('--size', size + "px");
}
function resetSize() {
size = 0
skeleton.style.setProperty('--size', size + "px");
}
function updateCoordinates(event) {
mouseX = event.pageX - projects.offsetLeft ;
mouseY = event.pageY - projects.offsetTop ;
skeleton.style.setProperty('--x', mouseX + "px");
skeleton.style.setProperty('--y', mouseY+ "px");
}
The problem is that I can't seem to find a solution for the updating cursor position while scrolling, also the hover animation became laggy when you open the console. Is there a way to update the cursor position on scroll and why the animation became laggy when the console is open.

Pause jQuery On Hover

I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.

Categories