Как изменить вид слайдшоу, слайдер

Подскажите, пожалуйста. Как сделать чтобы слайд шоу и баннеры располагались рядом в одном контейнере (слайд шоу слева, баннеры справа), как например:
http://24shop.by/
http://tzelewski.co.uk/template/kinder15/index.php?route=common/home

 

можете изменить шаблон слайдшоу.

catalog\view\theme\default\template\module\slideshow.tpl

например на такой

Код:

<div class="row">

<div class="col-sm-9">
<div id="slideshow<?php echo $module; ?>" class="owl-carousel" style="opacity: 1;">
  <?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>
</div>

<div class="col-sm-3">
тут код банеров
</div>

</div>



<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
    items: 6,
    autoPlay: 3000,
    singleItem: true,
    navigation: true,
    navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
    pagination: true
});
--></script>

 

OwlCarousel хорош! Эффекты можно сделать легко. Достаточно в контроллере slideshow.php подключить transition.css.
Потом в slideshow.tpl ставим эффект. А чтобы менять эффекты через админку, можно сделать доп поле в модуле. И не надо никаких других модулей. OwlCarousel - хороший, также можно включить LazyLoad(рекомендуется).

 

Люди подскажите пожалуйста новичку.
Как вывести слайдер за границу контейнера, что бы он был во всю ширину экрана ?

 

или перенести через изменение места вывода для Низ страницы или с помощью jquery.
Второй вариант ест на форуме, аналогичный вопрос был, но для слайдшоу в шапку

 

Поможете разобрать первый способ, я слаб в php?
Если я в home.tpl выношу строчку
<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?></div> за контейнер , то работает. Но естественно за ним и ползут и рекомендации во всю ширину, так как они тоже сидят в content_top. Можно как то их разделить ?

 

перенесети из контент-топ в контент-даун через расположения на схемах страниц в админке. а порядок выставите через очередность сортировки, если я правильно понял суть вопроса

 

Влад, а так будет не правильно?
template/module/slideshow.tpl

Код:

    navigation: true,
    navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
    pagination: true

исправить на

Код:

    navigation: false,
    navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
    pagination: false

 

а что тут не правильного? Все правильно.

 

Добрый вечер! не могу изменить размер слайда, не подскажите как это сделать. заранее спасибо.

 

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

 

Здравствуйие, и у меня возник вопрос по карусели, дело в том, что мне нужно выровнять все елементы карусели по ширине контейнера сохраняя фиксированую ширину елементов, тоесть,что бы небыло отступов слева в первом и справа в последнем елменте.
В витрине магазина этого добился с помощу вот такого кода, и приминения text-align: justify;

Код:

      <div class="test">
        <?php foreach ($products as $product) { ?>     
          <div class="product-thumb">
            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
            <div>
              <div class="caption">
                <a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
              </div>
            </div>
          </div>     
        <?php } ?>
      </div>

Код:

.test{
  
  
    text-align: justify;
        /* Обнуляем для родителя*/
        line-height: 0;
        font-size: 1px; /* 1px для Opera */

        /* Лекарство для IE6-7*/
        text-justify: newspaper;
        zoom:1;

        /* Включаем в работу последнюю строку*/
        text-align-last: justify; 
}
.test:after {
        width: 100%;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        content: '';
        display: inline-block;
}
.product-thumb {
display: inline-block;
/* Востанавливаем у потомков, кроме последнего*/
line-height: normal;
font-size: 14px;

/* Без него в Opera будет отступ под элементами */
vertical-align: top;

/* эмуляция inline-block для IE6-7*/
//display : inline;
//zoom : 1;
}

Но на карусль это не действует, так как она подставляет свои стили и определяет расстояние, делая отступы между елементми, соответствнно только по центру можно выровнять((

 

Вроде как нет отступов между элементами. Зазоры появляются так как изображение не соответствует размеру блока.

 

Вот например: у меня ширина общего контейнера 1244px, в карусели вывожу 4 товара (блоки) product-thumb, с шириной width: 239px
Изображение соответствует размеру блока, 239px, да и в списке категорий первый код работает и выравнивает все до крайних границ, а тут в каруселе - скрипт атоматически делит контейнер на 4 части и высчитывает ширину видимо, тоесть, получается что мой product-thumb из шириной в 239px находится в контейнере, которую создает скрипт карусели, а так как общая ширина вместе сложенных блоков product-thumb < контейнер - то появляются отступы, если не использовать text-align: center, то блоки product-thumb внутри блоков созданных каруселью - будут находится по левому краю, из-за чего справа получаются отступы, если по центру поставить - отступы появляются с обех сторон, если по правому краю постаить - то отступ слева получается, а мне нужно по ширине не прибигая к увелечению ширины product-thumb, так как в таком случаи придется переделывать всю струкруру сайта, блоки карусели должны совпадать с размерами выше блоков витрины..., вот готлову ломаю как применить тут text-align: justify; и воможно ли..,

 

Все написали, а сайт не показали. Да и нет в стандартной карусели никаких product-thumb

 

Сайт на локалке находится пока((. Класс product-thumb есть, я сделал "рекомендуемые" каруселью..

 

Не верно вы сделали, вот документация

 

http://uploads.ru/GAX0U.png
Там просто не задана фиксированая ширина блоков и стоит margin-right 10px, а если задать ширину блока как я сделал на скрине - то справа появится большой отступ у всех блоков, можно выровнять блок по центре, тогда отступы появятся с обеих сторон блока и выходом является либо уминьшить ширину контейнера общего, либо увеличить ширину блока (а у меня ширина должна бы какждого из блоков 239p), и нжно, что бы первый и последний блоки примыкали к границам контейнера, а между остальными распределялось пустое место, сначала думал что это можно реализовать при помощи text-align: justify и inline block, но потом подумал, а что если товаров только два будет и будет выглядеть не красиво ели они будут по краям, а в середине - пустое место для двух, хотя даже так не получилось выровнять по ширине, пробовал контейнеру задавать text-align: right;, а ширину растянуть влево отрицательным margin-left, в итогн все стало на свои места, но проблема в том, что сайт адаптивным должен быть, и первая смена при 992px, поэтому из-за отрицательного margin, ближе к 992 все выходит за границы контейнера.

 

А зачем вам фиксированная ширина? Изучайте FlexBox (justify-content: space-between)

 

Дело в том, что ввеверху над каруселью идут товары в ряд с тем же класом product-thumb и нужно подстроить карусель под них, так задумано в дизайне, тоесть, блоки товаров должны совпадать, между ними должны быть одинаковые отступы, а вариант сменить ширину блоков тоже не подходит, Flex пробовал, им ничего не смог добится, слайдер автоматически рассчитывает нужную ширину в которую помещает product-thumb взависимости от ширины самого product-thumb, в моем случаи вывожу 4 товара, и слайдер создает 4 блока .owl-item с шириной 295px автоматически помещая product-thumb в них, в них я могу только по левому, правому и по центре выравнивать, но растянуть в ширину, что бы первый товар примыкал к левой границе контейнера, четвертый к правому, а между оставшимися в центре распределить пространство - не могу((