Javascript horizontal image slider

Javascript horizontal image slider - javascript

I'm trying to implement a simple image slider with arrows underneath, left and right.
When the slider reaches to the end(left or right), I would like the arrow to disappear at that side. Right now I can't get to the end of the list at the left side. Also I don't know how to center the list so that each item that gets viewed is centered on the screen.
Here is a gif that illustrates these problems:
https://i.gyazo.com/b3b3df55c6953c6b3e539dd347d951da.mp4
Here is the markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Image Slider</title>
</head>
<body>
<div class="headline">
<h1>
Experience The
<br>
<span>Diamond Revolution</span>
</h1>
<h3>
Spin actual diamonds in 360° HD and zoom in up to 40x. One of the world's biggest collections of loose diamonds, at your
fingertips.
</h3>
</div>
<div class="slider">
<ul class="slider-wrap">
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/round-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ROUND
</h3>
<h4 class="sub-title">
Maximizes light return from the top of the stone
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/cushion-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
CUSHION
</h3>
<h4 class="sub-title">
Antique cut with 58 facets and rounded corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/marquise-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
MARQUISE
</h3>
<h4 class="sub-title">
Long, narrow surface makes it appear larger than life
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/heart-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
HEART
</h3>
<h4 class="sub-title">
Features a distinctive cleft at the top and superior brilliance
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/pear-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PEAR
</h3>
<h4 class="sub-title">
Tradition meets brilliance in unique ‘water drop’ shape
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/radiant-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
RADIANT
</h3>
<h4 class="sub-title">
Brilliance combined with non-traditional cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/oval-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
OVAL
</h3>
<h4 class="sub-title">
Elongated shape accentuates the length of the finger
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/asscher-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ASSCHER
</h3>
<h4 class="sub-title">
Vintage-style square shape with cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/emerald-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
EMERALD
</h3>
<h4 class="sub-title">
Long lines create an elegant and sophisticated look
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/princess-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PRINCESS
</h3>
<h4 class="sub-title">
Maximum brilliance in an exquisite square form
</h4>
</div>
</li>
</ul>
</div>
<div class="controls">
<div class="title">
<h3>
PRINCESS
</h3>
<h4>
Maximum brilliance in an exquisite square form
</h4>
</div>
<a href="#" id="prev" class="fa fa-long-arrow-right">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
<a href="#" id="next" class="fa fa-long-arrow-left">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
</div>
<script src="js/index.js"></script>
</body>
</html>
Index.js:
var imageSlider = function () {
var slider = document.querySelector(".slider");
var items = document.querySelectorAll(".slider-item");
var itemWidth = items[0].offsetWidth;
var sliderList = document.querySelector(".slider-wrap");
var count = items.length / 2;
// Control Buttons
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var isNextHidden = false;
var isPrevHidden = false;
// Diamond Display
var mainTitle = document.querySelector(".controls .title h3");
var subTitle = document.querySelector(".controls .title h4");
window.addEventListener("resize", function () {
itemWidth = items[0].offsetWidth;
});
centerItem(count);
sliderList.style.left = "-" + count * itemWidth + "px";
var nextSlide = function () {
uncenterItem(count);
if (count >= 2) {
count--;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count === 1) {
next.style.display = "none";
isNextHidden = true;
}
centerItem(count);
}
var prevSlide = function () {
uncenterItem(count);
if (count < items.length) {
if (isNextHidden) {
next.style.display = "block";
}
count++;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count == items.length - 1) {
prev.style.display = "none";
isPrevHidden = true;
}
centerItem(count);
}
function uncenterItem(count) {
var centeredItem = items[count];
centeredItem.classList.remove("centered");
}
function centerItem(count) {
console.log(count);
var centeredItem = items[count];
centeredItem.classList.add("centered");
var title = centeredItem.getElementsByClassName("title");
var itemTitle = title[0].children[0].innerText.trim();
var itemSubtitle = title[0].children[1].innerText.trim();
// Assigning values to the fields
mainTitle.innerHTML = itemTitle;
subTitle.innerHTML = itemSubtitle;
}
next.addEventListener("click", nextSlide);
prev.addEventListener("click", prevSlide);
};
window.onload = function () {
imageSlider();
};
SASS file:
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
.headline {
text-align: center;
h1 {
font-size: 50px;
font-weight: normal;
margin-bottom: 0;
span {
font-weight: 700;
}
}
h3 {
font-size: 18px;
}
}
.slider {
position: relative;
width: 100%;
height: 300px;
padding-bottom: 50px;
overflow: hidden;
.slider-wrap {
display: flex;
justify-content: space-around;
position: relative;
list-style: none;
height: 100%;
min-width: 200%;
padding: 0;
margin: 80px 0;
transition: all 750ms ease;
left: 0;
.slider-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin: 0 20px;
height: 100%;
width: 250px;
float: left;
transition: all 750ms ease;
.title {
display: none;
}
img {
margin: 0 auto;
width: 250px;
}
}
.centered {
transform: scale(1.5);
}
}
}
.controls {
.title {
display: block;
position: absolute;
bottom: 30px;
left: 50%;
text-align: center;
margin: 20px;
color: black;
transform: translateX(-55%);
h3 {
font-size: 20px;
font-weight: 700;
}
h4 {
font-size: 15px;
font-weight: normal;
}
}
#prev,
#next {
position: absolute;
bottom: 0;
width: 100px;
line-height: 50px;
margin-top: 50px;
margin-bottom: 50px;
border-radius: 50%;
font-size: 70px;
text-align: center;
color: black;
text-decoration: none;
transform: translateY(-50%);
transition: all 150ms ease;
}
#prev {
right: 10px;
margin-right: 20vw;
}
#next {
left: 10px;
margin-left: 20vw;
img {
transform: rotate(180deg);
}
}
}

The condition in line number 42 else if (count == items.length - 1) should be replaced with else if (count == items.length).
Also need to take care of the undefined errors, by checking for the existence of objects using if condition. See the pen and refer line number 50 and 58.
Hope this helps.

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;
}

Why is my Accordion closing animation not firing? It opens (with animation) but closes without animation

Here is a Fiddle of my problem (Click the image next to the 'Werknemers' or 'Verzuimdossiers').
I got a sidebar in which some items have subcontent and some don't. So I made an accordion with subnav items. The problem is that the opening animation works fine. However, the closing animation is not being fired.
What could be the issue here?
Code for reference
openSubnav = (evt, subNavName) => {
let i, subnavContent, subnavLinks;
//Check if the current accordion is clicked again to close it.
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
subNav.style.display = 'none'
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
return
}
//hide alle subnav content
subnavContent = document.getElementsByClassName("subnav-content");
for (i = 0; i < subnavContent.length; i++) {
subnavContent[i].style.display = "none";
}
//delete the subnav-isActive class
subnavLinks = document.getElementsByClassName("subnav-item");
for (i = 0; i < subnavLinks.length; i++) {
subnavLinks[i].className = subnavLinks[i].className.replace(" subnav-isActive", "");
}
//Display the content
subNav.style.display = "block";
//Add the subnav-isActive class
evt.currentTarget.className += " subnav-isActive";
//If there currently is a max-height on the element, delete it.
if (subNav.style.maxHeight) {
subNav.style.maxHeight = null;
}
subNav.style.maxHeight = subNav.scrollHeight + "px";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.root {
display: flex;
font-family: 'Poppins', sans-serif;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.icon-container {
width: 60px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* .sidebar:hover {
width: 250px;
overflow: visible;
} */
.sidebar {
width: 250px;
}
.sidebar {
background-color: #8dc4d9;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
/* width:60px; */
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
}
.sidebar>ul {
margin: 10px 0;
}
.sidebar li {
width:250px;
}
.sidebar li>span {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
transition: all .1s linear;
}
.sidebar .nav-text {
display: table-cell;
vertical-align: middle;
/* 250px breed totaal - 60px breed icoon = 190 */
width: 190px;
}
.sidebar .nav-dropdown {
display: table-cell;
vertical-align: middle;
cursor: pointer;
padding-right: 20px;
padding-top: 8px;
}
.sidebar .nav-dropdown img {
transform: rotate(270deg);
transition: transform .3s ease;
}
.sidebar .nav-dropdown.subnav-isActive img {
transform: rotate(360deg);
}
.user {
margin-bottom: 20px;
}
.sidebar li:hover>span {
background-color:#76abbf;
}
.subnav-content {
display: none;
/* 17px omdat de afbeelding 24x24 is en de breedte van de sidebar 60px.
Met de afbeelding houd je dus 17px aan beiden kanten over. */
padding: 10px 17px;
background-color:#76abbf;
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.content {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
.preview {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sidebar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="root">
<nav class="sidebar">
<ul>
<li class="user">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/user32.png" alt="">
</div>
<span class="nav-text">
Mijn account
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/bureaublad24.png" alt="">
</div>
<span class="nav-text">
Dashboard
</span>
</span>
</li>
<li class="has-subnav">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/werknemers24.png" alt="">
</div>
<span class="nav-text">
Werknemers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Werknemers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Werknemers" class="subnav-content">
<li>kaas</li>
<li>brood</li>
<li>eieren</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/verzuimdossiers24.png" alt="">
</div>
<span class="nav-text">
Verzuimdossiers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Verzuimdossiers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Verzuimdossiers" class="subnav-content">
<li>boter</li>
<li>friet</li>
<li>pasta</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/trajecten24.png" alt="">
</div>
<span class="nav-text">
Trajecten
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/projecten24.png" alt="">
</div>
<span class="nav-text">
Projecten
</span>
</span>
</li>
</ul>
</nav>
<div class="content">
Content
</div>
<div class="preview">
Preview
</div>
</div>
</body>
</html>

You need to set timeout before the display: none so it has time to prosecute the closing animation.
Like in this code:
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
setTimeout(function(){subNav.style.display = 'none';}, 100);
return
}
Here you have the right code complete (idk why, but you need to expand the snippet to see it working, click on Run code snippet and then Full page link):
openSubnav = (evt, subNavName) => {
let i, subnavContent, subnavLinks;
//Check if the current accordion is clicked again to close it.
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
setTimeout(function(){subNav.style.display = 'none';}, 100);
return
}
//hide alle subnav content
subnavContent = document.getElementsByClassName("subnav-content");
for (i = 0; i < subnavContent.length; i++) {
subnavContent[i].style.display = "none";
}
//delete the subnav-isActive class
subnavLinks = document.getElementsByClassName("subnav-item");
for (i = 0; i < subnavLinks.length; i++) {
subnavLinks[i].className = subnavLinks[i].className.replace(" subnav-isActive", "");
}
//Display the content
subNav.style.display = "block";
//Add the subnav-isActive class
evt.currentTarget.className += " subnav-isActive";
//If there currently is a max-height on the element, delete it.
if (subNav.style.maxHeight) {
subNav.style.maxHeight = null;
}
subNav.style.maxHeight = subNav.scrollHeight + "px";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.root {
display: flex;
font-family: 'Poppins', sans-serif;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.icon-container {
width: 60px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* .sidebar:hover {
width: 250px;
overflow: visible;
} */
.sidebar {
width: 250px;
}
.sidebar {
background-color: #8dc4d9;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
/* width:60px; */
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
}
.sidebar>ul {
margin: 10px 0;
}
.sidebar li {
width:250px;
}
.sidebar li>span {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
transition: all .1s linear;
}
.sidebar .nav-text {
display: table-cell;
vertical-align: middle;
/* 250px breed totaal - 60px breed icoon = 190 */
width: 190px;
}
.sidebar .nav-dropdown {
display: table-cell;
vertical-align: middle;
cursor: pointer;
padding-right: 20px;
padding-top: 8px;
}
.sidebar .nav-dropdown img {
transform: rotate(270deg);
transition: transform .3s ease;
}
.sidebar .nav-dropdown.subnav-isActive img {
transform: rotate(360deg);
}
.user {
margin-bottom: 20px;
}
.sidebar li:hover>span {
background-color:#76abbf;
}
.subnav-content {
display: none;
/* 17px omdat de afbeelding 24x24 is en de breedte van de sidebar 60px.
Met de afbeelding houd je dus 17px aan beiden kanten over. */
padding: 10px 17px;
background-color:#76abbf;
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.content {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
.preview {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sidebar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="root">
<nav class="sidebar">
<ul>
<li class="user">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/user32.png" alt="">
</div>
<span class="nav-text">
Mijn account
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/bureaublad24.png" alt="">
</div>
<span class="nav-text">
Dashboard
</span>
</span>
</li>
<li class="has-subnav">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/werknemers24.png" alt="">
</div>
<span class="nav-text">
Werknemers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Werknemers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Werknemers" class="subnav-content">
<li>kaas</li>
<li>brood</li>
<li>eieren</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/verzuimdossiers24.png" alt="">
</div>
<span class="nav-text">
Verzuimdossiers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Verzuimdossiers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Verzuimdossiers" class="subnav-content">
<li>boter</li>
<li>friet</li>
<li>pasta</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/trajecten24.png" alt="">
</div>
<span class="nav-text">
Trajecten
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/projecten24.png" alt="">
</div>
<span class="nav-text">
Projecten
</span>
</span>
</li>
</ul>
</nav>
<div class="content">
Content
</div>
<div class="preview">
Preview
</div>
</div>
</body>
</html>

The reason is because your animation takes some time to execute, but you assign display: none before your animation has any chance to be rendered.

How to enable button if all divs are selected in vanilla javascript?

I have some divs generated dynamically. Once all the divs are selected submit button has to be enabled, can someone please help me?
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
.card.selected{
background: #0173fb;
}
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
In this code I am adding 'selected' class for the div onclick. I want this in pure javascript.. no jquery or any other library.
Thanks in advance.

try like this. Pure javascript.
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName('btn')[0].setAttribute("disabled","true");
});
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
})
}
.card{
padding: 8px;
border: 1px solid #eee;
cursor: pointer;
}
ul, li{
list-style: none;
}
.card.selected{
background-color: rgb(155,155,155);
}
.btn{
padding: 10px;
margin: 10px;
}
<body>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items 1
</div>
<div class="card">
card items 2
</div>
<div class="card">
card items 3
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
</body>
Or you can add eventListener without for. Like below:
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
document.body.addEventListener('click', function(e) {
if(e.target.classList.contains('card')){
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
}
});

Compare the available divs with the selected divs and enable the button if it matches.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
height: 10px;
background-color: red;
margin-bottom: 10px;
}
.selected{
background-color: blue;
}
</style>
</head>
<body>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<button class="btn" disabled>Click</button>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
// add seclected class to clicke div
e.target.classList.add('selected');
// get all selected/clicked divs
let allSelected = document.querySelectorAll('.selected');
// compare available divs with selected divs
if(card.length === allSelected.length){
console.log("Enable button", btn[0])
btn[0].onclick = () => {
alert("Button clicked");
};
// enable button
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>
EDIT: Troubleshooting (https://github.com/Bhanumathi-a/cards)
Your problem with your code is that you add the "selected" class on sub elements too! `` When you add a console log on the event handler you see that there are other elements than the divs get selected which gives you the filled array that matches the length of the available divs:
You can clearly see that the array contains more elements than only divs.
To fix this, find the nearest div.card element from the clicked children:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member FDIC</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
min-width: 360px;
}
header {
display: block;
}
a.logo {
display: inline-block;
font-size: 50px;
color: #0173fb;
text-decoration: none;
padding: 15px;
}
nav {
display: inline-block;
}
.loanDetails {
background: #f8f8f8;
display: flex;
}
.cardBlk {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cardItm {
display: flex;
padding: 10px;
}
#media(min-width:1240px) {
.container {
max-width: 1140px;
}
.cardItm {
width: 24%;
}
}
#media(min-width:1920px) {
.container {
max-width: 1820px;
}
.cardItm {
width: 33%;
}
}
.card {
background: #f8f8f8;
color: #2a2b2d;
border-radius: 10px;
padding: 15px 15px 30px 15px;
box-sizing: border-box;
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center;
cursor: pointer;
justify-content: center;
}
.card .info, .card .checked {
height: 39px;
width: 39px;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
}
.card .info {
background: url(assets/exclamation.png) no-repeat 0 0;
}
.card .checked {
background: url(assets/checked\ active.png) no-repeat 0 0;
}
.card img {
width: auto;
height: auto;
max-width: 50px;
margin: 25px auto;
}
.card.selected, .card:hover {
background: #0173fb;
color: #fff;
}
.card:hover .info, .card.selected .info {
background-image: url(assets/exclamation\ white.png);
}
.card:hover .checked, .card.selected .checked {
background-image: url(assets/checked\ inactive.png);
}
.btnBlk {
text-align: center;
display: block
}
.btn {
background: #0173fb;
border-radius: 25px;
padding: 10px 25px;
color: #fff;
text-align: center;
border: 1px solid #0173fb;
margin: 10px auto;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
}
.btn:disabled {
background: #9ac5fb;
border-color: #9ac5fb;
cursor: default;
}
</style>
</head>
<body>
<header>
<div class="container">
Logo
<!-- <nav class="nav">
<ul>
<li>Dashboard</li>
<li>Welcome, John Doe</li>
</ul>
</nav> -->
</div>
</header>
<main>
<header class="loanDetails">
<div class="container">
loan
<progress value="30" max="100" id=progress>30%</progress>
</div>
</header>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card 1">
<span class="checked"></span>
<img src="assets/location.png" alt="">
<div>
<h2>Get started</h2>
<span>(100% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card 2">
<span class="info"></span>
<img src="assets/property.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/income.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/assets.png" alt="">
<div>
<h2>Get started</h2>
<span>(50% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/real estate.png" alt="">
<div>
<h2>Get started</h2>
<span>(70% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/declarations.png" alt="">
<div>
<h2>Get started</h2>
<span>(90% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/e-concent.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
</ul>
<div class="btnBlk">
<button class="btn" id="submitBtn" disabled>Submit Application</button>
</div>
</section>
</main>
<footer>
</footer>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
let progress = document.getElementById('progress');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function (e) {
let closest = e.target.closest("div.card");
closest.classList.add('selected');
progress.value = progress.value + 10;
let allSelected = document.querySelectorAll('div.selected');
if (card.length === allSelected.length) {
btn[0].onclick = () => {
console.log('clicked');
};
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>

I need to know how can i make the basket collect the eggs once touch it ? (egg and basket game )

I'm trying to make the egg and basket game with JS, I just need to make a function that collects the eggs on it hits the basket, so any help to do it with a simple way:
<!--html code -->
<body class="home-page overflow-hidden ">
<div class="container-fluid">
<div class="heading-score-life d-flex justify-content-between">
<span class="ml-3 mt-1">Score 0</span>
<span class="mr-3 mt-1">Life 10</span>
</div>
<div class="container">
<div class="row">
<div class="col-4">
<div class="first hen d-flex justify-content-center">
<img src="photos/Happy-hen.svg" class="img-fluid henD">
</div>
</div>
<div class="col-4 ">
<div class="second hen d-flex justify-content-center">
<img src="photos/Happy-hen.svg" class="img-fluid henD">
</div>
</div>
<div class="col-4 ">
<div class="third hen d-flex justify-content-center">
<img src="photos/Happy-hen.svg" class="img-fluid henD">
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="first hen d-flex justify-content-center">
<img src="photos/Happy-Egg.svg" class="egg one">
</div>
</div>
<div class="col-4">
<div class="second hen d-flex justify-content-center">
<img src="photos/Happy-Egg.svg" class="egg two">
</div>
</div>
<div class="col-4 ">
<div class="third hen d-flex justify-content-center">
<img src="photos/Happy-Egg.svg" class="egg three">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="start-table" class="caption text-center m-auto">
<h1 class="pb-3 mt-4 text-white font-weight-bold">HAPPY EGGS</h1>
<button id="play" >PLAY</button>
</div>
</div>
</div>
<div class="basket-area">
<div class="row align-items-center">
<div class="basket" id="basket_move">
<img src="photos/Basket.svg" class="img-fluid">
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
//css code
.home-page{
background-image: url(../photos/Background-Night.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center 43%;
height: 100vh;
}
.henD{
width: 40%;
animation:henscale 1s infinite linear;
}
#keyframes henscale {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.home-page span {
font-family: "Roboto", sans-serif;
color: white;
font-weight: bold;
font-size: 1.5rem;
}
.caption {
height: 22vh;
background-color:#4C4660;
width: 60%;
border: 4px solid #FF4571;
border-radius: 70px;
margin-top: 50px !important;
}
.caption h1 {
font-size:300%;
}
.caption button{
border: 4px solid #fff;
background-color: #ff5f84;
border-radius: 100px;
color: #fff;
width: 200px;
height: 56px;
font-size: 42px;
text-align: center;
font-weight: 900;
letter-spacing: -3px;
line-height: 44px;
}
.basket{
width: 5rem;
}
.hes{
overflow: hidden
}
#basket_move{
position: absolute;
bottom: 50px
}
.dispalyNone {
display :none !important;
}
.dispaly{
display: flex !important;
}
.egg{
position: absolute;
z-index: 9999999999999999;
display: none;
}
.one{
width: 22px;
}
.two{
width: 22px;
}
.three{
width: 22px;
}
.first img {
position: relative;
z-index: 9999;
}
// JS code
var bascket = document.getElementById("basket_move");
var playBtn = document.getElementById("play");
var caption = document.querySelector(".caption");
var eggsO = document.querySelector(".one");
var eggsT = document.querySelector(".two");
var eggsTh = document.querySelector(".three");
var currentPosEgg = 0;
var requestAnimationFrame = window.requestAnimationFrame;
playBtn.onclick = function playBtn() {
start();
animation();
during()
}
function start() {
caption.classList.add("dispalyNone")
}
function during() {
eggsO.classList.add("dispaly")
eggsT.classList.add("dispaly")
eggsTh.classList.add("dispaly")
}
function animation() {
eggsO.style.top = currentPosEgg + "px";
currentPosEgg++
if (currentPosEgg >= 400) {
currentPosEgg = 0;
}
eggsT.style.top = currentPosEgg + "px";
currentPosEgg++
if (currentPosEgg >= 900) {
currentPosEgg = 0;
}
eggsTh.style.top = currentPosEgg + "px";
currentPosEgg++
if (currentPosEgg >= 800) {
currentPosEgg = 0;
}
requestAnimationFrame(animation);
}
document.addEventListener("mousemove", function (e) {
mouse(e);
})
function mouse(e) {
var x = e.clientX;
bascket.style.left = x + "px"
}
appreciate the soon reply to give me a simple way to do this function, and collect them in the score, native javascript: 0.0.00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

What you're looking for is collision detection - the way collision detection works is by checking if two shapes overlap. For the purposes of your game, representing the collision boundaries as rectangles at the same position, and with the same width and height as the width and height of the basket and egg textures in pixels should be sufficient.
First step is to create a rectangle structure, probably a class called Rectangle or something similar - for that you'd need to store the above mentioned values - the x and y positions on the screen, as well as the width and height as variables in the aforementioned Rectangle class.
Next, to check if two rectangles overlap, one could create a function that returns a Boolean as to whether the rectangles overlap or not. This can be easily determined using the following logical function:
...
function overlaps(rect) {
return x < rect.x + rect.width
&& x + width > rect.x
&& y < rect.y + rect.height
&& y + height > rect.y
}
...
Finally, to detect if the basket is overlapping any eggs, simply iterate over the rectangles for the eggs and check if they overlap the basket, if so - collect the egg.

CSS slideshow animations will not occure

I am mocking a slide show animation by W3 Schools by integrating it into one of my websites. The slides do change in right times but the fade top/bot commands do not seem to do anything. I have checked my divs and javascript but it gets tricking trying to mock something and translating it into my website
is there an issue on my animation callout or what may be the problem?
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2550);
}
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
}
header a:hover {
color: #fffffff;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="w3-content w3-section" style="max-width:500px">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">
</div>
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
</body>
</html>

In javascript the class name you have used is mySlides
var x = document.getElementsByClassName("mySlides");
but in HTML you have used class name as slides
Change on either side and it will start working.
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2550);
}
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
}
header a:hover {
color: #fffffff;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="w3-content w3-section" style="max-width:500px">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">
</div>
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Javascript horizontal image slider - javascript

The condition in line number 42 else if (count == items.length - 1) should be replaced with else if (count == items.length). Also need to take care of the undefined errors, by checking for the existence of objects using if condition. See the pen and refer line number 50 and 58. Hope this helps.

Related

Display flex is messing around with my items

Why is my Accordion closing animation not firing? It opens (with animation) but closes without animation

How to enable button if all divs are selected in vanilla javascript?

I need to know how can i make the basket collect the eggs once touch it ? (egg and basket game )

CSS slideshow animations will not occure

Categories

Resources