anythingSlider: Building a BBC-like navigation

[Pixuk]

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

[Mottie]

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!

[KimberleyDCS]

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).

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

Know why this might be?

-Kimberley

[Paulie_D]

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?

[Mottie]

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.

[Mottie]

All fixed! whew.

[Aleksandr]

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

[Aleksandr]

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

[Author]

Posts