Magic Slideshow for ZOO

Common Settings

  • Thumbnail Ordering - The thumbnail ordering
  • Include owl js - Enable/ Disable oowl.carousel.min.js
  • Include owl css - Enable/ Disable owl.carousel.css
  • Base class - Automaticly added class for base CSS styles. Best not to change it if you don't need to
  • Theme Class - Default Owl CSS styles for navigation and buttons. Change it to match your own theme
  • Use Theme CSS - Enable/ Disable owl.theme.css
  • Use Transitions CSS - Enable / Disable owl.transitions.css. Has a dependency on the parameter 'Transition animation'
  • Use Default Style Minifed - Use Default CSS style minifed (owl.transitions.css, owl.theme.css, owl.carousel.css)
  • Lazy Load - Delays loading of images. Images outside of viewport won't be loaded before user scrolls to them. Great for mobile devices to speed up page loadings. IMG need special markup
  • Lazy follow - When pagination used, it skips loading the images from pages that got skipped. It only loads the images that get displayed in viewport. If set to false, all images get loaded when pagination used. It is a sub setting of the lazy load function.
  • Slide speed - Slide speed in milliseconds
  • Pagination speed - Pagination speed in milliseconds
  • Auto Play - Enable/ Disable Autoplay
  • Auto Play Speed speed in miliseconds, if Auto Play Enabled
  • Stop autoplay on mouse hover
  • Lightbox - Use Lightbox

Carousel Mode Settings

  • Thumbnail Ordering - The thumbnail ordering
  • Thumbnail width (px)
  • Thumbnail height (px)
  • Thumbnail Count - Limit the number of thumbnails to show, set it to 0 to show all thumbnails
  • Items - This variable allows you to set the maximum amount of items displayed at a time with the widest browser width

This allows you to preset the number of slides visible with a particular browser width. That if window less or equal 1199 then show 4 slides per page

  • Desktop Browser width (px) and Items for Desktop
  • Desktop Small Browser width (px) and Items for Desktop Small
  • Tablet Browser width (px) and Items for Tablet
  • Mobile Browser width (px) and Items for Mobile
  • Display only one item
  • Transition animation - Add CSS3 transition style. Works only with one item on screen
  • Items Scale Up - Option to not stretch items when it is less than the supplied items
  • Navigation - Display 'next' and 'prev' arrows
  • Slide to first item (Rewind) - Slide to first item. Use Rewind Speed to change animation speed
  • Rewind speed - Rewind speed in milliseconds
  • Scroll per page not per item - Scroll per page not per item. This affect next/prev buttons and mouse/touch dragging.
  • Show pagination
  • Resposive - You can use Slideshow on desktop-only websites too! Just change that to 'false' to disable resposive capabilities
  • Responsive refresh rate - Check window width changes every 200ms for responsive actions
  • Auto height - Add height to wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting
  • Drag before animation finish - Ignore whether a transition is done or not (only dragging)
  • Mouse drag - Turn off/on mouse events
  • Touch drag - Turn off/on touch events

Gallery Mode Settings

if you Add Sync Slideshow (Gallery Mode)

  • Thumbnail width (px)
  • Thumbnail height (px)
  • Thumbnail Count - Limit the number of thumbnails to show, set it to 0 to show all thumbnails
  • Items - This variable allows you to set the maximum amount of items displayed at a time with the widest browser width
  • Transition animation - Add CSS3 transition style. Works only with one item on screen
  • Items Scale Up - Option to not stretch items when it is less than the supplied items
  • Navigation - Display 'next' and 'prev' arrows
  • Slide to first item (Rewind) - Slide to first item. Use Rewind Speed to change animation speed
  • Rewind speed - Rewind speed in milliseconds
  • Scroll per page not per item - Scroll per page not per item. This affect next/prev buttons and mouse/touch dragging.
  • Show pagination
  • Resposive - You can use Slideshow on desktop-only websites too! Just change that to 'false' to disable resposive capabilities
  • Responsive refresh rate - Check window width changes every 200ms for responsive actions
  • Auto height - Add height to wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting
  • Drag before animation finish - Ignore whether a transition is done or not (only dragging)
  • Mouse drag - Turn off/on mouse events
  • Touch drag - Turn off/on touch events