Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Carousel slider doesn't work

L

leih

New Coder
Hello,

I just followed a videotutorial on how to build a carousel slider. Once I was done i tried it out, but it didn't work. Nothing happens when I click on the words left/right.
I looked trough the whole code, but couldn't find any mistakes.
I thought that maybe someone here could look an the code and find the mistake.
Thanks already for anyone who can help:)

I have css and js in seperate files:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="Unterseite_1.css" type="text/css" rel="stylesheet">
<script src='https://code.jquery.com/jquery-3.6.1.js'></script>
<script type="text/javascript" src="Unterseite_1.js"></script>
</head>
<body>
<div class="container">
<div class="carousel">
<div class="slider">
<section>Content for section 1</section>
<section>Content for section 2</section>
<section>Content for section 3</section>
<section>Content for section 4</section>
</div>
<div class="controls">
<span class="arrow left">left</span>
<span class="arrow right">right</span>
</div>
</div>
</div>
</body>
</html>



CSS:
.container {
width: 80%;
margin: 10px auto;
background-color: black;
}
.carousel {
border: 2px solid #ccc;
height: 400px;
position: relative;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
border: 1px solid red;
transition: all 0.3s;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
span, section {
color: white;
}
.controls .arrow {
position: absolute;
top: 50%;
cursor: pointer;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}


JS:
const slider = document.querySelector('.slider');

const leftArrow = document.querySelector('.left');
const rightArrow = document.querySelector('.right');

var sectionIndex = 0;

leftArrow.addEventListener('click', function() {
sectionIndex = (sectionIndex > 0) ? sectionIndex - 1 : 0;
slider.style.transform = 'translate(' + (sectionIndex) * -25 + '%)';
});

rightArrow.addEventListener('click', function() {
sectionIndex = (sectionIndex < 3) ? sectionIndex + 1 : 3;
slider.style.transform = 'translate(' + (sectionIndex) * -25 + '%)';
})
 
Solution
D
Spotted the error. That <script> include should be at the end :
HTML: 
...
</div>
</div>
</div>
<script type="text/javascript" src="Unterseite_1.js"></script>
</body>
</html>
Do you understand why ?
Sort by date Sort by votes
"Nothing happens" is such a useless problem description. The fact you don't see the intended result does not mean that nothing is happening. Have you checked the Console for errors ? Have you verified that these event listeners are being executed ? Have you ran your code through the W3C online validator ?
 
Upvote 0 Downvote
This is what it says when I looked at the console:
Unterseite_1.js:10
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at Unterseite_1.js:10:11
 
Upvote 0 Downvote
Spotted the error. That <script> include should be at the end :
HTML: 
...
</div>
</div>
</div>
<script type="text/javascript" src="Unterseite_1.js"></script>
</body>
</html>
Do you understand why ?
 
Upvote 0 Downvote
Solution
cbreemer said:
Spotted the error. That <script> include should be at the end :
HTML: 
...
</div>
</div>
</div>
<script type="text/javascript" src="Unterseite_1.js"></script>
</body>
</html>
Do you understand why ?
Click to expand...
Thanks. I read somewhere that the html needs to be declared first so js has acces to the DOM elements..so i kinda get it..
To be honest i don't even know what a DOM element is, i'm very much a beginner
 
Upvote 0 Downvote
Declaring JS first in the <head><script> section is typically used to declare functions that will be called after the document is fully loaded. Wrap your code in a function :
JavaScript: 
function  init()
{
const slider = document.querySelector('.slider');

const leftArrow = document.querySelector('.left');
const rightArrow = document.querySelector('.right');

var sectionIndex = 0;

leftArrow.addEventListener('click', function() {
sectionIndex = (sectionIndex > 0) ? sectionIndex - 1 : 0;
slider.style.transform = 'translate(' + (sectionIndex) * -25 + '%)';
});

rightArrow.addEventListener('click', function() {
sectionIndex = (sectionIndex < 3) ? sectionIndex + 1 : 3;
slider.style.transform = 'translate(' + (sectionIndex) * -25 + '%)';
})
}

and execute that function when all the HTML has been loaded :

HTML: 
<body onload="init()">

That is how it is nearly always done.
A DOM element is any element that is defined in the HTML, like a <button>, <div>, <img>, or whatever.
The DOM is the collection of all these things inside a web page.
 
Last edited by a moderator:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom