Suggestions for CSS slideshows? Various Applications.

[Anonymous]

Greetings All,

I need advice on what type(s) of slideshow CSS to use on my site. I need several sliders on one page to show preview images of ~214x150px. These sliders don’t need nav arrows or descriptions they just need to show images. The second type of slider will need to show descriptions for each image of ~368x284px and have nav arrows; something like this.

Slideshow CSS is a new area for me, so the more descriptive the better.

Best Regards,

[Paulie_D]

@michael1961 Moved to Other Discussions as not about a specific CSS issue.

http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

As for the nav arrows…that will involve a little JS/JQ depending on what kind of functionality you want.

[Anonymous]

Greetings Paulie,

I’m a bit confused about the placement of the topic since others I found here are in the CSS forum, e.g., here, here, and here, among many others.

What needs to be done to allow multiple slideshows to operate on a single page? I assume each simply has to have its own name?

Best Regards.

[Paulie_D]

I’m a bit confused about the placement of the topic.

I felt that that it’s not so much a specific CSS troubleshooting issue as more of a ‘what are my options’ item…hence “Other Discussions”.

You should note the age of those threads which pre-dated the re-organisation of the forum.

I’m not a pedant about it as some discussions start off about specific issues and then veer into other area JS / WP etc when it becomes clear it’s not exactly about solving a CSS problem.

As for multiple slideshows, certainly it would make sense for each Slideshow parent / wrapper (whatever) to have an ID as it will make targeting the slider and it’s component elements much easier…but a parent class would work just as well,,even it’s only used once.

[Anonymous]

Not a problem with placement other than I don’t want to cause a burden for Mod’s here. I generally search for similar posts, and certainly questions similar to mine in hopes of finding an answer instead of making a redundant post, and thought CSS was the place for this.

Does the JQ need to be on the server for this to work? I copied and pasted the code for the example you showed and it’s not working. Everything is within the html page head though.

Best Regards.

[Paulie_D]

The Javascript (Jquery) file would need to be on the server so the device could download it but generally these are quite small.

I suppose you could embed it in the page but I wouldn’t when a link works so much easier.

[Anonymous]

Paulie,

I believe this example is what I’m looking for for my smaller non-descriptive slideshows. I copied the code from here, but it isn’t working here. Why?

Best Regards.

[Paulie_D]

I believe this example is what I’m looking for for my smaller non-descriptive slideshows.

Are you linking to (or hosting) JQuery, if so, I can’t see it.

You would need to link to that THEN add the script function AFTER linking to JQ

Also, I see the function seems to be in your Page twice..you would need to fix that.

[Anonymous]

Are you linking to (or hosting) JQuery, if so, I can’t see it.

Nope, missed that!

Also, I see the function seems to be in your Page twice..you would need to fix that.

Yep, missed that too!

I think I have the basic function down. I need your input on how best to add three other slideshows with the same function to the right of the current. I also want to put a brief descriptive text like “poster” “advertisements”, etc., beneath all four.

Thanks Paulie!

[Paulie_D]

OK…

You see how you have created a div with the ID of #slideshow ?

You referenced that ID in your JQ function

        $(function() {

            $("#slideshow > div:gt(0)").hide();

            setInterval(function() { 
              $('#slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
            },  3000);

        });

You could create additional slideshows (exactly as you have #slideshow) each with separate IDs.

You would then need to create (basically) separate functions for each ID…you would just swap out the names.

That’s it in a nutshell (caveat I’m no JS/JQ expert) but it should work.

[Anonymous]

Greetings Paulie,

Yes, I was aware that I could simply rename all the ID’s for this to work, but in the end there would be a lot of CSS code and html. There are several pages around the net that uses a cycle plugin at http://jquery.malsup.com/cycle/ I’ve yet to find a consensus on this yet, or a working demo.

Best Regards.

[Paulie_D]

I’m not sure what it is you’re asking.

If you want separate slideshows they would need independent HTML.

Certainly if they are all styled the same then the CSS can be reduced and, I suspect (see previous caveat) that the JQ functions could be combined or at least reduced.

The link you provided has many examples and code.

[Anonymous]

Greetings Paulie,

The code on the page referenced is partial code that I can see. I viewed the page source and tried to pull code from there to get any of the examples to work but no luck. I’ve been trying to adapt the code on this page to work, but nothing there either. Hopefully someone will jump in and direct me into what to do.

Best Regards.

[Anonymous]

Come on Folks, two days and nobody has an answer for this!?

[Anonymous]

I’ve managed to piece this together, but if I put the JS in the head where it’s supposed to be, everything breaks down. Additionally, adding extra slideshows stops everything as well.

Anyone have ideas?

[Author]

Posts