-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
made a carousel #1
base: main
Are you sure you want to change the base?
Conversation
index.html
Outdated
<title>Carousel</title> | ||
</head> | ||
<body> | ||
<img class="arcticmonkeys" src="./img/photo1.jpg" alt="Alex"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create with a loop
what if I want you to add 10000 images to the carousel?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
index.js
Outdated
|
||
let index = 0; | ||
|
||
function clickLeft() {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
index.js
Outdated
clickL.addEventListener( | ||
"click", | ||
(clickLeft = () => { | ||
if (index === 0) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If !index
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
index.js
Outdated
index--; | ||
|
||
elems[index].style.display = "block"; | ||
point[index].style.background = "Burlywood"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Too much copy paste
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
index.js
Outdated
clickR.addEventListener( | ||
"click", | ||
(clickRight = () => { | ||
if (index >= elems.length - 1) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
} | ||
|
||
.btn-left:hover { | ||
background-color: white; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At first, we don’t use colors like this
only hex
And you should add variables
.btn-right { | ||
position: absolute; | ||
top: 48%; | ||
right: 31%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Almost All styles are copy paste
<input id="clickR" type="button" value=" " class="btn-right"> | ||
|
||
<div id="main"> | ||
<div class="point"></div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You have to create it dynamically
@@ -0,0 +1,86 @@ | |||
const images = [ | |||
"./img/photo1.jpg", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create a dynamic array and use indexes
What if you have 100000 images?
|
||
const point = document.getElementsByClassName("point"); | ||
|
||
elems[0].style.display = "block"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can u do it while creative the element?
point[0].style.background = "Burlywood"; | ||
|
||
function createButtons() { | ||
const clickL = document.getElementById("clickL"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does it mean clickL?
|
||
let index = 0; | ||
|
||
function addChangeNone() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
AddChangeNone? Rename
|
||
clickL.addEventListener( | ||
"click", | ||
(clickLeft = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is it’�?
No description provided.