Owi carousel 2 & Опенкарт


Выполняя очередной проект, получил от заказчика просьбу сделать "карусель по кругу", то есть по другому - "зациклить" карусель, казалось бы тривиальная просьба, но оказалось, что даже версия 2.3, к сожалению до сих пор использует старую версию, тем самым данная приблуда для нее не доступна. К сожалению в интернете информации о том, как быстро обновиться, увы практически нет, потому выложу свой вариант, который и стал для меня итоговым и работоспособным. 
Итак 


Шаг 1. Скачиваем свежий дистрибутив Owi carousel 2 (v. 2.3.4)


Шаг 2. Разархивируем, заливаем папку по пути catalog/view/javascript/jquery , предварительно удалив старую папку owl-carousel


Шаг 3. Теперь нам требуется "привязать" карусель к движку.

Тут 2 варианта:

Вариант 1. 
В шапку сайта добавить следующий код



<link href="catalog/view/javascript/jquery/owl-carousel/css/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
<link href="catalog/view/javascript/jquery/owl-carousel/css/owl.theme.default.css" type="text/css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/jquery/owl-carousel/js/owl.carousel.js" type="text/javascript"></script>

 

p.s. То же Вы можете вставить в tpl, в которой будет размещен код карусели

Вариант 2.
В контроллер модуля/страницы, где будет использоваться карусель вставить
 

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/css/owl.carousel.css');
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/css/owl.theme.default.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/js/owl.carousel.js');

Итак, с "привязкой" разобрались. 

Теперь требуется инициализировать карусель 

внизу tpl 

<script type="text/javascript"><!--
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
}); 
--></script>

Но на 99% уверен, что это Вас не совсем устроит))), так как это стандарт, а в нашем случае нужны "выкрутасы" 

Напишу реальный работоспособный вариант, на примере кода банера (banner.tpl)

Имеем по дефолту:

 

<div id="banner<?php echo $module; ?>" class="owl-carousel">
  <?php foreach ($banners as $banner) { ?>
  <div class="item">
    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>
  </div>
  <?php } ?>
</div>
<script type="text/javascript"><!--
$('#banner<?php echo $module; ?>').owlCarousel({
    items: 6,
    autoPlay: 3000,
    singleItem: true,
    navigation: false,
    pagination: false,
    transitionStyle: 'fade'
});
--></script>

Меняем на такую конструкцию
 

 

<div id="banner<?php echo $module; ?>" class="owl-carousel owl-theme">
  <?php foreach ($banners as $banner) { ?>

 <div class="item">

<?php if ($banner['link']) { ?>

    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>

  </div>
  <?php } ?>
</div>
 

<script type="text/javascript"><!--
$('#banner<?php echo $module; ?>').owlCarousel({

loop: true,  /*зацикливаем вращение*/
nav: true,  /*включение/отключение стрелок навигации*/
dots: false, /*включение/отключение пагинации (точки)*/
autoplay: false,  /*включение/отключение автопрокрутки*/
navText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],  /*прописываем стрелки иконками Font Awesome*/
stopOnHover: true, /*включение/отключение остановки карусели при наведении*/
smartSpeed: 2000, /*скорость прокрутки слайдов*/
autoplayTimeout: 2000, /*таймаут автопрокрутки слайдов*/
responsiveClass: true,
responsive: {  /*количество отображаемых слайдов при разных разрешениях экрана*/
    1200: {
      items: 6
    },
    992: {
      items: 4
    },
    551: {
      items: 2
    },
    320: {
      items: 1
    }
  }
});

--></script>

В контроллере banner.php ищем:

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');
 

и меняем на



$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/css/owl.carousel.css');
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/css/owl.theme.default.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/js/owl.carousel.js');

На этом было бы и все)))  Но... в стандартной карусели стрелочки навигации и пагинация расположены внизу карусели, дабы поправить это недоразумение, написал небольшой файл стилей opencart.css (в архиве), 

Который Вы можете править на свое усмотрение, его Вы можете использовать как примерный шаблон переноса стрелок снизу в положение "по бокам" слайдера.

Подключить его можно так же стандартно
 

<link href="catalog/view/javascript/jquery/owl-carousel/opencart.css" rel="stylesheet" media="screen" />

естественно поменяв в нем идентификатор #opencart на идентификатор вашей карусели. 

 


0 комментариев / Написать комментарий

Написать комментарий

Внимание: HTML не поддерживается! Используйте обычный текст!
    Бесполезно           Полезно
Captcha

Подпишитесь

Рассылаем только значимую информацию