Forums/Knowledge Base (English)/Widget reference

Carousel widget

Gordon
posted this on June 24, 2011 17:32

The Carousel widget lets you create a sequence of images or other elements. The Carousel can advance automatically after a set period or when the user clicks the next/previous button

Carousel widgets FAQs

Q: Can I have more than one carousel on a page?
A: Yes, you can have multiple carousels. The only limitations are to do with observing good practice. You should always consider the usability and loading time of a page and if you include lots of carousels with lots of images the resulting page will be slow to load and may be frustrating to use. This is not a limitation of us - that same issue would exist on any website.

Q: Is there any limit to the number of pages in a carousel?
A: No, there is no fixed upper limit although we only test the widget to a maximum of 16 pages and we recommend you do not exceed this number. Carousels much over 20 pages may be slow to load.

Q: Why does the widget keep changing shape?
A: If you use lots of different sizes of images the widget will change to accommodate them. To avoid this, make all your images the same size before importing in to your editor

Q: I've added some large images to my carousel and now it's running slowly. Why is this?
A: No matter how you create a website, large images files will take longer to load than small ones. Scale your images to the right size and make appropriate use of JPEG compression to improve performance. Avoid PNG files.

Q: Can I customise the buttons on the widget?
A: At the moment you can only customise the carousel buttons using the built in CSS editor. This requires some familiarity with CSS. See Customising the carousel widget

Q: The carousel widget doesn't quite do what I want. Is there an alternative?
A: Yes, embed a widget from a third party source like www.widgetbox.com (hint: search on Widgetbox for 'slideshow').
One example is http://www.widgetbox.com/widget/slideshow-pro
Google also has similar widgets: see http://bit.ly/gBS51b for an example
Please note we can not provide support for third party widgets.

 

We generally do not recommend placing too much content within the carousel widget as this may cause the widget to stop working correctly.

Drag and drop the widget onto the page

?name=media_1394466705702.png

Click the edit button to change the settings

?name=media_1394466724732.png

Carousel settings

?name=media_1394466752987.png

1: Add pages to the Carousel by clicking the Add page button (1). Remove pages by click the remove button.
2: Set the time interval using the interval slider (2) . If the Slider is set to 0 seconds the carousel will only advance when the user clicks the next/previous button
3: Tick the Page Indicators (4) to show the circular buttons at the bottom of the widget
4: Tick the Next / Prev checkbox (3) to show the Next and Previous Buttons

The Carousel widget supports Text, Images and Columns only. It does not support video. The Carousel widget can not be nested.

Add images to the Carousel

?name=media_1394466791545.png

First, drag an image into the Carousel.

To add another image, click the Next button on the Carousel. This will display the second page in your carousel widget. Drag your second image now into the second page of your carousel. Keep on clicking on the next button to add more images to the rest of your pages.

NOTE: Make sure all your images have already the size you want them to be and avoid resizing images inside of your carousel. If you resized an image inside the editor and you see your site with an old browser, the image could appear with its original size, and you don't want that.

Editing the carousel widget after adding images

?name=media_1394466941967.png

If you wish to edit the carousel widget after you added your images, don't double click over the images as this will cause the images settings panel to display, and what you want is your carousel settings panel.

Click outside of the widget and then click just below your image, in the blank space beside the circular buttons (1) and then click on the settings icon (2).

 

Comments

User photo
Martin Baker

Impossible to edit this without losing your sanity. The circular buttons cannot be chosen without the css menu coming up instead, trying to add graphics and text into the carousel is a nightmare.  Autosizing leaves acres of white space ever where.

December 17, 2011 12:26
User photo
Gordon
BaseKit support

Hi Martin,

I'm sorry you had trouble with the Carousel widget. Please could you send us a video of the problem by clicking the 'record a screencast' button on the right of the page at http://basekit.zendesk.com/home

 

This will help us resolve the issue quickly.

 

Thanks

 

Gordon

December 17, 2011 12:38
User photo
Ged Mead

I absolutely have to agree with Martin; this widget is a nightmare to use!  One trick I have discovered is that you can force it to move to the next blank space if you first click on the previous image somewhere.  If you don't do this, then when you try and click on an arrow you only get the Move icon.

I've also had the page refresh with completely wrong displays.  For instance, I'll drag a new image in to a blank area, then suddenly that image will be shown as a separate image widget below the carousel.  Tests show that these problems only affect the design area; when I publish and run the site immediately after this kind of hiccup, the carousel does work as it should.

In the Help page, I think you should also tell users that they need to click in an area of the carousel that DOESN'T contain an image if they want to edit the carousel widget settings.  Otherwise they'll be taken to the settings for the image.  It might seem obvious to the site designers, but I've been using BaseKit for more than a year and I only worked out these fixes in the past couple of months!  Previously, I've lashed about and cussed the darn thing up and down the room until by magic (it seemed) the thing behaved as it should.

I know this is a rant, but  hope you do get some positives out of it.

January 07, 2012 11:12
User photo
Gordon
BaseKit support

Hi Ged,

Thanks for you feedback. We are aware the current widget has many limitations and we have a new replacement currently in Beta. You can try this out if you join the BaseKit Professional Network.

I will amend the documentation as you suggest.

 

Gordon

January 08, 2012 09:20
User photo
Rashmi Gupta

Hi Ged

I am using Basekit Sitebuilder through my Hostgator account. When I am trying to add an image to my Carousel widget, it seems to go on forever for uploading a 700 KB image. Am not sure if I'm missing anything?

Rashmi

June 03, 2012 17:56
User photo
Gordon
BaseKit support

Hi Rashmi,

Support for Hostgator customers is available only via Hostgator at support.hostgator.com.

Hostgator customer support will not see messages you post here.

Gordon

June 04, 2012 15:52
User photo
Paul Williams

I'm having quite a difficult time finding help with this issue I'm having so I guess I'll ask here. I'm trying to use two carousel widget items on one page, but the problem is that they both use the same CSS as each other, which makes this very difficult to find a way to make them look and operate different from each other. I've tried a lot of different things but in the end the CSS applies to both carousel widgets on that page, is there anyway to fix this?

June 06, 2012 22:09
User photo
Gordon
BaseKit support

Hi Paul,

Click 'submit a request' to get help from our support team. 

Gordon

June 07, 2012 11:10
User photo
Gerry Whitlow

I'm glad to see I'm not the only one who nearly lost their sanity but I eventually got it to work, but now it has a problem, the 5th photo sticks and shows it twice and then the next run, the sixth photo shows twice, and then it runs fine and then it sticks again on the 5th photo, I am scared to delete it and try again in case I lose my sanity this time, any ideas what's wrong?

July 06, 2012 07:26
User photo
Gordon
BaseKit support

Hi Gerry,

Please Click 'submit a request' to get help from our support team. 

Thanks


Gordon

July 06, 2012 10:09
Topic is closed for comments