Grow your CSS skills. Land your dream job.

[Solved]Anything Slider navigation

  • # January 7, 2013 at 8:04 am

    This is a great slider, very versatile. I have a couple of questions I’m hoping someone can help me to customise it a little.

    I’m using it twice on the same [page](http://www.articulate.uk.com/temp “”) and would like my custom nav arrows to sit at the bottom of the image. They are positioned properly on Case Studies but a little high on the images in the Inspirations slider. I’ve tried changing the css to make the selector specific to the slider but not having any joy. Any ideas on how to do this?

    Also I’d like to customise the slide navigation as per the Inspirations section with just the current slide number shown. How do I not display (or hide) all the slide numbers which are being displayed below the slider. And is it possible to display the 1/5, 2/5 slide navigation always in the same place – with each additional slide the current slide number moves to the right?

    Thanks for any help!

    # January 7, 2013 at 2:31 pm

    Hi marguax!

    Try adding this css to move the inspiration arrows down:

    .inspirationSliderContainer .anythingSlider-default .arrow { top: 375px; }

    That is a very clever trick you did with the navigation! I like it! To share it with others, basically you hide the non-current slides, then show only the current one and add content “/5″ after it, essentially like this ([demo](http://jsfiddle.net/Mottie/ycUB6/3753/)):

    .anythingSlider-default .anythingControls ul a {
    display: none;
    }
    /* Navigation current button, default state */
    .anythingSlider-default .anythingControls a.cur {
    display: block;
    }

    .anythingSlider-default .anythingControls a.cur::after {
    content:”2044 5″;
    }

    But instead of modifying the default navigation, just add an element you can position yourself

    Then use the `onSlideInit` callback function ([demo](http://jsfiddle.net/Mottie/ycUB6/3752/)):

    $(‘#slider’).anythingSlider({
    buildNavigation: false,
    buildStartStop: false,
    onSlideInit: function (e, slider) {
    $(‘#current’).html(slider.targetPage + ‘/’ + slider.pages);
    }
    });

    # January 7, 2013 at 7:12 pm

    Hi Mottie

    Thanks so much for your response and thanks for the compliment.

    Your code is brilliant! the nav arrows are nicely in place and the current slide navigation is also shaping up well. A couple of issues I hope you can help me with:

    When the page first loads, the image is positioned correctly but no slide numbers appear. As soon as the slider advances to the next slide, the slide numbers appear but the image moves down about 30 pixels. Any ideas on why the image is pushed down and how to make the slide number appear on load?

    Thanks again for your help!

    # January 8, 2013 at 2:34 am

    Include the `onInitialized` callback to add the slide number on startup. In that callback, use `slider.currentPage` instead of `slider.targetPage` (but I really both values are the same on startup) – here is an [updated demo](http://jsfiddle.net/Mottie/ycUB6/3756/).

    $(‘#slider’).anythingSlider({
    buildNavigation: false,
    buildStartStop: false,
    onInitialized: function(e, slider) {
    $(‘#current’).html(slider.currentPage + ‘/’ + slider.pages);
    },
    onSlideInit: function (e, slider) {
    $(‘#current’).html(slider.targetPage + ‘/’ + slider.pages);
    }
    });

    Then you can re-position the navigation block using absolute positioning. I had to add a wrapper with relative positioning as well. If you don’t understand how they work together check out [this tutorial](http://www.barelyfitz.com/screencast/html-training/css/positioning/).

    #wrapper { position: relative; margin: 40px auto; }
    #current { position: absolute; left: 50%; top: -20px; margin-left: -150px; }

    # January 8, 2013 at 7:28 am

    Thanks Mottie, I had to play around with the css positioning but the general concept worked a treat.

    I love this slider as it is a lot more flexible than some others I’ve used. I just need to learn to use its features better.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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