BU Slideshow with Caption

Using this module you can add slideshow at any page and any section of page.

Features

  1. Simple to Use (Fully Controlled by Admin)
  2. Option to set width of slider as full width or fixed width
  3. Option to set slider position under header menu or bellow header menu
  4. Responsive Design
  5. Multi Transitions effects
  6. Multiple instances allowed in a single page.
  7. Multi language support.
  8. Keyboard support.
  9. Animated HTML captions with custom effects (fade, move top, move right…).
  10. Slides uses only valid HTML5 markup (SEO optimized).
  11. Animated preloader bar.
  12. Compatible with external fonts (like Google fonts).
  13. Support all Browsers.
  14. SEO optimized, captions can use any tag you want (“h1”, “h2”, “p”…).

Upload

  1. Extract the archive you downloaded from market and locate the Opencart_3.0.2.0 folder. Example
  2. Login to admin and go to Extension > Extension Installer then select and upload downloaded zip file. Now go to Extension > Modification and press refresh button on top right corner of the page. OR
  3. Find upload folder and Upload the all folders found inside (admin, catalog, image) to your OpenCart root installation and merge them with the existing ones.

Installation

  1. Go to Extensions select Modules from drop down and install the BU Slideshow with caption Example
  2. Proceed to Extensions > Modules > Edit and choose BU Slideshow with caption

Add to Layout

After installing module, please navigate to Design > Layouts

Click on the Edit button to choose the page you need to edit then click on the Add module button. Example

Configuration

  1. Module Name Add module name it will be visible in extensions list
  2. Is Publish Select Yes/No for enable/disable module.
  1. Add Slide Add New Slide for showing content in carousel.
  2. Click on minus sign to remove a slide
  3. Click on left side created tabs to view/edit slides detail.
  4. Select language if you are using multiple.
  5. Upload browser background image recommended size is 900px by 400px
  6. Set caption text alignment left, right or center
  7. Set caption effects both transition and easing
  8. Set caption heading position from left to right and from top to bottom.
  9. Write caption heading text.
  10. Select caption heading text font. You can select system fonts of Google fonts also add font size font color etc.
  11. Set caption text position from left to right and from top to bottom.
  12. Write caption text.
  13. Enter the caption URL (link of product you want to sell).
  14. Tick on check box if you want to open caption URL in a new tab.
  15. Set caption URL text (Buy Now) position from left to right and from top to bottom.
  16. Write caption URL text like "BUY NOW", "SHOP NOW".
  17. Select background color or caption text button like "BUY NOW".
  18. Media Caption Type There are two types of media caption image and video. You can add position and size setting as you have done above.
  19. Don't forgot to click on Save Button
image
  1. Set position of slideshow e.g. Bellow header menu or Under header menu. Example
  2. Set width of slideshow e.g. Full width or Fixed width. Example
  3. You can set container background color.
  4. Force slider background image width and height in px.
  5. Set container margin.
  6. Set container padding.
  7. You can add custom css e.g. border or shadow to the box.
image
  1. Background Color Set arrow's container background color Example
  2. Hover Background Color Set arrow's container hover background color Example
  3. Width x Height Set Width x Height of arrow's container Example
  4. Margin Set margin of arrow's container Example
  5. Left arrow border radius Set Left arrow border radius Example
  6. Right arrow border radius Set Right arrow border radius Example
  7. Arrows Color Set arrows color Example
  8. Arrows size Set arrows size in px Example
image
  1. Background Color Set button background color Example
  2. Hover Background Color Set button hover background color Example
  3. Padding Set button padding Example
  4. Button border radius Set button border radius Example
  5. You can add button custom css e.g. border or shadow to the box.
image
image