BaseKit Support

Carousel widget

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 (hint: search on Widgetbox for 'slideshow').
One example is
Google also has similar widgets: see 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


Click the edit button to change the settings


Carousel settings


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


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


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).

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request


  • Avatar
    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.

  • Avatar

    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


    This will help us resolve the issue quickly.





  • Avatar
    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.

  • Avatar

    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.



  • Avatar
    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?


  • Avatar

    Hi Rashmi,

    Support for Hostgator customers is available only via Hostgator at

    Hostgator customer support will not see messages you post here.


  • Avatar
    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?

  • Avatar

    Hi Paul,

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


  • Avatar
    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?

  • Avatar

    Hi Gerry,

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