Slider Not Sliding More Than One Iteration Each Way (JavaScript) - javascript

I have a slider that has 4 articles on it. I can get it to slide each way by 1 article, but can't seem to get it to repeat the action on the second time of clicking the 'left' button. I'm not sure if it's the counter that is the problem or the transform value? I do need to use transform instead of left or right because I need it execute at 60fps on the animation.
Codepen: https://codepen.io/emilychews/pen/vYXJyqZ
var leftButton = document.getElementById("left-button"),
rightButton = document.getElementById("right-button"),
article = document.querySelectorAll(".article"),
counter = 0,
articleWidth = article.offsetWidth;
if (counter <=1) {
leftButton.addEventListener("click", function () {
article.forEach(function (item) {
item.style.transform = "translateX(-100%)";
item.style.transition = "all 2s";
counter += 1;
});
});
}
if (counter < article.length) {
rightButton.addEventListener("click", function () {
article.forEach(function (item) {
item.style.transform = "translateX(0)";
item.style.transition = "transform 2s";
counter -= 1;
});
});
}
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.row {
width: 50%;
background: red;
overflow: hidden;
margin-bottom: 2rem;
}
.article-wrapper {
display: flex;
width: 160%;
}
.article {
width: 70%;
background: blue;
margin: 0 1rem;
padding: 4rem 1rem;
}
p {
color: white;
}
<div class="row">
<div class="article-wrapper">
<article class="article">
<p>Article 1</p>
</article>
<article class="article">
<p>Article 2</p>
</article>
<article class="article">
<p>Article 3</p>
</article>
<article class="article">
<p>Article 4</p>
</article>
</div>
</div>
<button id="left-button">Left</button>
<button id="right-button">Right</button>


One issue is that you only need to add the event listeners once and there's no need to condition adding event listeners off of the counter. If you use the counter approach, you can return early in the click handler when the desired criteria is met.
The next issue is that your "left" handler isn't working more than once because your transform has to be 100 * counter transformed. The following code keeps pretty close to your initial design but generally works.
var leftButton = document.getElementById("left-button"),
rightButton = document.getElementById("right-button"),
article = document.querySelectorAll(".article"),
counter = 0,
articleWidth = article.offsetWidth;
leftButton.addEventListener("click", function () {
if (counter === article.length) return;
counter += 1;
article.forEach(function (item) {
item.style.transform = `translateX(-${counter}00%)`;
item.style.transition = "all 2s";
});
});
rightButton.addEventListener("click", function () {
if (counter === 0) return;
counter -= 1;
article.forEach(function (item) {
item.style.transform = "translateX(0)";
item.style.transition = "transform 2s";
});
});
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.row {
width: 50%;
background: red;
overflow: hidden;
margin-bottom: 2rem;
}
.article-wrapper {
display: flex;
width: 160%;
}
.article {
width: 70%;
background: blue;
margin: 0 1rem;
padding: 4rem 1rem;
}
p {
color: white;
}
<div class="row">
<div class="article-wrapper">
<article class="article">
<p>Article 1</p>
</article>
<article class="article">
<p>Article 2</p>
</article>
<article class="article">
<p>Article 3</p>
</article>
<article class="article">
<p>Article 4</p>
</article>
</div>
</div>
<button id="left-button">Left</button>
<button id="right-button">Right</button>

Related

Display flex is messing around with my items

I have a container that has a list of items, each item has an image and some information.
I made a slide function using JavaScript and I got into a little problem, because I'm using translateX, I want the items to be displayed inline.
I made some research and found that I must use display: flex when making a sliding image, and after that, the items are not showing correctly.
If I remove the flex and I put translateY (instead of X) the slide is working (from up/down) but I want from left-right.
Can someone help me?
This is the code that is not work (with display: flex and translateX)
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
This is the other code without display: flex and translateX (is working) but the next item is not showing (because is not on inline, is under the first item)
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
/*display: flex;*/
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
This is the code without display: flex and translateY instead of X, is working from up-down, but I want from left-right
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateY(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateY(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
/*display: flex;*/
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
EDIT: I solved this issues, I just added min-width: 100% to the .item.

If you are looking for a carousel.
this is what I changed in CSS.
.main {
display: flex;
width: 200%;
}
.item{
width:100%;
}
this is what I changed in JS.
//in next -50% it shifts half way through .main
document.querySelector('div.main').style.transform = 'translateX(-50%)';
// in prev 0% it goes back to start
document.querySelector('div.main').style.transform = 'translateX(0%)';
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(-50%)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform ='translateX(-0%)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: 200%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.item{
width:100%;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>2</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
this is not the optimal solution as I tried to keep that original code.
this won't work if you add more than 2 images.

If you would like to change the entire code then here is the solution.
source MEDIUM carousel from scratch in vanilla JS
codepen.io carousel
!(function(d){
var itemClassName = "carousel__photo";
items = d.getElementsByClassName(itemClassName),
totalItems = items.length,
slide = 0,
moving = true;
// Set classes
function setInitialClasses() {
// Targets the previous, current, and next items
// This assumes there are at least three items.
items[totalItems - 1].classList.add("prev");
items[0].classList.add("active");
items[1].classList.add("next");
}
// Set event listeners
function setEventListeners() {
var next = d.getElementsByClassName('carousel__button--next')[0],
prev = d.getElementsByClassName('carousel__button--prev')[0];
next.addEventListener('click', moveNext);
prev.addEventListener('click', movePrev);
}
// Next navigation handler
function moveNext() {
// Check if moving
if (!moving) {
// If it's the last slide, reset to 0, else +1
if (slide === (totalItems - 1)) {
slide = 0;
} else {
slide++;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
// Previous navigation handler
function movePrev() {
// Check if moving
if (!moving) {
// If it's the first slide, set as the last slide, else -1
if (slide === 0) {
slide = (totalItems - 1);
} else {
slide--;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
function disableInteraction() {
// Set 'moving' to true for the same duration as our transition.
// (0.5s = 500ms)
moving = true;
// setTimeout runs its function once after the given time
setTimeout(function(){
moving = false
}, 500);
}
function moveCarouselTo(slide) {
// Check if carousel is moving, if not, allow interaction
if(!moving) {
// temporarily disable interactivity
disableInteraction();
// Update the "old" adjacent slides with "new" ones
var newPrevious = slide - 1,
newNext = slide + 1,
oldPrevious = slide - 2,
oldNext = slide + 2;
// Test if carousel has more than three items
if ((totalItems - 1) > 3) {
// Checks and updates if the new slides are out of bounds
if (newPrevious <= 0) {
oldPrevious = (totalItems - 1);
} else if (newNext >= (totalItems - 1)){
oldNext = 0;
}
// Checks and updates if slide is at the beginning/end
if (slide === 0) {
newPrevious = (totalItems - 1);
oldPrevious = (totalItems - 2);
oldNext = (slide + 1);
} else if (slide === (totalItems -1)) {
newPrevious = (slide - 1);
newNext = 0;
oldNext = 1;
}
// Now we've worked out where we are and where we're going,
// by adding/removing classes we'll trigger the transitions.
// Reset old next/prev elements to default classes
items[oldPrevious].className = itemClassName;
items[oldNext].className = itemClassName;
// Add new classes
items[newPrevious].className = itemClassName + " prev";
items[slide].className = itemClassName + " active";
items[newNext].className = itemClassName + " next";
}
}
}
function initCarousel() {
setInitialClasses();
setEventListeners();
// Set moving to false so that the carousel becomes interactive
moving = false;
}
initCarousel();
}(document));
.carousel-wrapper {
overflow: hidden;
width: 100%;
}
.carousel-wrapper * {
box-sizing: border-box;
}
.carousel {
transform-style: preserve-3d;
}
.carousel__photo {
opacity: 0;
position: absolute;
top:0;
width: 100%;
height:60vw;
max-height:90vh;
margin: auto;
padding: 1rem 4rem;
z-index: 100;
transition: transform .5s, opacity .5s, z-index .5s;
}
.carousel__photo.initial,
.carousel__photo.active {
opacity: 1;
position: relative;
z-index: 900;
}
.carousel__photo.prev,
.carousel__photo.next {
z-index: 800;
}
.carousel__photo.prev {
transform: translateX(-100%); /* Move 'prev' item to the left */
}
.carousel__photo.next {
transform: translateX(100%); /* Move 'next' item to the right */
}
/* buttons */
.carousel__button--prev,
.carousel__button--next {
position: absolute;
top:50%;
width: 3rem;
height: 3rem;
background-color: #FFF;
transform: translateY(-50%);
border-radius: 50%;
cursor: pointer;
z-index: 1001; /* Sit on top of everything */
border: 1px solid black;
}
.carousel__button--prev {
left:0;
}
.carousel__button--next {
right:0;
}
.carousel__button--prev::after,
.carousel__button--next::after {
content: " ";
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 54%;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: translate(-50%, -50%) rotate(135deg);
}
.carousel__button--next::after {
left: 47%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<div class="carousel-wrapper">
<div class="carousel">
<img class="carousel__photo initial" src="https://i.imgur.com/sKV54PO.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/dZH9gh8.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/TBgEy0n.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/1PeQdB4.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/ox8Cp47.jpeg">
<div class="carousel__button--next"></div>
<div class="carousel__button--prev"></div>
</div>
</div>

I created a variable translateAmount that starts at 0 and tracks where the carousel is at, and then it translates by the current amount. That way you can always translate it the right amount, your count variable keeps track of the number of pictures.
I also put a width 100% on the .item and width 200% on the .main div. I needed this because with the display: flex it tends to put everything in the screen.
Take a look:
HTML/JS
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
<script>
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
let translateAmount = 0;
next.addEventListener("click", function(e)
{
if(count == 3) {
return;
}
count++;
translateAmount -= size;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + translateAmount + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
translateAmount += size;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + translateAmount + 'px)';
});
</script>
</body>
</html>
CSS
.content {
/* margin-left: 50px; */
border: 0px solid red;
width: 100vw;
overflow: hidden;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: fit-content;
}
.item {
width: 100vw;
}
.container-slide {
width: 100%;
/* height: 50%; */
/* overflow: hidden; */
/* position: relative; */
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
/* float: left; */
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}

I want to create an animation circle that play always and allow click even

Hello guys I want my animation be infinite and when it finish - he restart without any jump space.
and moreover allow to click event to go next position on my animation circle
How can I apply it?
let jump = 0;
let index = 0;
const boxContainer = document.querySelector(".boxContainer");
const animate = () => {
boxContainer.style.transform = `translate(${jump}px)`;
boxContainer.appendChild(boxContainer.children[index].cloneNode(true));
index++;
};
const nextBox = () => {
jump -= 100;
requestAnimationFrame(animate);
};
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: aqua;
height: fit-content;
width: 500px;
overflow-x: hidden;
position: relative;
}
.anim {
animation: anim 10s infinite linear;
}
.boxContainer {
display: flex;
transition: transform 0.2s;
}
.boxContainer > .box {
width: 90px;
height: 90px;
margin: 5px;
background-color: blue;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container > button {
position: absolute;
left: 0px;
top: 32px;
width: 50px;
}
#keyframes anim {
to {
transform: translateX(-1000px);
}
}
<div class="container">
<div class="anim">
<div class="boxContainer">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
</div>
</div>
<button onclick="nextBox()">next box</button>
</div>
As you can see I create at animation that allow that click event nad he jump to next position but in some place animation restart in wrong place.
How to fix that issue in right and performance way ?

problem with my website layout, i gave each div containing slide of my slider a property position of value absolute and it hides elements following

i gave each div containing a slide of my slider a property position of value absolute and it hides elements following it.
basically i created a main tag with a section tag for the slider and another for the features section now because i gave position: absolute to the div with class slide the features section is invisible as it is hidden behind the slider section.
how can i fix this so that i can add other sections to my page and they appear properly following each other and not stacked or hiding behind each other like this.
please let me know if i don't get the real reason why this problem happened.
var slides = document.querySelectorAll('.sliderContainer .slide'),
slideCount = slides.length,
currentSlide = 1;
var paginationElement = document.createElement('ul');
paginationElement.setAttribute('id', 'paginationUl');
for (var i = 0; i < slideCount; i++) {
paginationItem = document.createElement('li');
paginationItem.setAttribute('data-index', i);
paginationElement.appendChild(paginationItem);
// paginationItem.appendChild(document.createTextNode(i));
}
var indicators = document.getElementById('indicators');
indicators.appendChild(paginationElement);
var paginationUL = document.getElementById('paginationUl'),
paginationBullets = Array.from(document.querySelectorAll('#paginationUl li'));
for (var i = 0; i < paginationBullets.length; i++) {
paginationBullets[i].onclick = function() {
currentSlide = parseInt(this.getAttribute('data-index'));
console.log(currentSlide);
checker();
}
}
checker();
function checker() {
removeActive();
slides[currentSlide].classList.add('active');
paginationBullets[currentSlide].classList.add('active');
}
function removeActive() {
slides.forEach(function(slide) {
slide.classList.remove('active');
});
paginationBullets.forEach(function(bullet) {
bullet.classList.remove('active');
});
}
var slideIndex = 0;
// showSlides();
function showSlides() {
removeActive();
slideIndex++;
if (slideIndex > slideCount) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
paginationBullets[slideIndex - 1].classList.add('active');
setTimeout(showSlides, 2000);
}
.myMain {
display: flex;
flex-direction: column;
}
/* slider */
.slide {
position: absolute;
opacity: 0;
transition: opacity 1s;
z-index: var(--z-normal);
width: 100%;
text-align: center;
height: 40rem;
color: #fff;
}
.sliderContainer .active {
opacity: 1;
}
.sliderControls .indicators ul {
position: absolute;
z-index: 2;
text-align: center;
top: 35rem;
left: 13rem;
display: flex;
}
.sliderControls .indicators ul li {
margin-right: var(--mg-3);
background-color: var(--light-color);
/* color: var(--light-color); */
width: 1rem;
height: 1rem;
border-radius: 50%;
cursor: pointer;
}
<main class="myMain">
<!-- slider -->
<section class="sliderSection">
<div class="sliderContainer">
<div class="slide slide1">
<div class="slidecontent">
<h1>START YOUR STARTUP WITH THIS TEMPLATE</h1>
<button type="button" name="button" class="blueButton">Get Started</button>
</div>
</div>
<div class="slide slide2">
<div class="slidecontent">
<h1>START YOUR STARTUP WITH THIS TEMPLATE</h1>
<button type="button" name="button" class="blueButton">Get Started</button>
</div>
</div>
<div class="slide slide3">
<div class="slidecontent">
<h1>START YOUR STARTUP WITH THIS TEMPLATE</h1>
<button type="button" name="button" class="blueButton">Get Started</button>
</div>
</div>
</div>
<div class="sliderControls">
<span id="indicators" class="indicators">
</span>
</div>
</section>
<!-- features -->
<section class="featuresSection">
<div class="featuresHeader">
<h1>Our Awesome Features</h1>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="">
</div>
</section>
</main>

add this
.sliderContainer {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.slide {
flex-shrink: 0;
}

/* slider */
.sliderContainer {
position: relative;
overflow: hidden;
height: 40rem;
width: 100%;
}
.sliderContainer .slide {
position: absolute;
opacity: 0;
transition: opacity 1s;
z-index: var(--z-normal);
text-align: center;
color: #fff;
height: 100%;
width: 100%;
}

Vertical Scroll on a Single section

I've to make a single section with a vertical scroll transition effect please have a look at the video here for reference: https://drive.google.com/file/d/1Fy4BDqc0-LDrPnEVYuQZdiJ0Pk9qDXA5/view?usp=sharing
How could I achieve this design using javascript or if possible which widget would help me to design this on a wordpress website using elementor?

You can do it easily using pure JS and the Intersection Observer API - when a specific element scrolls into view, animate horizontally using CSS transition transform and translateX the inner element of the right sticky frame
const expo = function(el, entries) {
entries.forEach(entry => {
if (entry.isIntersecting)
el.style.transform = `translateX(-${100 * entry.target.dataset.expo}%)`;
});
};
document.querySelectorAll(".expo").forEach(el => {
const els = el.querySelector(".expo-slides");
const Obs = new IntersectionObserver(expo.bind(null, els), {threshold: 0.5});
el.querySelectorAll(".expo-article").forEach(el => Obs.observe(el));
});
/*QuickReset*/*{margin:0;box-sizing: border-box;}
body {font: 14px/1.4 sans-serif;}
header, footer {background: #ddd;padding: 60px 0;}
/* EXPO */
.expo {
position: relative;
display: flex;
}
.expo-articles {
flex: 1;
}
.expo-article {
min-height: 100vh;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 0 1px #000;
}
.expo-slidesWrapper {
flex: 1;
position: sticky;
top: 0px;
height: 100vh;
overflow: hidden;
}
.expo-slides {
position: relatie;
display: flex;
height: inherit;
flex-flow: row nowrap;
transition: 0.8s;
}
.expo-slide {
flex: 0 0 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
<header>
<h1>HEADER</h1>
</header>
<div class="expo">
<section class="expo-articles">
<article data-expo="0" class="expo-article">
<h1>Article 1</h1>
<p>Lorem ipsum article 1</p>
</article>
<article data-expo="1" class="expo-article">
<h1>Article 2</h1>
<p>Lorem ipsum article 2</p>
</article>
<article data-expo="2" class="expo-article">
<h1>Article 3</h1>
<p>Lorem ipsum article 3</p>
</article>
</section>
<div class="expo-slidesWrapper">
<div class="expo-slides">
<div class="expo-slide" style="background: #0bf;">1</div>
<div class="expo-slide" style="background: #f0b;">2</div>
<div class="expo-slide" style="background: #bf0;">3</div>
</div>
</div>
</div>
<footer>
<h2>FOOTER</h2>
</footer>

Next page slide animation in CSS and JavaScript

I am trying to achieve a "next page" slide animation in CSS and Javascript. If user clicks a div page, the current page move left and fade out and next page will replace the current container.
This is what I tried, but I don't know how to change container to have dimensions based on current page.
(function () {
document.querySelectorAll(".page").forEach((item, idx) => {
if (idx !== 0) {
item.classList.add("hidden");
item.style.maxHeight = 0;
} else {
}
});
document.querySelectorAll(".page").forEach((item) => {
item.addEventListener("click", (event) => {
const currentPage = event.target.closest(".page");
const nextPage = currentPage.nextElementSibling;
nextPage.style.maxHeight = "1000px";
nextPage.classList.add("show-page");
currentPage.classList.add("hide-page");
});
});
})();
.container {
font-family: inherit;
position: fixed;
bottom: 40px;
right: 40px;
background-color: #eb6383;
width: 300px;
padding: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page {
display: flex;
flex-direction: column;
transition: 1s;
left: 0%;
opacity: 1;
position: relative;
background-color: yellow;
}
.hidden {
position: relative;
overflow: hidden;
left: 100%;
transition: 1s;
}
.show-page {
position: relative;
left: 0%;
transition: 1s;
}
.hide-page {
opacity: 0;
left: -100%;
transition: 1s;
}
<div class="container">
<div class="page">
<div class="Header">page 1</div>
<div class="Content">
content page 1
</div>
</div>
<div class="page">
<div class="Header">page 2</div>
<div class="Content">
content page 2
</div>
</div>
<div class="page">
<div class="Header">page 3</div>
<div class="Content">
content page 3
</div>
</div>
</div>

Instead of moving each slide on it's own, we can animate a parent element holding all the slides
Here's a simplified version.
(function() {
let slides = document.querySelectorAll('.page');
let slidesCount = slides.length
let index = 0; // index
slides.forEach(slide => {
slide.onclick = (e) => {
/* Logic */
let nextIndex = (++index % slidesCount);
/* End Logic */
/* Management for the CSS */
// By how much we want to move, In Percents.
// A negative value because we're moving left
let ditance = -100;
// If nextIndex = 2, Then rawCssValue = -200
let styleValue = nextIndex * ditance;
/* Applying the CSS */
let style = `translateX(${styleValue}%)`;
e.target.parentElement.style.transform = style;
}
});
})()
.container {
font-family: inherit;
position: fixed;
bottom: 40px;
right: 40px;
width: 300px;
background: #eb6383;
overflow: hidden;
}
.page {
display: flex;
transition: 1s;
left: 0%;
opacity: 1;
position: relative;
background-color: yellow;
}
/* New */
.page {
flex: 0 0 auto;
height: 100%;
width: 100%;
}
.page + .page {
margin-left: 20px;
}
.slide {
padding: 10px;
box-sizing: border-box;
height: 100%;
display: flex;
flex-wrap: nowrap;
background: #eb6383;
transition: all .5s linear;
transform: translateX(0);
}
<div class="container">
<div class="slide">
<div class="page">
<div class="Header">page 1</div>
<div class="Content">
content page 1
</div>
</div>
<div class="page">
<div class="Header">page 2</div>
<div class="Content">
content page 2
</div>
</div>
<div class="page">
<div class="Header">page 3</div>
<div class="Content">
content page 3
</div>
</div>
<div class="page">
<div class="Header">page 4</div>
<div class="Content">
content page 4
</div>
</div>
</div>
</div>
I recommend using buttons for navigating through the slider, clicking the page to the move will become problematic very quick Because the children consume the event.

Categories

Resources