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 images have spaces in their file names.

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 the filename of the images have spaces in them.

For example, the file may be named "slider image 1.jpg" as its file name. The spaces in the file name will cause issues. It is best to use underscores or hyphens in place of spaces when naming your image files. (i.e. slider-image_1.jpg

  • Problem:
    The images change height during transition.
  • Likely Cause:
    Different sized images

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

The Homepage Carousel will also preserve your images' aspect ratios. This means they will try to keep their original shape as much as possible.

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