Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved]Anything Slider navigation

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #41805
    margaux
    Participant

    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!

    #120150
    Mottie
    Member

    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);
    }
    });

    #120186
    margaux
    Participant

    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!

    #120232
    Mottie
    Member

    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; }

    #120241
    margaux
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.