Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Looking for good slider/carousel
Looking for some help with a carousel/slider – I have downloaded and played around with the jQuery jcarousel which seems nice.
What I want to do is something similar to whitehouse.gov where the slider is numbered and contains images/videos/text.
Anyone got a good recommendation?
Offline
Re: Looking for good slider/carousel
Hey Jonathan,
I think you can do what you’re after with jquery.cycle plugin.
On the surface it looks like it’s for images – but it will create “slides” of any content you want.
Take a look at the advanced and additional demos.
Give me a shout if you need help setting it up.
—
Tom
Last edited by renobird (2009-01-27 19:36:32)
Offline
Re: Looking for good slider/carousel
Hi Jonathan,
I’ve used Jquery tabs for this too. There’s no reason that the tabs have to look like tabs and you can restyle and put them where you like. For instance I styled them as little placeholders and put them beneath a series of switching images with permlinked excerpt. You can also make it rotate through them like a slideshow too. I can show you the setup if you’re interested.
Last edited by jakob (2009-01-27 20:12:14)
TXP Builders – finely-crafted code, design and txp
Offline
Re: Looking for good slider/carousel
Jakob,
Nice. I never thought of using tabs like that – that’s a good idea. You don’t get the transition options of the cycle plugin…but if you don’t need those…then…
—
T
Offline
Re: Looking for good slider/carousel
Thanks for the replies! I think I like the transition part though. whitehouse.gov is using jcarousel, which is why I looked at it. I’d like it to go from 1-4 like on that site, but from what I see at first look, jcarousel expects <li> items for its functionality..
Offline
Re: Looking for good slider/carousel
You can do the same things with the cycle plugin. It will transition whatever you put inside of the container the “cycle” is applied to.
$('#carousel')
.after('<div id="pager">')
.cycle({
fx: 'fade',
speed: 'slow',
timeout: 6000,
pager: '#pager'
});
<div id="carousel">
<div class="slide">whatever content you want for slide1</div>
<div class="slide">whatever content you want for slide2</div>
<div class="slide">whatever content you want for slide3</div>
<div class="slide">whatever content you want for slide4</div>
</div>
You can place anything you want inside the “slide” <div>‘s
It will create a numbered navigation using the “pager” option – or you can specify a <ul> to use as the pager.
I think this is all correct – it’s just off the top of my head – check the cycle site for verification.
—
T
Last edited by renobird (2009-01-27 20:34:06)
Offline
Re: Looking for good slider/carousel
You don’t get the transition options of the cycle plugin…but if you don’t need those…then…
You’re right, with UI tabs you don’t get them all but I wouldn’t use them all either :-) Fading transitions are certainly no problem with UI tabs. See this example which just uses:
<script type="text/javascript">
$(function() {
$('#rotate > ul').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);
});
</script> I guess other fx: like slide etc. would be possible, just never investigated it any further as the fade-in-out was fine for me.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Looking for good slider/carousel
Noiwse!
I have a UI tabs implementation that I can check out the transitions on – that’s that pretty cool.
Thanks for the heads up.
—
T
Offline
Re: Looking for good slider/carousel
Cool stuff! What about the Coda Slider script? Just saw that one…also looks nice.
Offline
Re: Looking for good slider/carousel
Ah yes, didn’t dave/nemoorange use that one quite nicely on a mock-up for the textpattern.com homepage?
No, I was wrong. he used another one: dave’s demo page.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Looking for good slider/carousel
Personally I prefer the cycle plugin – it’s just more versatile. The coda slider is perfect if that’s the exact effect you are after. I’ve used it before – but only because the client was insistent on the left/right arrows (so it was easier to use that script — rather than build something similar from scratch).
Edit: I do like Jakob’s method though – tabs are pretty flexible as well.
Last edited by renobird (2009-01-27 21:11:02)
Offline
Re: Looking for good slider/carousel
Looks like Dave might have just written his own thing for that (instead of a plugin).
Offline