CODEWITHSUNDEEP
javascriptslider
Gobi
Gobi

Reputation: 35

How can i make my javascript slider work?

i started object oriented programming today. Im trying to remake something i made in spaghetti code but i cant make it work. 

class slider{
    constructor(){
        this.slide = ["images/slide1.jpg", "images/slide2.jpg", "images/slide3.jpg", ];
        this.next = document.getElementById('next');
        this.previous = document.getElementById('previous');
        this.bouttonSlider = this.next.onclick = function (){
            this.i = 0;
            document.getElementById("slide").src = this.slide[++this.i];
            if (i >= 2){
                i=0;
            }
        }
    }
};

Here is my html

<!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">
    <title>Document</title>
</head>
<body>
<div id="slider" style="width: 75%; margin-left: auto; margin-right: auto;">
    <img src="images/slide1.jpg" style="width: 100%;" id="greee">
</div>
<button id="previous">previous</button>
<button id="next">next</button>
<script src="script.js"></script>    
</body>
</html>

Upvotes: 0

Views: 185

Answers (1)

Ferenc
Ferenc

Reputation: 537

There are a few issues with your snippet above, but you're on the right track.

  1. As @VolodymyrI.I pointed out, you're not instantiating an object anywhere. Without that, your JS code is just a definition, but never executed. Create an object by calling new slider somewhere outside the definition. Just below will do.

  2. Now your constructor runs, but you are going to run into errors. One reason for this is how JS handles this depending on the context. In short, you want this to point to your object in order to access properties like this.slide. Instead of defining your onclick as function () {/**/}, define it like ()=>{/**/}. this will now point at the object, not the function context.

  3. I see you want to use this.i as the index of the image currently on display. An onclick runs every time you click the button - every time, the index will be set to 0. You probably want that just outside your onclick.

  4. The image ID is greee, document.getElementById("slide").src = this.slide[++this.i]; will not work.

  5. See if picture at index 0 ever gets shown with your logic.

Refer to the snippet below if you get stuck. Note that it has a minor bug with the index too. Indexing is difficult!

class slider{
    constructor(){
        this.slide = [
"https://i.imgur.com/EdDe8GHg.jpg",
"https://i.imgur.com/bOlGI3ig.jpg",
"https://i.imgur.com/TQaR2c4g.jpg"];
        this.next = document.getElementById('next');
        this.previous = document.getElementById('previous');
        this.index = 0;
        this.next.onclick = () => {
            if (this.index >= 3){
                this.index=0;
            }
            document.getElementById("greee").src = this.slide[this.index];
            this.index++;
        }
    }
};


new slider();
<!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">
    <title>Document</title>
</head>
<body>
<div id="slider" style="width: 75%; margin-left: auto; margin-right: auto;">
    <img src="https://i.imgur.com/EdDe8GHg.jpg" style="width: 100%;" id="greee">
</div>
<button id="previous">previous</button>
<button id="next">next</button>
<script src="script.js"></script>    
</body>
</html>

Upvotes: 2

Related Questions