И снова здравствуйте! 🙂
Все кто используют движок OpenCart 2 скорее всего сталкивались с проблемой когда при добавлении левой или правой колонки сайта слайдер сжимается .
Это обусловлено структурой самого OpenCart, которая графически выглядит примерно так:
| 1200px шапка |
| 1200px тело | <— здесь слайдер
| 1200px подвал |
При добавлении левой (или правой) колонки с информацией слайдеру приходится «подвинуться» на примере сайта это выглядит так:
Мы же хотим добиться такого отображения:
| 1200px шапка |
← 1200 слайдер →
| 1200px тело |
| 1200px подвал |
Конечно можно поковырять код и вывести стандартный слайдер за пределы структуры, но мне не хотелось возиться со стилями стандартного слайдера и что-то менять в структуре шаблона сайта. Гораздо проще (как мне кажется) использовать решение jQuery слайдер–галерея «Фоторама». У этого слайдера богатый набор опций.
Давайте скачаем слайдер и установим на наш сайт:
1. Помещаем скаченный файл fotorama.js в директорию /public_html/catalog/view/javascript/jquery (ну или где у вас хранятся скрипты) по FTP , а файл fotorama.css в директорию со стилями (у меня это: public_html/catalog/view/theme/default/stylesheet/)
2. Подготавливаем изображения для слайдера. Я сделал 4 фотографии с размером 1140 х 380 px и находятся они в /public_html/image/baner/
3. Далее нужно подключить скаченные скрипты и стили Фоторамы (в пункте 1) к нужному шаблону OpenCart. Нужный файл называется home.tpl и находится /public_html/catalog/view/theme/default/template/common/: добавляем в самое начало файла:
<?php echo $header; ?> <!--подключаем загрузку библиотек для слайдера--> <link href="catalog/view/theme/default/stylesheet/fotorama.css" rel="stylesheet" /> <script src="catalog/view/javascript/jquery/fotorama.js" type="text/javascript"></script> <!-- 2. Add images to <div class="fotorama"></div>. --> <div class="container"> <div class="fotorama" data-autoplay="true" "> <img src="/image/baner/main.jpg"> <img src=" /image/baner/girl2.jpg"> <img src="/image/baner/girl33.jpg"> <img src="/image/baner/girl44.jpg"> </div> </div> ....................
4. Отключаем старый (стандартный) слайдер OpenCart. Отключать в админке сайта: Модули>Модули> Слайдшоу > Home Page (у вас может называться не «Home Page»)
Вот и все, сайт теперь выглядит так:
На мой взгляд намного симпатичнее.
