I'm looking for a specific carousel-style slideshow

[macaddict23]

Here's what I want to happen:

- I'd like to create a carousel-style slideshow out of five banner images
- I'd like the slideshow to play automatically, but I also want the user to click/jump to any of the banners via a series of clickable dots
- In banner #1, I would like a fade transition to happen within the banner itself. Is this possible?

Thanks,
Mark

 

[SrWebDeveloper]

Here's what I want to happen:

- I'd like to create a carousel-style slideshow out of five banner images
- I'd like the slideshow to play automatically, but I also want the user to click/jump to any of the banners via a series of clickable dots
- In banner #1, I would like a fade transition to happen within the banner itself. Is this possible?

Thanks,
Mark

jQuery carousel plugins are one way.

For a carousel with user interaction, clickable dots and a myriad of custom configuration options including transition effects, check out this one and be sure to look closely at the configuration options for complete customization including transitions which is a simple matter of also using the JQuery.transition-plugin linked in the config area.

This is a pretty amazing script - it has callbacks, triggers and complete customization using jQuery -- cross browser compatible and easy to config.

Get the basic carousel working first, all 5 slides.

For the fade effect only on slide #1 only this carousel conveniently includes callback functions as custom events for each HTML element in each slide referenced by "this". The configuration options and event triggers are well documented and plentiful which is why I chose this one for you. Add a condition to check for slide 1 and do a normal JQuery fade within that condition.

Obviously doing the slide #1 thing requires basic knowledge of Javascript, callback functions and jQuery. Documentation and examples all over the site and at jQuery.com.

Cheers.

 

[macaddict23]

Thanks for the leads. Right now, I'm using WowSlider, which looks like it might work. Is it possible to have multiple transition times between slides. So instead of a global 2-second transition between each slide, I would like a 5 second transition between Slide 1 and Slide 2, and everything else be 2 seconds.

 

[SrWebDeveloper]

Thanks for the leads. Right now, I'm using WowSlider, which looks like it might work. Is it possible to have multiple transition times between slides. So instead of a global 2-second transition between each slide, I would like a 5 second transition between Slide 1 and Slide 2, and everything else be 2 seconds.

Yes, it is possible to make any carousel behave this way, slide by slide.

Can't speak for WowSlider - but if in its configuration you cannot easily do what you want (which is different than your original request which makes helping you rather difficult, TBH) the basic procedure I outlined in my previous response will work here, i.e. targeting slides by ID with JQuery and adding conditional effects. I am not sure if you're expecting us to code the solution for you or not or if you are hoping a widget out there does exactly what you want with simple setup --- but the widget and its API I suggested originally *will* allow you to do literally whatever you want to any slide in any manner.

 

[macaddict23]

Sorry for the confusion. I'm not expecting anyone to code it for me. I'm looking for an existing code (free or purchase) that would allow me to cycle several images on my homepage. Just a very simple image swap or a fade-in. It would also be nice to have the ability to set multiple delay times between slides.

I have no knowledge of javascript or JQuery. :-(

 

[SrWebDeveloper]

Sorry for the confusion. I'm not expecting anyone to code it for me. I'm looking for an existing code (free or purchase) that would allow me to cycle several images on my homepage. Just a very simple image swap or a fade-in. It would also be nice to have the ability to set multiple delay times between slides.

I have no knowledge of javascript or JQuery. :-(

Respectfully, this is the third different request, but at least now I know you're not a developer which explains alot. Unfortunately the forum you're on now is for developers so the advice was given directed to folks who know basic Javascript or frameworks like jQuery which extend Javascript to make things easier for a developer. Even if I find you a plugin that is perfect, you still need to know how to install it (HTML), configure it (Javascript) and customize it (CSS) --- as basic as it gets.

If what I said is like a foreign language to you, hire a developer.

If you are willing to learn the basics - this plugin is as basic and easy for beginners to install and configure, just follow the directions:

http://jquery.malsup.com/cycle/

And I even found a tutorial for this plugin for beginners: http://digitalunion.osu.edu/2011/10/18/jquery-cycle-plugin-a-little-tutorial/

The rest is up to you!

Note: Others here might post simple Javascript solutions but I warn you, you're asking for fade and transition effects not just simple rotation, so the reason I suggested the plugin is to simplify the customization part. And, technically, the jQuery framework handles cross-platform browser compatibility issues and stuff you'd rather not learn nor need to learn. I figure you might as well learn jQuery instead of dealing with all those other issues in standard Javascript.

Hope this helps you, no matter how you proceed from here. My job is to inform you of the facts as I see them, feel free to wait on other replies if you want more feedback and more ideas for scripts. Good luck to ya.