Diagonal Thumbnail Slider

https://www.muse-themes.com/products/diagonal-thumbnail-slider

Diagonal Thumbnail Slider is a unique slideshow widget that displays several images in every slide. Images are scattered using smooth and powerful transition animations every time the slideshow is advanced. In addition to slideshow images, each slide has a customizable 3-line animated text caption.

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

Release Log

  • 1.0: Initial release


 



Setup in Muse

  • Place the widget where you would like the slideshow to appear.
  • The size of the slideshow is set using the widget container.

    Since this slideshow displays multiple thumbnail images, it is generally best to use this slideshow for larger features such as home page heros

  • If you would like a large scale slideshow, select "Stretch to browser width" in the resize dropdown in the top menu.

WIDGET OPTIONS

  • Open the widget option panel.
  • Transition Style: Choose from 4 different transition styles. These styles make the images scatter in different ways when the slideshow is advanced.
  • Image Wrapper Width / Height: By default, the images in slides will be slightly cut off on the top and bottom. This is because the group of images are rotated by default. If you wish to keep images from being cut off, you may decrease the Image Wrapper width or height.
  • Mobile Image Wrapper Width: This setting applies to mobile viewports only, and can be adjusted separately. Decrease the value of this setting if you wish to keep images from being cut off on mobile devices.
  • Desktop / Mobile Slider Angle: These options set the angle of the slideshow. Note that there are separate settings for desktop and mobile.

SLIDE 1/2/3/4/5 SETTINGS

Each Slide has its own settings, allowing you to load images and enter text for individual slides. All Slide Setting sections are identical.

  • Enable Slide: This checkbox enables the slide. The slide must be enabled in order to load images or display the slide.
  • Image 1/2/3/4: These allow you to load images. You may mix image sizes and shapes with this slider. But be sure to optimize images (compress them to reduce size) because all images you add must be loaded in browser. Aim to keep images below 1000px wide and 200kb in file size.
  • Slide Top / Middel / Bottom Text: Enter your caption text for the top, middle and bottom position.

SLIDESHOW STYLING

  • Image Opacity: Sets the opacity of the image thumbnails. Note that you should consider this setting when using captions. With full image opacity (a setting of 1.0), caption text may be harder to read.
  • Background Color: This sets the color of the slider background.
  • Text Line Height: This sets the line height for each line of text (top, middle and bottom). This setting is used because some fonts with taller letter styling may be cut off. Increase line height if you see that your font is being cut off.
  • Text Color / Size / Family / Weight: The remainder of the text settings allow you to customize the text captions.
  • Navigation Color: This sets the color of the slideshow navigation arrows.

TIPS

  • As mentioned previously, this widget usually looks best when stretched to full browser width. Since each slide displays multiple images, the images will look rather small unless you have the widget sized large.
  • If you don't want the slideshow to display at an angle, set the Desktop Slider Angle or Mobile Slider Angle setting to zero.
  • How to handle cut-off images. The default settings of the widget will result in images being cut off on the top and bottom. This happens because the entire slideshow is tilted at an angle. But keep in mind that this is part of the charm of this particular slideshow. When used in a large format, it is reasonable for images to be partially cut off (as in our demo). If you wish to avoid any images being cut off, you may use the Image Wrapper settings at the top of the widget option panel.
  • Remember to optimize images! Consider the fact that this widget potentially loads a LOT of images. Even though the images may be displayed at thumbnail sizing, all images are loaded at their original file size. If you're using large images of 4000px width and 6mb in file size, this will cause your page to load slowly on slower internet connections. There is no reason whatsoever to use images beyond 1000px or so in size because they will never be displayed at those dimensions. Resize large images to have smaller dimensions then use an image optimization tool to reduce file size for all images in your slideshow.



Known Issues/Conflicts

No known issues or conflicts


Additional Info Links