Slide Show
-
Hi, I would like to create a custom slide show similar to what is shown on this website: http://www.leong-leong.com/work.php?id=34
I am hoping to have a an arrow to move forward/backward and a small text line indicating image xx. One other hiccup is that the images are all different sizes. Is this possible?
The page where this will appear is here: http://annascherman.com/made-in-birmingham/ (so, for example, the current image will be the first of many other images).
The blog I need help with is: (visible only to logged in users)
-
Hi there, you can create a slideshow in any theme by inserting an image gallery and then choosing the slideshow option for it. We have a step-by-step guide and FAQ here:
https://en.support.wordpress.com/gallery/
https://en.support.wordpress.com/slideshows/
Once you’ve inserted your slideshow you can make its default black background transparent instead with this custom CSS:
div.slideshow-window { background-color: inherit; border: none; }Just let me know if you get stuck at any step!
-
Hi Kathryn,
Thanks for getting back to me. The issue is that I really don’t want my slide show to look like that. If you see the link I provided as an example, I really want the control bottuns to be small and outside of the image container.
If you look at what I have set up now, it is similar to what I am looking to do, I just haven’t figured out how to use buttons to control the slides, rather than having them transition on their own.
It seems like I should be able to modify what I’ve got set up, no?
-
Button positioning could be changed with custom CSS, but the slideshow always auto-advances; there isn’t a way to change that behaviour to let users manually advance the images themselves.
If that’s not acceptable, you might like to look for a theme that includes a slideshow that does not auto-advance, such as Sketch:
https://sketchdemo.wordpress.com/
Here are some other options:
-
Hmm.
I’ve done a lot to get the front page just as I want it using custom HTML and CSS over the past few months, so I am hesitant to change themes…
I guess my real question, is it possible to create what I want with custom CSS/html from scratch on this page? Or is javascript always going to be necessary to advance a slideshow as my example does. If so, maybe wordpress.com is just not going to work out for my needs.
-
You’re right that to attach triggers (like a button) to your existing HTML/CSS slideshow would require custom JavaScript – or form tags – neither of which can be added on WordPress.com. More about the type of code allowed here.
My colleage Dan found an example of a pure CSS non-auto-advancing slideshow that you could try experimenting with. It’s not exactly the same as your example, but could be tweaked to look like your current test and doesn’t require JavaScript.
http://qnimate.com/creating-a-slider-using-html-and-css-only/
Demo: http://labs.qnimate.com/slider/
You could experiment with it to see if you get an effect you like.
-
p.s. since your images are different sizes, in the example I just gave you, you’d probably want to place your images on a canvas that’s the same size, with a transparent (or white) background.
-
Ah! Great!!! I am going to play with that…
I may come back with more questions later, but thank you for now! This is very helpful
-
Hello again @annascherman-hope you don’t mind I’m jumping in on your thread
@kathrynwp-
A few months ago, another WPcom member mentioned that they had added “false” to the slideshow autostart parameter (see the table here: https://en.support.wordpress.com/gallery/#gallery-shortcode) and it wasn’t working.
Here’s the thread: https://en.forums.wordpress.com/topic/gallery-slideshow-autostart?replies=2#post-2426973
Is there any update on that? This would at least partially solve @annascherman’s question.
-
-
A fix is in the works so you’ll have the option to use the
autostart='false'attribute in the shortcode so slideshows don’t autoplay. I’ll try to keep you posted here when that happens. -
Ah, great!
It seems like this other method may give me a bit more control so I am going to continue to play with that, but thanks everyone for all the great help!
-
-
Actually, do you think you could help me de-mystify some of this code…I’m having trouble getting the exmaple slider that you sent to work.
I know that I need to modify the <img src=”1.jpg” class=”slider-image” /> lines with my images…
Is there anything else I need to change?
-
-
Yep, you’ll definitely need to replace the example URLs with the full path to your images in the Media Library. You may also need to play with the positioning of the elements.
-
-
Hmmm, what do you mean by the positioning of the elements?
I realize there is an odd grey bar showing currently, but my biggest issue is that the buttons are not appearing to change slides (see what I mean here: http://annascherman.com/made-in-birmingham/)
-
For example, something like:
.button-holder { position: relative; top: -150px; }You’ll also need to experiment with the dimensions of everything to be sure they match your images.
Keep in mind that this slideshow isn’t responsive by default, so it doesn’t adapt to small screen sizes automatically – the image size is fixed.
You might like to try the built-in responsive slideshow now that the option to have the user advance the slides is working. It might be easier to customize with CSS than this experimental example. :)
-
Hmm.
Ok…I should be able to modify the bottun completely right? Like move them out of the frame and change them to small grey arrows?
- The topic ‘Slide Show’ is closed to new replies.
WordPress.com Forums 