autoplaying Featured Content-Slider

[janthemanson]

Hi there!

Im a newbie in jquery and javascript. I’m trying to solve a problem with an autoplaying Featured Content-Slider.
I’ve seen enough tutorials about sliders and found the easiest way for me is the one featured athttp://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/.

I’ve customized this one, so that I have one big main image, with this little dots as control instead of images and a caption that moves from the bottom up into the image. Thats working so far.

Here’s a little mockup: [img]http://farm3.static.flickr.com/2661/4177106855_54b83e1895_o.jpg[/img]

In addition I want to fade in prev/next buttons on the right and left side over the main image.
I found this article here on css-tricks: http://css-tricks.com/jquery-ui-tabs-with-nextprevious/

My question, is it possible to implemet this in the way I discribed this? Or is it more appropriate to use another solution for this kind of slide? Maybe would anybody help me out with implementing and optimizing this code, because I’m really a noob.

I think this would be great stuff for a additional tutorial/example here on css-tricks.
These simple content sliders are covered everywhere, but I found nothing about such a advanced custom slider.

The sample code so far:

Html is like in the both tutorials, the ul triggers the div panels.

The .js looks like this:

Code:

$(document).ready(function(){
$(“#tabs”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“.ui-tabs-panel”).hover(function() { $(“.caption”, this).stop().animate({top:’260px’},{queue:false,duration:160}); },
function() { $(“.caption”, this).stop().animate({top:’380px’},{queue:false,duration:160}); });
});

In addition I want to add the next/prev bottons from the tutorial with a fade in when the mouse hovers the main div:
source from the tutorial:

Code:

$(function() {

var $tabs = $(‘#tabs’).tabs();

$(“.ui-tabs-panel”).each(function(i){

var totalSize = $(“.ui-tabs-panel”).size() – 1;

if (i != totalSize) {
next = i + 2;
$(this).append(“Next Page »“);
}

if (i != 0) {
prev = i;
$(this).append(“« Prev Page“);
}

});

$(‘.next-tab, .prev-tab’).click(function() {
$tabs.tabs(‘select’, $(this).attr(“rel”));
return false;
});

});

I hope somebody could help me to merge these snippets!

Best regards Jan.

Please excuse my bad english if it’s bad….I’m from germany.

[Return]

Starting from Chris tut, you can make something like this:

http://bit.ly/5zHmE6

Also I’ve used an image title "plugin" for the caption, but i’m not sure if i can paste the author’s url.
Be aware that its not my code, only thing i did was adding the sliding caption and the mOver effect on the buttons, based
on others people code!

[janthemanson]

Hey, thank you very much for your quick answer!

I must say in cause of bad habbit I’ve overlooked this one a little bit!
Sounds a little bit simpler to me and I would give it a try!

But if anybody got a pretty solution for my example, I would be quite happy as well!

Thank you very much, return. I would test your suggestion.

[janthemanson]

Sorry Return, but I must apologise. I don’t recognized that you’ve already altered the code of the sample! (looked the same for me) :oops: I’ve stumbled upon this today and it’s exactly the code I’ve found on the web and already adapted from it’s sources. Thank you very much for you work, even if I don’t used it and found a way by myself. Make me think that my intentions in jquery aren’t that bad.

Thank you again!

[Author]

Posts