"next" and "previous" buttons won't work in this touch slider plugin

Question

I am using touchSlider plugin: http://www.mobilizetoday.com/freebies/touchslider/examples#ex-6

I integrated this exact part of the plugin in my website(which I am making responsive). the sliding with the finger works perfectly, but the buttons aren't working. Here is my website: http://dev.ux-pm.com. To get the page where the slider is, just decrease browser width to less than 480px, and click on level 1 in detail (blue button)

HTML code:

<div class="gallery-holder">
            <div class="gallery" id="gallery3">
                <div class="holder">
                    <div class="list">
                        <div class="item">
                            <div class="ibox">
                                level1
                            </div>
                        </div>
                        <div class="item">
                            <div class="ibox">
                                level2
                            </div>
                        </div>
                        <div class="item">
                            <div class="ibox">
                                level3
                             </div>
                         </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#" class="prev">Prev item</a>
                <a href="#" class="next">Next Item</a>
                <span id="counter"></span>
            </div>
        </div>  

JS:

 $(document).ready(function(){

                    $('#gallery3').touchSlider({
                        mode: 'index',
                        center: true,
                        prevLink: 'a.prev',
                        nextLink: 'a.next',
                        onChange: function(prev, curr) {
                            $('#counter').html((curr+1)+'/'+ $('#gallery3').get(0).getCount());
                        },
                        onStart: function(){
                            $('#counter').html('1/' + $('#gallery3').get(0).getCount());
                        }
                    });
    });

CSS:

body {
    margin: 0;
    padding: 10px;
    font: 14px Helvetica, Arial, sans-serif;
    color: #666;
    max-width: 800px;
    min-width: 300px;
    margin: 0 auto;
}

h1, h2 {
    margin: 0;
    padding: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.box {
    width: 96px;
    height: 96px;
    line-height: 96px;
    text-align: center;
    color: #FFF;
    margin: 2px;
    display: block;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.box img {
    width: 96px;
    vertical-align: middle;
}

.box1 {background: red;}
.box2 {background: blue;}
.box3 {background: orange;}

.ibox,
.cbox,
.fbox {
    width: 210px;
    height: 210px;
    line-height: 210px;
    text-align: center;
    color: #FFF;
    margin: 2px;
    display: block;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.centered .ibox,
.centered .cbox{
    margin: 2px auto;
    padding: 0 2px;
}


.ibox img {
    width: 210px;
    vertical-align: middle;
}

.cbox img,
.fbox img{
    width: 100%;
    vertical-align: middle;
}

.fbox {
    width: 600px;
    height: 600px;
    line-height: 600px;
}

span.delta {
    position: absolute;
    top: 0;
    width: 1px;
    text-indent: -9999px;
    overflow: hidden;
    background: magenta;
}

.ibox span.delta {
    height: 210px;
}

.active .box {
    outline: 1px dashed green;
}

.gallery-holder {
    margin: 0 auto;
    outline: 1px dashed #666;
    margin: 0 auto 10px auto;
    padding: 10px;
}

.gallery {
    width: 100%;
    overflow: hidden;
}

.gallery div.holder {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.gallery div.list {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 9999px;
    overflow: hidden;
}

.gallery div.item {
    float: left;
}

/*.moving {
    background: yellow;
}*/

.debug-item {
    padding: 1px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-bottom: -1px;
    color: #999;
    font-size: 11px;
}

#menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu a {
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 6px 0;
    margin-bottom: 6px;
    font-size: 16px;
    color: #333;
    background: #EFEFEF;
    text-decoration: none;
    text-align: center;
}

a.prev,
a.next,
#moveTo,
a.tablink,
#counter {
    border: 1px solid #CCC;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 6px;
    margin-bottom: 6px;
    font-size: 16px;
    color: #333;
    background: #EFEFEF;
    text-decoration: none;
}
a.prev {float: left;}
a.next {float: right;}

#moveTo,
#counter {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    width: 200px;
    text-align: center;
}

.focus .ibox {
    outline: 1px dashed green;
}
.focus-old .ibox {
    outline: 1px dashed red;
}

#tabs, #tabs2 {
    text-align: center;
}
.tablink {
    display: inline-block;
    overflow: hidden;
    width: 20px;
    height: 20px;
    text-align: center;
    margin: 0 2px;
}
a.active {
    border-color: #333;
}

#tabs2 .tablink {
    display: inline-block;
    overflow: hidden;
    width: 15px;
    height: 15px;
    text-align: center;
    margin: 0 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    text-indent: -9999px;
}

#tabs2 a.active {
    background-color: #666;
}

I have desperately tried to find the problem, but I couldn't .. Any help? thanks

Answer 1

You navigation elements aren't nested inside of gallery3, which is where the plugin expects them to be:

<div id="left2">
<div class="gallery-holder">
        <div class="gallery" id="gallery3">
            <div class="holder">
                <div class="list" style="transition: 0.5s ease; -webkit-transition: 0.5s ease; -webkit-transform: translate3d(60px, 0px, 0px);">
                    <div class="item active"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
            </div>
        </div>
    </div>
<a href="#" class="prev">Prev item</a>
<a href="#" class="next">Next Item</a>
<span id="counter">1/3</span>

The touchSlide plugin looks within the initialized objects scope for the button selectors. http://touchslider.com/

Try nesting them in side of gallery3 but not inside of holder.