Carousel Image Slider 2.0

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 2.0
  • Supported Devices: Desktop, Mobile, Tablet

Release Log

  • 2.0: Initial release


Positioning the Widget

  • Drag the widget from the library and drop into your project in Design mode.
  • Position the widget in Design mode where you would like it to appear on the page in browser. For a full width slider, select "Stretch to browser width" in the Resize menu.

Prepping Images

  • It is best practice to prep the images in a photo editor so that they are the same height and aspect ratio. While differing aspect ratios and sizes will work, images of differing sizes will be cropped when displayed uniformly in the slider.
  • Decide which images you would like to use in the slider. We suggest a minimum image width of 1000px.
  • Carousel Height: This setting will set the fixed height of the slider.
  • To adjust the width of the slider, simply resize the widget container. Keep in mind that slider height is always set in the widget options, while width is set with the widget container.
  • Slides Per View: This sets the number of images seen at a time in the slider. See the section below titled Managing Image Aspect Ratios to learn more about creating the classic "carousel look", as well as working with odd and even numbers of images.
  • Transition Direction: The slider can be set to transition right to left (horizontal) and bottom to top (vertical).

Images Section
This section allows you to load your images, set caption text, and enable and define links.

Styling Section
This section includes extensive styling options for the slider. Some settings will not be discussed here, as they do as they are labeled.

  • Enable Centered Slide: This setting is useful is you have an even number of slides, yet would like to have a slide centered. Sliders with an odd number of slides visible will always have a centered slide. If you would like to create the classic "carousel slider" look, set Slides Per View to 2, and enable the center slide.

Even number of slides without Enable Centered Slide enabled:

Even number of slides with Enable Centered Slide enabled:

  • Hide Captions on Inactive Slides: This setting is only visible when the Enable Centered Slide setting is turned on. This turns off captions for the slides to the right and left of the center slide. When this setting is not enabled, captions will appear on slides that are only partially visible, causing captions to be cut off and potentially distracting.
  • Enable Autoplay: This setting allows the slideshow to play, without clicking on the previous/next arrows.
  • Enable Loop Mode: Allows slideshow to loop at the end.
  • Enable Grab Cursor: This enables the cursor to advance slides by clicking and dragging, similar to touch UI seen on a mobile or tablet device.
  • Hide Arrows: This hides the previous/next arrows.
  • Enable Pagination: This setting enables pagination dots visibility.
  • Enable Pagination Navigation: This allows users to navigate the slideshow by clicking on pagination dots.

Managing Image Aspect Ratios The shape of the images within your slider are impacted by a number of factors: slider width, slider height, viewing browser (viewport) width, and number of images. Follow this process in order to have the most control over image aspect ratio / shape:

  1. Determine the shape you would like your images to display as: square, landscape, portrait, etc.
  2. Determine the number of visible images in your slider. While you can have as many total images as you like, the number of images visible at one time is important. This is controlled with the Slides Per View parameter in the widget option panel. Less slides per view makes wider images, while more slides per view makes taller images.
  3. Set the slider width. Adjustments can be made using the blue grab handle in the lower right corner of the widget container, if needed. Keep in mind that full width sliders require the row they’re placed in to be set to “Full bleed row”.
  4. Set the slider height. The Slider Height setting can be found in the widget option panel (this is not done using the widget container grab handle). Once steps 1-3 above are complete, adjusting the slider height will give you full control of the shape / aspect ratio of the images. You will see the image shape change as this is adjusted.
  5. The final thing to consider is the viewer’s browser (viewport) size. Very wide viewport widths may cause images to stretch horizontally, but only if the slider is set to full width. Fixed width sliders will remain fixed at extreme widths. Very narrow viewport widths will cause images to become narrow and tall at extreme widths. Since you have no control over the viewport size of your site visitors, set the slider up to look best at the most common sizes. We like to preview our widgets on a width and height approximate to a typical laptop screen.

Commonly Asked Questions

No commonly asked questions

Known Issues/Conflicts

No known issues or conflicts

Additional Info Links