Расмотрим пример с категорией "Товары на главной". (У каждой категории свои переменные...)

В файле "html".
После кода:
<div class="btn-toolbar"> <!-- Если товара нет в наличие и в настройках отключена возможность класть --> {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE==0 %} <div class="tovar-available fnt11 fntupcase aunder"> <a href="#" rel="false" class="catalog-available-false" > <div class="stikno">Товара нет в наличии</div> </a> </div> {%ELSE%} <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <div class="btnToCart"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" /> <a class="btn btn-success toCart" onclick="addItem('.index_page_goods #goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}'); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить «{index_page_goods.NAME}» в корзину"> <span class="basket_add"></span> </a> </div> <div class="numeric input-prepend input-append btn-group"> <a class="js-minus btn minus"> <i class="icon-minus"> - </i> </a> <input type="number" name="form[goods_mod_quantity]" class="quantity" min="1" max="999" step="1" value="1" title="Количество" /> <a class="js-plus btn plus"> <i class="icon-plus"> + </i> </a> </div> </form> {% ENDIF %} </div> </div> </div> </div> {% ENDFOR index_page_goods %} <!-- END Вывод товаров таблицей--> </div> </div>Добавить код:
<div class="customNavigation my"> <a class="btn prev" title="Назад"></a> <a class="btn next" title="Вперед"></a> </div> <script> $(document).ready(function() { var owl = $(".index_page_goods .blockTableTovarIndexPage"); owl.owlCarousel({ items : 4, //количество плиток autoPlay: 4000 // скорость прокрутки }); // Custom Navigation Events $(".next").click(function(){ owl.trigger('owl.next'); }); $(".prev").click(function(){ owl.trigger('owl.prev'); }); }); </script>

Добавить в конец файла "main.css" код:
.blockIndexPage .owl-wrapper-outer { max-width: none; } .customNavigation.my { position: relative; margin-bottom: -40px; height: 40px; bottom: 0; width: 100%; overflow: visible; opacity: 0.5; } .index_page_goods .menu-item { width: 90%; } .my .next, .my .prev { position:relative; bottom:235px; background: url('{ASSETS_IMAGES_PATH}sprites.png') no-repeat -305px -0.5%; height: 30px; width: 5px; background-color: #4E6D8D; } .my .prev { float: left; background-position-x: -277px; left: 1px; } .my .next { float: right; background-position-x: -315px; } .customNavigation.my:hover { opacity: 0.5; } .my .next:hover, .my .prev:hover { opacity: 1; background-color: #0E4277; } .index_page_goods .menu-item-icon { right: 8%; }