Grow your CSS skills. Land your dream job.

Anything Slider – change navigation code

  • # December 7, 2009 at 8:49 am

    I’m wondering if it’s possible (and how) to change the numbered navigation in anything slider so that it would be:

    previous | 1 2 3 4 5 | next

    where the previous and next aren’t absolutely positioned and expand/contract depending on the number of slides.

    any help is appreciated :)

    # June 2, 2011 at 2:10 pm

    I’m trying the same thing any luck?

    # June 2, 2011 at 4:51 pm

    Hiya

    Well, I was going to just add an

  • to the beginning and end of the existing navigation buttons, but the way the script works, it counts the navigation buttons to figure out which slide to change to, so it ended up being one slide off. The solution I came up with requires one extra line of css and a few changes to the existing css. And of course a little javascript work in the “onInitialized” callback. Here is a demo and the code:

    CSS

    /* new line */
    div.anythingSlider .anythingControls ul { float: left; }

    /* existing css, modified - removed ".thumbNav" basically */
    div.anythingSlider a {
    background: #777;
    color: #000;
    cursor: pointer;
    }
    div.anythingSlider.activeSlider a {
    background-color: #7C9127;
    }

    div.anythingSlider ul a {
    font: 11px/18px Georgia, Serif;
    display: inline-block;
    text-decoration: none;
    padding: 2px 8px;
    height: 18px;
    margin: 0 5px 0 0;
    background-image: url(http://proloser.github.com/AnythingSlider/images/cellshade.png);
    background-repeat: repeat-x;
    text-align: center;
    outline: 0;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    }
    div.anythingSlider ul a:hover {
    background-image: none;
    }

    Script

    $('#slider').anythingSlider({

    // If true, builds the forwards and backwards buttons
    buildArrows: false,

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
    slider.$controls
    .prepend('')
    .append('')
    .find('.prev, .next').click(function(){
    if ($(this).is('.prev')) {
    slider.goBack();
    } else {
    slider.goForward();
    }
    });
    }

    });
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".