Hyper-mega-noob-question, i’ve been racking my brain over how to add next/ previous buttons to

Question

0

Asked: May 20, 20262026-05-20T21:59:00+00:00 2026-05-20T21:59:00+00:00

Hyper-mega-noob-question, i’ve been racking my brain over how to add next/ previous buttons to

0

Hyper-mega-noob-question, i’ve been racking my brain over how to add next/ previous buttons to a simple slider i found by Soh Tanaka and wanted to ask for your help in this endevour. So far i have gotten the slider to work with a tooltip and to load the images from an xml (per my requirement) but i’m pretty new to jQuery and can’t get the next/previous buttons working :(..Here is what i got so far:

CSS

body {
    margin: 0; padding: 0;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
    width: 322px;
    padding: 0;
    margin:30px 10px 0 10px;
}

/*--Main Container--*/
.main_view {
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height:270px;   width: 320px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
    z-index:1;
}

/*--Paging Styles--*/
.paging {
    position: relative;
    width: 320px; height:35px;
    text-align: center;
    line-height: 35px;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 0 2px;
    text-decoration: none;
    color: #000;
}
.paging a.active {
    color: #fff;
    font-weight: bold; 
    background: #920000; 
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

.box {
margin:0;
padding:0;
display: block;
width:318px;
height:268px;
float: left;
border:1px solid #ddd;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}

.box h3 {
font-size: 16px;
text-align:center;
white-space:wrap;
}

.box img {
margin-left:40px;
margin-bottom:-5px;
}

.box .slider-title {
color: red;
margin-bottom:4px;
margin-top:6px;
}

.box .slider-subtitle {
width:320px;
float:left;
margin-bottom:4px;
}

.box .input_Default {
width:320px;
display:block;
float:left;
text-align:center;
}

.loading {
background: url(loading.gif) no-repeat 0 0;
position: absolute;
top: 30px;
left: 30px;
z-index: 9999;
}

.subt {
color: #fff;
background:#1d1d1d;
padding:10px;
position:absolute;    
z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.moreinfo .subt { display:none; }

JS

$(document).ready(function() {

        $.ajax({
        type: "GET",
        cache: false,
        url: "ads.xml",
        data: 'xml',
        success: function (d) {
    $(d).find('promo').each(function(){
        var $promo = $(this); 
        var title = $promo.find('title').text();
        var subtitle = $promo.find('subtitle').text();
        var image = $promo.attr('image');
        var link = $promo.attr('link');
        var index = $promo.attr('index');

        var ads = '<div class="box"><h3 class="slider-title">' + title + '</h3>';
        ads += '<dt> <a class="moreinfo" href="' + link + '" target="_blank"><img alt="' + subtitle + '" src="' + image + '" /><span class="subt">test sub</span></a></dt>';
        //ads += '<dd> <span class="loading" alt="Loading" />';
        ads += '<h3 class="slider-subtitle">' + subtitle + '</h3>' ;
        ads += '<div class="input_Default"><a href="' + link + '">Learn More</a></div>';
        ads += '</dd></div>';

        var pager = '<a href="#" rel="' + index + '">' + index + '</a>';

        $('.image_reel').append($(ads));
        $('.paging').append($(pager));

        //$('.loading').fadeOut(1400);
    });
}
});

$('.image_reel').ajaxStop(function() {

    $(".paging").show();
    $(".paging a:first").addClass("active");

    var imageWidth = $(".window").width();
    var imageSum = $(".box").size();
    var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){
        var triggerID = $active.attr("rel") - 1;
        var image_reelPosition = triggerID * imageWidth;

        $(".paging a").removeClass('active');
        $active.addClass('active');

        $(".image_reel").animate({ 
            left: -image_reelPosition
        }, 800 );
    }; 

    rotateSwitch = function(){
        play = setInterval(function(){
            $active = $('.paging a.active').next();
            if ( $active.length === 0) {
                $active = $('.paging a:first');
            }
            rotate();
        }, 7000);
    };

    rotateSwitch();

    $(".image_reel a").hover(function() {
        clearInterval(play);
    }, function() {
        rotateSwitch();
    }); 

    $(".paging a").click(function() {   
        $active = $(this);

        clearInterval(play);
        rotate();
        rotateSwitch();
        return false;
    });

    $(".next a").click(function() {
        $active = $('.paging a.active').parent().next().find('a');
        if ( $active.length === 0) { //If paging reaches the end…
        $active = $('.paging a:first'); //go back to first
    }

        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });

    $(".prev a").click(function() {
        $active = $('.paging a.active').prev();
        if ( $active.length === 0) { //If paging reaches the end…
        $active = $('.paging a:first'); //go back to first
    }
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });

    $('.moreinfo').each(function() {
        var subt = $(this).find('.subt');
        $(this).hover(
            function() { subt.appendTo('body'); },
            function() { subt.appendTo(this); }
        ).mousemove(function(e) {
            var x = e.pageX + 20,
                y = e.pageY + 20,
                w = subt.width(),
                h = subt.height(),
                dx = $(window).width() - (x + w),
                dy = $(window).height() - (y + h);

            if ( dx < 20 ) x = e.pageX - w - 20;
            if ( dy < 20 ) y = e.pageY - h - 20;

            subt.css({ left: x, top: y });
        });         
    });

});

});

HTML

<div class="container">
            <div class="window">    
                <div class="image_reel">
                </div>
            </div>
            <div class="paging">
<a rel="nofollow" href="#" class="next" >next</a>
<a href="#" class="next" >next</a>
<a href="#" class="prev" rel="nofollow" >previous</a>
            </div>
<a rel="nofollow" href="#" class="next" >next</a>
<a rel="nofollow" href="#" class="next" >next</a>
</div>

All the images and buttons are pulled from an XML, and that works just fine but the next/prev buttons are my main issue :(.

Here is the original, non-XML version on JSFiddle i put up for testing, EDIT, original version http://jsfiddle.net/scPqJ/1/

Can one of you ninjas out there show me the right direction?

EDIT

for any future generation looking for a solution, a user in sohtanaka.com comments helped me out and got it working, here is the JsFiddle, http://jsfiddle.net/scPqJ/3/

This is the Js for the buttons (you set it in the end of the original JS, before the end brackets:

JS

$(".previous a").click(function() {    
    $active = $('.paging a.active').next();
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:first'); //go back to first
    }

    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});    


$(".next a").click(function() {    
    $active = $('.paging a.active').prev();
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:last'); //go back to first
    }

    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});

After you set that up, all you have to do is define the next/previous divs in the html, like so:

HTML

<div class="next">
<a href="#" >next</a>
</div>

<div class="previous">
<a href="#" >previous</a>
</div>

and Voila!.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-20T21:59:01+00:00

this one should work (although it’s far from perfect, see comments below):

$('#next').click(function(){
    var $pagingLinks = $('.paging a');
    var $nowActive = $('.paging a.active');

    var nextIndex = $nowActive.index()+1;
    if(nextIndex == $pagingLinks.length) nextIndex = 0;
    $active = $pagingLinks.eq(nextIndex);       

    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor     
});

i’m assuming here you got a link with id ‘next’ here to move on. you’ll notice that the second part of this code (starting with ‘Reset Timer’) is taken from your code (the event handler for clicking on the paging links).

comments:

in the code of your ‘paging’ links (i copied parts of) you’re dealing with a variable ‘$active’. this variable is defined globally (as a property of the global object), which should generally be avoided. you’re using jquery here, so it would definitely make sense to encapsulate your ‘slider’ code in a plugin on it’s own (see the jquery docs for help on this)
instead of setting a ‘$active’ variable, you might just add this information to some main element of your plugin using .data()

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

Hyper-mega-noob-question, i’ve been racking my brain over how to add next/ previous buttons to

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply