Why is my jquery code not working or throwing any errors?

Question

You can checkout my project here: http://jsfiddle.net/raj4dev/2o4uapc9/1/

Summary: I am making a jquery image slider. You can change the image in a box by pressing next and previous arrows. Currently, I have added code only for the next arrow.

Issue: Nothing happens when I click the next arrow. I don't see any errors in the chrome developer tools.

Please tell me how I can debug and fix this issue ?

Code here.

HTML:

<!DOCTYPE html>
    <body>
        <div id="container">
            <header>
                <h1>jQuery content slider</h1>
            </header>
            <img src="http://icongal.com/gallery/image/337589/small_arrow_left.png" alt="Prev" id="prev">
            <div id="slider">
                <div class="slide">
                    <div class="slide-copy">
                        <h2>Slide 1</h2>
                        <p>Dance and slide!</p>                     
                    </div>
                    <img src="http://m.rgbimg.com/cache1ny0NN/users/j/ja/jana_koll/600/mfOAUfa.jpg" alt="an image">
                </div>

                <div class="slide">
                    <div class="slide-copy">
                        <h2>Slide 2</h2>
                        <p>Dance and slide!</p>                     
                    </div>
                    <img src="https://s-media-cache-ak0.pinimg.com/736x/f9/2e/c0/f92ec0238d508e029be8b7163205d24e.jpg" alt="an image">
                </div>

                <div class="slide">
                    <div class="slide-copy">
                        <h2>Slide 3</h2>
                        <p>Dance and slide!</p>
                    </div>
                     <img src="http://www.pptbackgroundstemplates.com/backgrounds/abstract-red-light-wave-ppt-backgrounds-powerpoint.jpg" alt="an image">
                </div>
            </div>
            <img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-right-icon.png" alt="Next" id="next">
        </div>
    </body>

JS:

$(document).ready(function() {
    var sliding_speed = 500; 
    var autoswitch = true; 
    var autoswitch_speed = 4000;

    $('.slide').first().addClass('active');

    //Hide all slides, but...
    $('.slide').hide();

    //...show only the first slide
    $('.active').show();

    $('#next').on('click', function(){
        $('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
        if($('.oldActive').is(':last-child')) {
            $('.slide').first().addClass('active');
        }else {
            $('.oldActive').next().addClass('active');  
        }
        $('.oldActive').removeClass('oldActive');
    });

});

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #fff;
    background: #333;
    line-height: 1.6em;
}

a {
    color: #fff;
    text-decoration: none;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

#container {
    width: 980px;
    margin: 40px auto;
    overflow: hidden; 
}

#slider {
    width: 940px;
    height: 350px;
    position: relative; 
    overflow: hidden;
    float: left;
    padding: 3px;
    border: #666 solid 2px;
    border-radius: 5px;
}

#silder img {
    width: 940px;
    height: 350px;
}

.slide {
    position: absolute;
}

.slide-copy {
    position: absolute;
    bottom: 0px;
    left:0;
    padding: 20px;
    background: #7f7f7f;
    background: rgba(0,0,0,0.5);
    width: 100%;
}

#prev, #next {
    float: left;
    margin-top: 130px;
    cursor: pointer;
    position: relative;
    z-index: 100;
}

#prev {
    margin-right: -45px;
}

#next {
    margin-left: -45px;
}

The handler fires (I put a `console.log` inside of it) - your code just isn't doing what you think it should. — tymeJV, Nov 23 '15 at 19:38
You're adding and removing the `active` class, but that class isn't defined anywhere. — James Thorpe, Nov 23 '15 at 19:39

score 0 · Accepted Answer · answered Nov 23 '15 at 19:46

0

You need to again hide all slide and then show only the active one. You are changing the classes to properly set your desired active slide to have the active class, but nothing says that all active slides are shown always and all other slides are hidden always.

http://jsfiddle.net/v1au2d57/

$('#next').on('click', function(){
        $('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
        if($('.oldActive').is(':last-child')) {
            $('.slide').first().addClass('active');
        }else {
            $('.oldActive').next().addClass('active');  
        }
        $('.oldActive').removeClass('oldActive');
        //Hide all slides, but...
        $('.slide').hide();

        //...show only the first slide
        $('.active').show();
    });

answered Nov 23 '15 at 19:46

stephen.vakil

3,492
1
18
23

1

a css style would have accomplished this too. – Kevin B Nov 23 '15 at 19:49
Indeed. Probably a better approach. I'm just using the same approach as supplied. – stephen.vakil Nov 23 '15 at 19:52
@stephen.vakil - I don't understand why we need to add the line $('.slide').hide(); initially and after clicking the next button. When I remove the hide lines, only one slide is visible. So, why do I need to hide the slides when they are already hidden ? Of course, if don't hide the slides, the code does not work. But, I don't understand why. Please explain. – HelloWorldNoMore Nov 23 '15 at 20:24
@KevinB - I tried using css `.active {visibility: visible;}` It did not work. – HelloWorldNoMore Nov 23 '15 at 20:25
You are adding the .active class to the first slide and then instructing jQuery to "show" the current objects that have .active class. When the user clicks next, you want to change which slide has the .active class and update the previous slide that has .active to be .oldActive. So now you have a new slide which is currently invisible with a .active class and the previous slide, which is still visible, as .oldActive. So you need to do something to hide .oldActive and show the new .Active. You could also just do $('.oldActive').hide(); to accomplish the same effect. – stephen.vakil Nov 23 '15 at 20:28
1

@HelloWorldNoMore `display: none` and `display: block` would be more appropriate. display block for active, and display none for those without the active class. – Kevin B Nov 23 '15 at 20:28
@stephen.vakil - Can you please give me +1 to remove the -1 ? I am new to jQuery and my tutorial gave me the wrong code. I don't think that I should be punished for this. https://www.udemy.com/projects-in-javascript-jquery/learn/ – HelloWorldNoMore Nov 23 '15 at 21:16
@KevinB - Not sure what is the best way after I read this http://stackoverflow.com/questions/17630945/is-there-an-opposite-to-displaynone – HelloWorldNoMore Nov 23 '15 at 21:17
i assumed block, it could be block, inline, inline-block, or any one of the other valid values that isn't `none` – Kevin B Nov 23 '15 at 21:20

Why is my jquery code not working or throwing any errors?

1 Answers1