Description
Twitter's Bootstrap comes with image carousel functionality built in. This snippet allows you to generate carousels very quickly and easily so that you do not have to look up or memorize Bootstrap's syntax.
This snippet will only work on Boostrap enabled sites! Want a Boostrap site? See the Standard Template for more info.
If you are not using a Bootstrap site, you can use an alternate method. Go to this link, fill in the fields you need to use (following the same rules as listed below), and save the page. When the page loads, you will see a working carousel. To use it, scroll to the bottom of the carousel where you will find an embed code. Copy and paste that embed code into your site.
Syntax
| Attribute | Default Value | Description |
|---|---|---|
| id | Required! | A unique id that identifies the carousel. This name should not belong to any other carousel on the page. |
| interval | 5000 | The time between the automatic image slides in milliseconds. If you set this to false, then images will not transition automatically, waiting for user input instead. |
| pause | hover | The mouse action that defines when the carousel is paused. |
| wrap | true | The carousel will continue to run even when it hits the end; it will stop if set to false. |
| indicators | showing | If you set this to hidden, the image indicators that allow you to hop immediately to certain images will become invisible |
| imageMain | Required! | The primary image for the carousel. This will show first upon page load. |
| imageMainAlt | Not Available | Text message that appears if the main image is unavailable. |
| imageMainCaption | nothing | Message that appears under the main image |
| image01 | nothing | Another image on the carousel. |
| image01Alt | Not Available | Text message that appears if the image is unavailable. |
| image01Caption | nothing | Message that appears under the image |
| image02 | … | Same as above |
| image02Alt | … | … |
| image02Caption | … | … |
| … | … | … |
| image99 | … | … |
| image99Alt | … | … |
| image99Caption | … | Supports up to 100 images |
Important Note! In order for the carousel to function properly, you must use consecutive image numbers! In other words, avoid defining images for 03, 08, and 21 without anything else in between. Use the proper numerical order (01, 02, 03, etc). There isn't a problem if you have indicators set to hidden.
Code
[[include :snippets:carousel
|id=my-carousel
|interval=6000
|imageMain=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image01=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image01Caption=+++ Title
This is a test
|image02=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image03=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image04=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
]]
In action
You can see a live example at this link.
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by Timothy Foster
Fancy HR Dividers - 07 Apr 2021 06:23
Modal Image - 01 May 2015 17:20
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Table Alterations - 16 Feb 2012 01:45
Rate this solution
If you think this solution is useful — rate it up!
So I don't know much about wikidot coding. I just did the naive thing and copied the example code above and pasted to test it. No Carousel. It looked like a list of numbers and then a list of pics.
I am guessing the issue is that I don't have "bootstrap". Is there an easy way to get that on a standard wikidot site?
Indeed, you need to have Bootstrap enabled. For a new site, the process is somewhat simple, but for sites that already exist or have existed since before 2013, the process is more difficult, and no one yet has formalized a way to do this. It is not impossible, though, as some people have successfully made the transition.
Generally, it is recommended to start using Bootstrap as it allows your websites to work on both desktops and mobile phones. Now that Google indexes sites based on mobile compatibility, this becomes all the more important.
Right now, this random post is the closest we have to instructions for getting Bootstrap sites. If you have any more questions about this process, be sure to ask on the community site.
In the meantime, I just now thought of a possible way to get the carousel to work on non-bootstrap sites. It wouldn't help with the Google indexing, but if that is not important, it might work. I'll come back if it succeeds.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Yes, for now I would just like a carousel that allows one to click on the images. Thank you very much for your time.
It is a little sloppy, but it seems to work. Go to this link, fill in the fields you need to use (following the same rules as listed in the Syntax section), and save the page. When the page loads, you will see a working carousel. To use it, scroll to the bottom of the carousel where you will find an embed code. Copy and paste that embed code into your site.
Here is a working example on a sandbox site that does not have Bootstrap enabled.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Thank you!
I say, this preset code is not very intuative. you have all the links from your example still in there.
,is also not a very useful. I looked all over that page and do not see much information, helping me find out if I have bootstrap, how I can get bootstrap and what exactly bootstrap does. Found it eventually. Neat thing.
In addition I would mention that you can turn the interval off with "false". Not every snippet does that, and it is good to know. Editing the width would be neat too. Here is why: http://rokonuxa-blog.wikidot.com/main:gallery
I can use this, it is however not presented well.
The solution is useful. I guess…
edit: i was worng in many things here. see below.
A short search with "bootstrap and wikidot" brings you
http://bootstrap-playground.wikidot.com/
http://community.wikidot.com/forum/t-706642
http://bootstrap-playground.wikidot.com/custom-css
Edit
I also do not understand where the difficulties are on :
http://standard-template.wikidot.com/help:_home
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Your critic is understandable, but do you know that snippets are gifts from the wikidot user-community for others?
( and not in most cases from the developers)
You are invited to make it better in another new one!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I dont actually think that this is bad. I just require more customization for my purposes.
If I had the source code, I could propably add that. Can that be arranged?
also, since I was in class ( and still kinda am) I could not perform an in depth search for the whole Bootsstrap matter. That one is on me.
Left top is the link to edit / source / Print!
You can ALWAYS copy the source to your site and include than your own version of your site ( and not smippets…)
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
so, i put it on my site on a page, use :MYpage:MYcarousel instead of :snippets:carousel and then go on programming? Cool beans
wait thats not how that works. i meant the source of the snippen, not this page.
You have to ciopy the source from http://snippets.wikidot.com/carousel
and the source from http://snippets.wikidot.com/carousel-backend
to your mysite/carousel and carousel-backend.
And of cpuorse exchange the include statemenrts to yoour mysite/carousel-backend
:)
This works really!
But to not forget to mention:
all the includes later from your site "mysite" musr be allowed on your site manager ( yoiu can block this behaviour )
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
This is great. This way I can some day propably add a more customizable version. "Some day" because this looks a tad more complicated than i thought it would. I will be back when school is over. To learn and understand I hope.
Edit: i named it myTabelle. damn excel classes. I will definetely stop for now.
Good luck!
If you have questions - ask better in the community: http://community.wikidot.com/ !
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
For a simpler example of the source code, you can also see a carousel on the Bootstrap Playground, courtesy of Ed Johnson does not match any existing user name. The source code this snippet uses is only complicated to allow for the generality of x number of images.
Also, you can actually supply this snippet with "interval=false". I neglected to put that in the instructions, so I'll add it.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Yeah, when having many variables, showing them is very helpful. Not everyone can figure these out on their own.
False/True are very basic variables, but I dont know what variables are possible in pause and if there is a way to resize images (I have a pic that is too small and one that is too big).
I tried image01width=200 and similar, but so far it looks like that isnt in the snippet. Before I start rewriting the code on my own (already got a copy on my site), can you tell me if you know a fix for that?
You can use CSS to target the images and set their width. For instance, the below CSS will force all images to take the width of the carousel:
You can target specific images using :nth-child. The below will target the second image (which is called image01 by the snippet):
This page has a demo with Aurorae pictures of different sizes, but using the CSS module, they can all be made to have 100% with and static height.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Heureka, it works!
…
Thanks man, Im not sure if I couldve done that without the help. It kinda started to go downhill, when i named the code-page "myTabelle", which wouldve confused the hell out of me and stuff. Now the carousel even has the right width for other parts of the site. Grandios.