Knowledgebase: Settings
Why don't the Homepage Carousel images display properly?

The following will describe several common issues you may experience with the way your carousel images are displayed on the Home Page Carousel feature.

  • Problem:
    The Homepage Carousel images aren't displaying at all.
  • Likely Cause:
    Your Homepage Carousel settings are not configured with proper width and height dimensions.

You have uploaded images to your Homepage Carousel, but they are not displaying on the home page. You might see the transition indicator icons on the page switching from one image to the other, but no actual display of the images. The most likely cause of this is not telling the Homepage Carousel what dimensions to use for the images.

To check for this, log into your 3dcart Online Store Manager and use the left hand navigation menu to go to Modules.

  1. Use the search bar at the top of the Modules page to search for "Homepage Carousel"
  2. Make sure the Homepage Carousel is enabled and click on the "Change Settings" link
  3. On the next page, look to the top right and click on the "Advanced Settings" button

This will display your advanced settings for the Hompage Carousel.

  1. Look to the Width and Height fields and make sure you have the correct dimensions for your images listed in those two fields.
  2. Click "Save" at the top right to commit your changes

Be sure to populate both fields. Also be sure that the width and height dimensions properly reflect the actual size/resolution of your images.


  • Problem:
    The images change height during transition.
  • Likely Cause:
    There are two possible reasons for this.
    • Different sized images.
    • Incorrect dimensions in the homepage carousel advanced settings

As the images transition from one image to the next, the effect may show that one or more images change size as they switch.

To correct this, first make sure that all of your carousel images are exactly the same size in both height and width. The Homepage Carousel requires that all of the images be physically sized exactly the same as one another in order to provide a seamless transition between each.

Next, use the steps described in the above section to check for the dimensions listed in the Homepage Carousel Advanced Settings section. Make sure that the dimensions specified are accurate for the images. For example, if the images are 640px by 480px, you should have 640 and 480 listed in the advanced settings.


  • Problem:
    The images "bleed" or "pop" into each other when they transition instead of a smooth fade.
  • Likely Cause:
    You're likely using transparencies in the images.

As the images transition from one to the next, you might experience an issue where the previous image doesn't fade properly into the next. Instead it might appear to bleed into the next image, or otherwise show up suddenly when the transition occurs. In either case, the transition isn't a smooth effect but something more abrupt.

More than likely the cause of this is the use of transparencies in one or more of the images (.gif or .png). Due to the way the fading effect of the carousel is set to display, the transparent elements of images will cause this effect.

To correct this, it's important to use non-transparent images. We recommend using .jpg images for the Homepage Carousel since transparent elements are not possible on the jpg image file format.


  • Problem:
    Regardless of your Home Page Carousel settings and/or the physical size of your images, your carousel images are appearing too large on the home page.
  • Likely Cause:
    It could be the theme you are using.

Some of our themes are designed to display the Homepage Carousel images in a fixed width - regardless of the size of the images or the settings in the module. Typically this is found on some of our HTML5 themes since having a fixed width assists with the responsiveness of the image display.

In some cases, you may have images which are physically large but are being shown on the homepage carousel in a smaller size than they are naturally. In other cases, you may be using a theme in which the homepage carousel is set to display across the full width of the screen. This has the effect of taking a small image and expanding it across the entire page and - if the image is too small - cause it to look pixelated. (i.e. a small image being shown bigger than it is intended to be)

To correct this, we recommend using banner images that are properly sized for the theme you are using. If your selected theme is set to show the Homepage Carousel images across the entire width of the screen, then you should use images that are fairly wide (800px or more) to prevent pixelation.


Help Desk Software by Kayako fusion