I created --item-width as a var variable in JavaScript. I thought it would work properly on the CSS, but it's not working properly. What should I do? I'm still a beginner, so I think I did something wrong. Help me.
I am writing again because I was banished from writing. I look forward to your kind cooperation.
<!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">
<title>marquee_text</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
<script src="js/script.js" defer></script>
</head>
<body>
<div id="wrap">
<div class="marquee-text">
<div class="marquee-text__wrapper" data-controller="marquee">
<div class="marquee-text__item">
<strong>Marquee Text</strong>
<svg class="marquee-text__separator" height="19" width="19" viewBox="0 0 100 95.11">
<polygon points="50 0 65.45 31.31 100 36.33 75 60.7 80.9 95.11 50 78.86 19.1 95.11 25 60.7 0 36.33 34.55 31.31 50 0"/>
</svg>
<span>Marquee Text</span>
</div>
</div>
</div>
</div>
</body>
</html>
#charset "UTF-8";
:root {
--item-width: 0;
}
.marquee-text {
position: relative;
width: 100%;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
height: 50px;
background-color: #222;
font-size: 17px;
color: #fff;
}
.marquee-text__wrapper {
display: flex;
align-items: center;
height: 100%;
}
.marquee-text__item {
padding: 0 10px;
}
.marquee-text__separator {
position: relative;
top: -1px;
margin: 0 10px;
font-size: 1.3em;
vertical-align: middle;
fill: currentColor;
}
.marquee-text a:hover {
opacity: 0;
}
#keyframes marquee-text-ani {
0% {
transform: translate3d(0, 0, 0);
}
100% {
/* This code is not working. */
transform: translate3d(-(var(--item-width))'px', 0, 0);
}
}
setTimeout(()=>{
this.move()
}, 200)
function move() {
const $marqueeTop = document.querySelector(".marquee-text__wrapper");
const $marqueeTopItem = document.querySelector(".marquee-text__wrapper>div");
const $root = document.querySelector(":root");
const itemWidth= $marqueeTopItem.clientWidth;
for (i = 0; i < 10; i++) {
let marqueeTopItem = $marqueeTopItem.cloneNode(!0);
$marqueeTop.appendChild(marqueeTopItem);
}
// This variable is not working in CSS.
$root.style.setProperty(`--item-width`, itemWidth);
$marqueeTop.style.animation = `marquee-text-ani 4s linear 1s forwards infinite`;
}
I changed the code like Terry gave me the comment, and it works well. Thank you.
transform: translate3d(calc((-1px) * var(--item-width)), 0, 0);
Related
I am adding images of cards for a blackjack game and for whatever reason when I try to insert images through JS, they don't appear on the website. The hit button is supposed to add a new random card. The goal is to generate a random suite and a number and add the source accordingly.
let randomSuite;
let randomNum
let count = 1;
var cards = new Array();
const suites = new Array();
suites[0] = "H";
suites[1] = "S";
suites[2] = "C";
suites[3] = "D";
window.onload = function main(){
for(let i = 0 ; i < 56 ; i++){
randomNum = (Math.random() * 12) + 1;
cards.push(Math.floor(randomNum));
console.log(cards[i]);
count++;
}
}
function hitFunc(){
randomSuite = Math.floor(Math.random() * 3);
var img = document.createElement("img");
img.setAttribute("src","PNG-cards-1.3\1C.png");
document.body.appendChild(img);
//alert(randomSuite); used to check whether or not my code is running random numbers
img.id = count;
count++;
}
*{
margin: 0;
padding : 0;
font-family: sans-serif;
}
#divId {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.main{
width: 100%;
height: 100vh;
background-color:black;
}
.img1{
position: relative;
z-index: -1;
margin: 10px auto 20px;
display: block;
width: 75%;
height: 75%;
}
.img2{
position: relative;
z-index: 1;
margin: 10px auto 20px;
display: block;
bottom: 150px;
width: 7%;
height: 7%;
}
.hitButton {
z-index: 1;
position: relative;
text-align: center;
left: 175px;
bottom: 250px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
color: aliceblue;
object-position: center;
}
<!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">
<title>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<style>
h1{text-align: center;}
</style>
<body class="main">
<div id="divId">
<h1 class="center">black jack</h1>
<img src="C:\Users\Adamf\OneDrive\Pictures\Camera Roll\background.jpg"
alt="" class="img1">
<button class="hitButton" id="hitbtn" onclick="hitFunc()">HIT</button>
<img src="PNG-cards-1.3\1C.png"
alt="" class="img2">
</div>
</body>
</html>
When I insert the same photo in html it works fine however when I try to manually add (the same path) it in JavaScript the same image does not want to appear. It will show up as if the image is not found.
edit: I just added the full program to stop confusion. Also, I am very new to JS so forgive my lack of knowledge.
I don't think anything wrong with your JS. Just check the image URL. Search on google about img attributes to see if anythings different.
I am making a simple slideshow with images fading in and out. The image transition is done in CSS. I am having some issues of washed-out images during the transition. The problem is particularly visible when using the keyboard and keeping a key down. Below is a very basic example (simply press any key to change images).
Is there an easy fix to this? Ideally, I would like to have something similar to that website, which I find much more pleasing to the eye.
I have tried to play with the transition-timing-function and different transition-duration between the image and .visible rules in the CSS, without success.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
window.addEventListener('keydown', () => {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
});
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body, figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
Use a timer with a 100 millisecond delay with each keydown event
Use a control variable whose value is false with each keydown event
and the next image cannot be displayed until it is false and its value
becomes true when the timer time has come.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
var allow = true;
window.addEventListener('keydown', () => {
if (allow) {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
allow = false;
displayTimer(200);
}
});
var timer;
function displayTimer(sec) {
var dec = sec - 100;
if (dec == 0) {
window.clearTimeout(timer);
allow = true;
} else {
timer = setTimeout(function() {
displayTimer(dec)
}, 100);
}
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body,
figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
I'm adding a feature to a squarespace website. The feature is a new image fade-in/fade-out effect when the mouse is hovering over one of three buttons. The problem is that the static/main image is an img element in the html and not in the css, so I can't change it like that. I have tried to change the element.src in javascript however there's no transition. Is the best way to add another element in the javascript code so I can make the added img transition with opacity? That just seems like a lot of extra work trying to put it in when working in squarespace.
Any suggestions? By the way I have a snippet showing my code and the issue.
PS, the buttons are under the image at the moment. That doesn't need a fix.
let jw_backgroundswitch = document.querySelector('.section-background img');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
jw_backgroundswitch.src = images[index];
});
jw_btn_current.addEventListener('mouseleave', function() {
jw_backgroundswitch.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
});
});
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
.section-background{
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt="" data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613" data-load="false" data-parent-ratio="1.4" style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I would superpose two <img> elements inside a <div> wrapper and play with the opacity. The static picture will be above when the mouse is not hovering on a button and when hovering, first you set the image below with imageBelow.src = images[i] and then change the opacity of the image above with imageAbove.style.opacity = "0";
wrapImages();
let imageBelow = document.querySelector('.pics .below');
let imageAbove = document.querySelector('.pics .above');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
imageBelow.src = images[index];
imageAbove.style.opacity = "0";
});
jw_btn_current.addEventListener('mouseleave', function() {
imageAbove.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
imageAbove.style.opacity = "1";
});
});
function wrapImages() {
let sectionBackground = document.querySelector('.section-background');
let images = sectionBackground.getElementsByTagName('img');
var newDiv = document.createElement("div");
newDiv.className="pics";
sectionBackground.insertBefore(newDiv, sectionBackground.firstChild);
newDiv.appendChild(images[0]);
newDiv.appendChild(images[1]);
images[0].className="below";
images[1].className="above";
}
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.pics {
position: relative;
width: 100%;
height: 100vh;
}
.pics > img {
position: absolute;
transition: all .4s ease;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://images.unsplash.com/photo-1610043238036-7309f1cc52d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80">
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
</div>
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
EDIT
If as you stated SquareSpace doesn´t allow you to add a wrapper to the HTML, then you can add a wrapper programatically. I have now added the function wrapImages() which must be called at the beginning of the JS code.
At the moment when the user clicks one of the SVGs the class "clicked" is added to that particular SVG. What I would like to happen is that when an SVG is clicked on the page, the other SVG elements are hidden (opacity: 0 or something) and not clickable.
My JS knowledge is a bit limited. I was thinking a class would need to be added to the SVGs when the others were inactive as I was thinking about transitioning them out when a click happens, however would appreciate any suggestions.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive SVG</title>
<link rel="stylesheet" href="static/css/styles.css" />
</head>
<body>
<div class="container" id="container">
<svg version="1.0" class="svg svg-a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect class="rect rect-a" width="100" height="100" />
</svg>
<svg version="1.0" class="svg svg-b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect class="rect rect-b" width="100" height="100" />
</svg>
<svg version="1.0" class="svg svg-c" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect class="rect rect-c" width="100" height="100" />
</svg>
</div>
<script src="https://cdn.jsdelivr.net/npm/animejs#3.0.1/lib/anime.min.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background: #222;
position: relative;
}
svg {
display: flex;
width: 100px;
height: 100px;
transition: 0.7s ease-out;
}
.rect {
cursor: pointer;
fill: #eee;
transform-origin: 50% 50%;
transition: 0.5s;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
box-shadow: 20px 20px 20px 0;
position: absolute;
}
.rect-a {
fill: cornflowerblue;
z-index: 390;
}
.rect-b {
fill: pink;
box-shadow: 20px 20px 20px 0;
}
.rect-c {
fill: azure;
box-shadow: 20px 20px 20px 0;
}
.clicked {
fill: cornflowerblue;
transform: scale(1.2);
transform-origin: 50% 50%;
transition: 0.5s;
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.clicked svg {
fill: red;
transform: translateY(500px);
}
button {
position: absolute;
z-index: 1000;
color: red;
top: -5px;
right: -5px;
border-radius: 100px;
z-index: 900;
}
// First we get all the path elements and put them in an array
let paths = document.getElementsByClassName('svg');
// Now we can loop over the array and add an eventlistener to each path in the array and it listens to the 'click' event and then runs function toggleClass()
for (let i = 0; i < paths.length; i++) {
paths[i].addEventListener('click', toggleClass);
}
// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass() {
this.classList.toggle('clicked');
}
https://codepen.io/chrismorrison/pen/ZEWdJyV
Updated CodePen w/ rough implementation of what I believe you are looking for.
Below are the changes I made:
JS
// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass(e) {
const clickedClassName = 'clicked';
// If "disabled", don't respond to the click event.
if(this.classList.contains('disabled')) {
e.preventDefault();
}
// The element is "enabled". Has it been clicked
// already? If so, we need to restore it along with
// all the other SVGs back to their original state.
// If not, then hide all other SVGs and add the "clicked"
// class to the element that was clicked
else if(!this.classList.contains(clickedClassName)) {
this.classList.add(clickedClassName);
for(let p of paths) {
if(this !== p) {
toggleDisabled(p)
}
}
} else {
this.classList.remove(clickedClassName);
for(let p of paths) {
if(this !== p) {
toggleDisabled(p)
}
}
}
}
function toggleDisabled(p) {
p.classList.contains('disabled') ? p.classList.remove('disabled') : p.classList.add('disabled')
}
CSS
.disabled {
opacity: 0;
}
I am trying to understand why the below code snippet returns the wrong value and it doesn't matter whether I use clientWidth or offsetWidth.
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(imgSize);
What does matter is where I import my script though. I found out that it will only return the correct value when I import my script at the end of my body tag, in addition, I have to keep the defer attribute!
<script src="../source/js/myJS.js" defer></script>
If I would import this in my head it is not working.
The oddest thing is when I import my script in my head with the defer attribute, then I will get randomly two values (133px or 450px), but only 450 is correct. So where does this effect come from?
I will now past the relevant css in case it is needed to answer my question because I am not sure whether it will be:
* {
box-sizing: border-box;
margin: 0;
}
body {
margin: 0;
font-size: 62.5%;
font-family: 'Rochester';
font-family: 'Open
#gen-info .container-carousel {
overflow: hidden;
width: 450px;
height: auto;
margin: auto;
position: relative;
}
#gen-info .slides {
display: flex;
align-items: center;
align-content: center;
}
#gen-info img {
width: 450px;
height: 300px;
}
#gen-info h3 {
display: none;
font-size: 1.4rem;
text-align: center;
margin: 15px 0 40px 0;
}
#gen-info .current-heading {
display: block;
}
.prevBtn {
position: absolute;
top: 50%;
z-index:2;
left: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn {
position: absolute;
top: 50%;
z-index:2;
right: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn:hover {
opacity: 1;
}
.prevBtn:hover {
opacity: 1;
}
I also have media queries but in none, is a width of 133px
Edit:
The Html
//head area
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="../source/css/style.css" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans|Rochester&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/427c34389f.js"
crossorigin="anonymous"
defer
></script>
<script src="../source/js/myJS.js" defer></script>
</head>
// img area
<section id="gen-info">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img src="../source/img/gen-info/information/WinterAlt.jpg" alt="outsideHous">
<img src="../source/img/gen-info/information/feldberg.jpg" alt="Feldberg">
<img src="../source/img/gen-info/information/bspWinter2.jpg" alt="winterTitisee">
<img src="../source/img/gen-info/information/bspWinter1.jpg" alt="snowTrecking">
</div>
</div>
</section>
//complete JS
const btnPrevList = document.querySelectorAll('.prevBtn');
const btnNextList = document.querySelectorAll('.nextBtn');
const slides = document.querySelectorAll('.slides');
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(document.querySelector('.slides').children[0]);
console.log(imgSize);
const makeCloneSlides = (img, c) => {
const lastClone = img[img.length - 1].cloneNode();
const firstClone = img[0].cloneNode();
lastClone.className = 'last-clone';
firstClone.className = 'first-clone';
slides[c].insertAdjacentElement('beforeend', firstClone);
slides[c].insertAdjacentElement('afterbegin', lastClone);
};
const moveCarouselLeft = () => {
console.log('left');
};
const moveCarouselRight = () => {
console.log('right');
};
for (c = 0; c < slides.length; c++) {
let img = document.querySelectorAll('.slides')[c].children;
makeCloneSlides(img, c);
slides[c].style.transform = 'translateX(' + -imgSize + 'px)';
}
for (c = 0; c < btnPrevList.length; c++) {
btnPrevList[c].addEventListener('click', moveCarouselLeft);
}
for (c = 0; c < btnNextList.length; c++) {
btnNextList[c].addEventListener('click', moveCarouselRight);
}