Grow your CSS skills. Land your dream job.

anythingSlider: Building a BBC-like navigation

  • # January 29, 2013 at 6:58 am

    Ok, so anythingSlider is quite brilliant, and so flexible it makes me wonder why you’d even bother with the other carousels out there. But enough of the sycophancy, I have a question.

    I’m trying to emulate the navigation of the slider seen on the BBC homepage here: http://bbc.co.uk

    I did try and fiddle with the built in navigation, and had a good poke around with navigationFormatter, but it doesn’t look like that works in any way I can hook into in order to match the Auntie Beeb style.

    So then I thought, ‘ah ha!’, I’ll just write my own bit of script that will be triggered whenever the slide changes. And that’s where I’ve come unstuck. How does one use the onSlideComplete callback to trigger another JS function? This is probably a newbie question for the gurus out there, but at the moment I appear to just be breaking the anythingSlider with my ham-fisted attempts to figure out the syntax.

    Many thanks in advance for your assistance,

    Pete

    # January 30, 2013 at 4:55 pm

    Hi Pete!

    Thanks for all of the compliments!… it worked LOL ;)

    I put together [this demo](http://codepen.io/Mottie/full/xLAhe) for you. It will need a `data-thumb` added to each “main” image inside of the slider; so multiple images inside the slider are allowed, only the image with a `data-thumb` will show in the preview thumb popup.

    Hopefully I’ve added enough comments in the css to allow adjusting this code to work with any theme.

    Check out this Pen!

    # January 31, 2013 at 3:46 am

    Thanks, Mottie, for the helpful slider and demo with comments!

    However, the actual CSS-Tricks page displaying the AnythingSlider doesn’t seem to be working properly (content a mess all over the page).

    http://css-tricks.com/examples/AnythingSlider/

    Know why this might be?

    -Kimberley

    # January 31, 2013 at 5:36 am

    That’s odd…it was fine the other day.

    My console is showing a couple of resource loading errors…perhaps there’s an issue at github.

    Perhaps an email to Chris?

    # January 31, 2013 at 7:57 am

    Oh! That’s my fault!

    @chriscoyier: I removed the syntax highlighting script “Chili” because it wasn’t compatible with jQuery 1.9. I’ll drop them back in now to fix the demo.

    # January 31, 2013 at 8:10 am

    All fixed! whew.

    # May 22, 2013 at 10:48 am

    I’m trying to emulate the navigation of the slider seen on http://wowslider.com/html-slideshow-silence-blur-demo.html
    Show preview thumbnails of the slide when hovering the page #.
    It is also great that I can click on the thumbnail to pick slide.

    Many thanks in advance for your assistance,
    Aleks

    # May 22, 2013 at 11:37 pm

    @Aleksandr It’s not exactly the same, but check out [this demo](http://codepen.io/Mottie/pen/CIdga)

    $(function () {

    $(‘#slider’).anythingSlider({
    theme: ‘metallic’,
    onInitialized: function(e, slider) {
    var i, s,
    $tooltip = $(‘

    ‘).appendTo( slider.$controls );
    slider.$controls.find(‘li’).on(‘mouseover mouseleave’, function(e){
    $tooltip.toggle(e.type === ‘mouseover’);
    i = slider.$items.eq($(this).index()).find(‘img’);
    s = i.attr(‘src’);
    if (s) {
    $tooltip
    .html(‘‘)
    .css({
    left: $(this).position().left – 40 // 1/2 thumb width
    });
    } else {
    $tooltip.empty();
    }
    });
    }
    });

    });

    # May 23, 2013 at 2:33 am

    @Mottie:
    http://jsfiddle.net/ycUB6/5878/
    Thanks a lot!

    # May 23, 2013 at 10:17 am

    @Aleksandr You might want to add this css to get the thumbs above the left navigation arrow ([demo](http://jsfiddle.net/Mottie/ycUB6/5883/)):

    .anythingSlider .arrow {
    z-index:-1;
    }

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

You must be logged in to reply to this topic.

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