O'Reilly logo

OpenCart 1.4 Template Design Cookbook by Tahsin Hasan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying products vertically

We have seen the horizontal carousel so far. In this recipe, we will see how we can use the vertical carousel. We make the carousel horizontal for the home module of the latest products. Because on the left and right column, we have less space, we can use the vertical carousels there. It will utilize our space.

Getting started

Open the latest.tpl file in our favourite editor under catalog\view\theme\shop\template\module.

How to do it

To add the vertical carousel, we will follow these steps:

  1. First, we will add the required stylesheet and JavaScript files. As this is a new recipe, we are adding jCarousel again:
    <script type="text/javascript" src="catalog/view/javascript/jQuery/jcarousel/lib/jquery.jcarousel.js"></script> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required