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.
Thanks for all of the compliments!... it worked LOL ;)
I put together this demo 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.
@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.
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
Hi Pete!
Thanks for all of the compliments!... it worked LOL ;)
I put together this demo for you. It will need a
data-thumbadded to each "main" image inside of the slider; so multiple images inside the slider are allowed, only the image with adata-thumbwill 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.
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
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?
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.
All fixed! whew.