Confused creating a carousel

Question

I'm trying to create a carousel using the basic example provided in w3schools.

On top of that I was creating an additional div and inserting my content inside that. here is my Javascript.

<script>
        var slideIndex = 1;
        showDivs(slideIndex);

        function plusDivs(n) {
            showDivs(slideIndex += n);
        }

        function showDivs(n) {
            var i;
            var x = document.getElementsByTagName("table")
            if (n > x.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = x.length }
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            x[slideIndex - 1].style.display = "block";
        }
    </script>

Here is a working fiddle http://jsfiddle.net/h9sa7Lgw/

I've got 2 issues here,

1. I want to bring the arrows inside my div(mainDiv).
2. The previous arrow(<) doesn't seem to work. In the fiddle even > is not working, but in my local it does work.

My Question wasn't about the js fiddle, just was telling the problem with my fiddle, if the code is ran, it won't run.

Can someone please let me know where am I going wrong and how can I fix this.

Thanks

Answer 1

As suggestion, take a look to your developer tools in order to debug correctly, you can access it pressing F12 key. At console it can throw error messages that can give you hints of the issue, also in the elements it will highlight your elements.

1. I want to bring the arrows inside my div(mainDiv). Actually it is inside your mainDiv

2. The previous arrow(<) doesn't seem to work. In the fiddle even > is not working, but in my local it does work.

There are a bunch of errors here. First, your script its executed on the body onload, so the correct it should be No wrap - in (take a look to this answer jsFiddle onload and and no-wrap in body). The other error is that in your onclick attribute of the left button, it says nclick instead of onclick. After that fixes, it should work as charm. Here is your modified fiddle: http://jsfiddle.net/h9sa7Lgw/

Answer 2

Put position relative to the mainDiv.

.mainDiv {
    border: 1px solid black;
    width: 50%;
    margin-left: 10%;
    position: relative;
}