The following will describe several common issues you may experience with how 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: 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 that 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 - causing it to look pixelated. (i.e., a small image is 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.