OCarousel Documentation


The OCarousel plugin used for making carousels for nop commerce, you can create carousels of Bestsellers, Products, Recently Viewed Products, Also Purchased Products and so much more, and display them on any of your website pages.


    In the section, you can configure your plugin.

     → Enable carouse: Click to enable Carousels of your store.

     → Require carousel picture: You can determine whether the main picture is required for a carousel. It is based on theme design.


    In the section, you can show your list of active and inactive slider

    → In the top you can search slider by three fields Active, Data sources, Widget zones, and Store.

Create/Edit carousel:

To create a new carousel, go to carousel list page (Dashboard » Nop Station » Plugins » OCarousels  » List) and then click Add new button. To edit an existing carousel, click on Edit button from carousel list table. 


      1. Name: This is the name of the carousel and is a required field. It is needed so that you can separate your carousel from each other as you can have as many carousels as you want.

      2. Title: Specifies a title that will display before the Carousel on the public store.

      3. Display Title: If you want to display the title on the home page then select this field.

      4. Widget zone: From the Widget Zones you could choose the locations in which you want your slider to appear in your public store. If you want to add the slider to widget zones click the drop-down select your desired widget zone.

      5. Data source type: Set a predefined type of data that will populate the Carousel plugin.

      6. Number of items to show: This is number of showing item field where your can put desired number of items that you want to show.

      7. Display order: This is a display order is the order list of the Carousel.

      8. Active: Determines whether Carousels will be active.



      1. NAV: By checking this property, it will display next/previous button on slider. If you want to hide these buttons, uncheck it.

      2. Autoplay: By checking this property, it enable auto play.



      3. Lazy load: Check to image lazy load for carousel items.

      4. Lazy load eager: Specify how many items you want to preload images to the right and left when the loop is selected.

      5. Start position: Where you want to start your product to start.

      6. Margin:  Give the margin value in pixel. It will be reflected on Carousel design.

      7. Loop: Check this property, if you want to continue autoplay.

      8. Center: This is center position field. It works well with even and odd numbers.

      9. Custom CSS class: You can write your own CSS.