Skip to main content

Product Slider Options

Example custom OWL​

When execute this code, responsive will be set with param in your admin config (if exists), if not it will be set default by OWL.

Enable infinity loop​

To enable infinity loop, add this code to CMS page

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" loop="1"}}

Responsive slider​

To enable the responsive slider, add this code to CMS page

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description"  responsive="1" loop="1"}}

To display the navigation bar, add this code to CMS page

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" nav="1" loop="1"}}

Note: The navigation will not be displayed unless the number of items are less than products_count.

Set an item in the center of the product slider​

To show an item in the center of the product slider, add this code to CMS page

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" loop="1" center="1"}}

Note: Keep in mind that dots are not working here.

Merge the width of items when change the screen size​

To merge the width of items when change the screen size, add this code to CMS page

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" loop="1" margin="10" merge="1"}}

  • Merge option requires data-merge="number_items_to_merge" on any child element (can be nested as well). There is a sibling option called mergeFit which fits merged elements to screen size.

  • That same with this code in template file

Display items in origin width​

To show items in origin width, add this code to CMS page:

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" loop="1" margin="10" autoWidth="1"}}

Add the left and right padding style (in pixels) onto stage-wrapper​

To add the left and right padding style (in pixels) onto stage-wrapper, add this code to CMS page:

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" loop="1"margin="10" stagePadding="50"}}

Change direction from right to left​

To change direction from right to left, add this code to CMS page:

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" loop="1"margin="10" rtl="1"}}

Autoplay​

To autoplay, add this code to CMS page:

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="4" loop="1"margin="10" autoplay="1" autoplayTimeout="5000" autoplayHoverPause="1"}}

Display item's height according to heighest item​

To display item's height according to heighest item, add this code to CMS page:

{{block class="Mageplaza\Productslider\Block\NewProducts" template="Mageplaza_Productslider::productslider.phtml" products_count="8" heading="New Products" description="Here is your new products description" items="1" loop="1"margin="10" autoHeight="1"}}

At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to heighest item.

  • items: The number of items you want to see on the screen.
    • Type: number
    • Default: 3
  • margin: margin-right(px) on item.
    - Type: Number 
    - Default: 0
    -loop: Infinity loop. Duplicate last and first items to get loop illusion.
    - Type: Boolean 
    - Default: false
  • center: Center item. Works well with even an odd number of items.
    • Type: Boolean
    • Default: false
  • mouseDrag: Mouse drag enabled.
    • Type: Boolean
    • Default: true
  • touchDrag:Touch drag enabled.
    • Type: Boolean
    • Default: true
  • pullDrag: Stage pull to edge.
    • Type: Boolean
    • Default: true
  • freeDrag: Item pull to edge.
    • Type: Boolean
    • Default: false
  • stagePadding: Padding left and right on stage (can see neighbours).
    • Type: Number
    • Default: 0
  • merge: Merge items. Looking for data-merge='{number}' inside item..
    - Type: Boolean 
    - Default: false
    -mergeFit: Fit merged items if screen is smaller than items value.
    - Type: Boolean 
    - Default: true
  • autoWidth: Set non grid content. Try using width style on divs.
    • Type: Boolean
    • Default: false
  • startPosition: Start position or URL Hash string like '#id'.
    - Type: Number/String 
    - Default: 0
    -URLhashListener: Listen to url hash changes. data-hash on items is required.
    - Type: Boolean 
    - Default: false
  • nav: Show next/prev buttons
    • Type: Boolean
    • Default: false
  • rewind: Go backwards when the boundary has reached.
    • Type: Boolean
    • Default: true
  • navText: HTML allowed.
    • Type: Array
    • Default: ['next','prev']
  • navElement: DOM element type for a single directional navigation link.
    • Type: String
    • Default: div
  • slideBy: Navigation slide by x. 'page' string can be set to slide by page.
    • Type: Number/String
    • Default: 1
  • dots: Show dots navigation.
    • Type: Boolean
    • Default: true
  • dotsEach: Show dots each x item.
    • Type: Number/Boolean
    • Default: false
  • dotData: Used by data-dot content.
    • Type: Boolean
    • Default: false
  • lazyLoad: Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img>
    • Type: Boolean
    • Default: false
  • lazyContent: lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature.
    • Type: Boolean
    • Default: false
  • autoplay: Autoplay.
    • Type: Boolean
    • Default: false
  • autoplayTimeout: Autoplay interval timeout.
    • Type: Number
    • Default: 5000
  • autoplayHoverPause: Pause on mouse hover.
    • Type: Boolean
    • Default: false
  • smartSpeed: Speed Calculate. More info to come..
    • Type: Number
    • Default: 250
  • fluidSpeed: Speed Calculate. More info to come..
    • Type: Boolean
    • Default: Number
  • autoplaySpeed: autoplay speed.
    • Type: Number/Boolean
    • Default: false
  • navSpeed: Navigation speed.
    • Type: Number/Boolean
    • Default: false
  • dotsSpeed: Pagination speed.
    • Type: Boolean
    • Default: Number/Boolean
  • dragEndSpeed: Drag end speed.
    • Type: Number/Boolean
    • Default: false
  • callbacks: Enable callback events.
    • Type: Boolean
    • Default: true
  • responsive: Object containing responsive options. Can be set to false to remove responsive capabilities.
    • Type: Object
    • Default: empty object
  • responsiveRefreshRate: Responsive refresh rate.
    • Type: Number
    • Default: 200
  • responsiveBaseElement: Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.
    • Type: DOM element
    • Default: window
  • video: Enable fetching YouTube/Vimeo/Vzaar videos.
    • Type: Boolean
    • Default: false
  • videoHeight: Set height for videos.
    • Type: Number/Boolean
    • Default: false
  • videoWidth: Set width for videos.
    • Type: Number/Boolean
    • Default: false
  • animateOut: Class for CSS3 animation out.
    • Type: String/Boolean
    • Default: false
  • animateInClass: Class for CSS3 animation in.
    • Type: String/Boolean
    • Default: false
  • fallbackEasing: Easing for CSS2 $.animate.
    • Type: String
    • Default: swing
  • info: Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.
    • Type: Function
    • Default: false
  • nestedItemSelector: Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.
    • Type: String/Class
    • Default: false
  • itemElement: DOM element type for owl-item.
    • Type: String
    • Default: div
  • stageElement: DOM element type for owl-stage.
    • Type: String
    • Default: div
  • navContainer: Set your own container for nav.
    • Type: String/Class/ID/Boolean
    • Default: false
  • dotsContainer: Set your own container for nav.
    • Type: String/Class/ID/Boolean
    • Default: false