jQuery custom slider not working as expected

Question

I am trying to make a bootstrap panel slider. For which I have written my own jQuery code, which is not working as expected.

What I am trying to do:

I have two links for previous and next and I have 3 panels with different headings just for distinction between the three. On click of previous, the current panel should hide and it's previous panel shoudl come up. I have indexed the panels by IDs 1, 2 and 3. If the current panel is the first one and previous is clicked then the last one, the third one should pop up. And vice versa when we click the next button. The following is my code that I am using:

HTML:

<div class="panel-slider">
    <div class="panel" id="1">
        <div class="panel-header">News Update 1</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel hide" id="2">
        <div class="panel-header">News Update 2</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel hide" id="3">
        <div class="panel-header">News Update 3</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel-slider-controls"> <a href="#" class="pull-left">Prev</a>
 <a href="#" class="pull-right">Next</a>

    </div>
</div>

JS:

var panel_index = 1;

$(".panel-slider .panel-slider-controls a").click(function () {
    var that = $(this);
    $(".panel[id=" + panel_index + "]").addClass("hide");
    if (that.text() == "Prev") {
        panel_index--;
        if (panel_index > 1) {
            $(".panel[id='" + panel_index + "']").removeClass("hide");
        } else {
            $(".panel[id='3']").removeClass("hide");
        }
    } else { //it's Next
        panel_index++;
        if (panel_index < 3) {
            $(".panel[id='" + panel_index + "']").removeClass("hide");
        } else {
            $(".panel[id='1']").removeClass("hide");
        }
    }
});

What's happening:

The behaviour is abnormal. It's not working as expected. It's unexplainable, see this in this fiddle.

Why is this happening? Can someon please help?

Note: If someone could remove my hard-coded IDs and could just make it work for no matter how many number of div, it would be great, thanks. :)

First of, ID's should never start with a number. [Read more here](http://stackoverflow.com/a/79022/3877639). Second, you should be able to do this without the ID's anyhow. I'll have a go in your fiddle! — Niklas, Jul 26 '14 at 14:20
@Niklas FYI `ID` starting with / having-only / a number is allowed in HTML5 — Roko C. Buljan, Jul 26 '14 at 14:28
@RokoC.Buljan Okey, didn't actually know that. Just use to not doing it I suppose. You learn new stuff all the time, that's why I love SO! :) — Niklas, Jul 26 '14 at 14:42
@Niklas exactly! There's many new things emerging from the abyss every day, and becomes really hard to follow up with all of those. Yep SO is a nice place to keep-up — Roko C. Buljan, Jul 26 '14 at 15:02

Roko C. Buljan · Accepted Answer · 2014-07-26T16:24:17.437

2

jsBin demo

Just assign a class (like next-news) to your buttons (don't let your JS logic depend on Text, only an added whitespace might brake it)

<a href="#" class="pull-left  prev-news">Prev</a>
<a href="#" class="pull-right next-news">Next</a>

and this is all you need:

var $panel = $('.panel-slider .panel'),
    idx = 0;

$(".prev-news, .next-news").click(function () {
    $panel.addClass("hide");
    idx = ($(this).hasClass('next-news') ? ++idx : --idx) % $panel.length ;
    $panel.eq(idx).removeClass("hide");
});

edited Jul 26 '14 at 16:24

answered Jul 26 '14 at 14:39

Roko C. Buljan

164,703
32
260
278

1

+1, that should be the way to go.I removed my answer, before anyone else falls for it. :). – nsthethunderbolt Jul 26 '14 at 15:27
@nsthethunderbolt Wise, but sorry to hear you removed it, perhaps you've could just improve it a bit... Thanks anyway for the heads-up!! – Roko C. Buljan Jul 26 '14 at 15:28
Nice answer. Got the logic aswell. :) Thanks. :) – Mohammad Areeb Siddiqui Jul 26 '14 at 16:07
@RokoC.Buljan, well, try clicking prev when the first panel is shown. – Mohammad Areeb Siddiqui Jul 26 '14 at 16:10

score 0 · Answer 2 · edited Jul 26 '14 at 15:31

0

You can find here how to solve your issue: http://jsfiddle.net/P6RfU/
Basically you was not changing the index when you are close to limits

if (panel_index > 1)
{
    panel_index--;
    $(".panel[id='" + panel_index + "']").removeClass("hide");
} 
else 
{
    panel_index=3;
    $(".panel[id='3']").removeClass("hide");
}

Hope it can help you, if you dont understand some part of code you can ask without hesitate.

edited Jul 26 '14 at 15:31

Roko C. Buljan

164,703
32
260
278

answered Jul 26 '14 at 14:32

agurodriguez

470
2
6
19

-1 for using `if (panel_index < 3)` Imagine a CMS driven website, a new added *News item* and the page owner calling you to go fix your code... embarrassing and time consuming after all – Roko C. Buljan Jul 26 '14 at 14:55

score 0 · Answer 3 · answered Jul 26 '14 at 14:40

Made it without the ID's as requested. Will work with how many .panel as you wish, http://jsfiddle.net/Ksn7q/5/

HTML

<div class="panel-slider">
    <div class="panel">
        <div class="panel-header">News Update 1</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel">
        <div class="panel-header">News Update 2</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel">
        <div class="panel-header">News Update 3</div>
        <div class="panel-body">
            <img src="img/news-update.jpg" class="img-responsive" />Lorizzle pizzle ma nizzle dope amizzle, consectetuer crazy elit. Dope dope velizzle, fo shizzle my nizzle volutpizzle, shizzlin dizzle fo shizzle, gravida fo shizzle, arc</div>
    </div>
    <div class="panel-slider-controls"> <a href="#" class="pull-left">Prev</a>
 <a href="#" class="pull-right">Next</a>

    </div>
</div>

CSS

.panel:nth-child(n+2) {
    display: none;
}

jQuery

$(".panel-slider-controls a").click(function () {

    var self = $(this);

    if(self.hasClass('pull-left')) {

        var prevPanel = $('.panel:visible').prevAll('.panel').first();

        if(prevPanel.size() == 0) {

            prevPanel = $('.panel').last();

        }

        $('.panel').not(prevPanel).hide();

        prevPanel.show();

    }
    else if(self.hasClass('pull-right')) {

        var nextPanel = $('.panel:visible').nextAll('.panel').first();

        console.log(nextPanel.size());

        if(nextPanel.size() == 0) {

            nextPanel = $('.panel').first();

        }

        $('.panel').not(nextPanel).hide();

        nextPanel.show();

    }

});

jQuery custom slider not working as expected

What I am trying to do:

What's happening:

3 Answers3