Bootstrap JS Carousel в шаблоне vamshop

12.09.2016 | Написав

В стандартном шаблоне vamshop1 уже давненько используется Bootstrap. Правда, карусель почему-то крутится на другом скрипте – Sequence.js. Я же в своих шаблонах с использованием Bootstrap стараюсь использовать этот фреймверк по полной, в том числе и для слайдеров. Для этого пришлось пойти на пару хитростей. Описывать сам слайдер Bootstrap я не буду, это все можно найти в документации как на английском, так и на русском языке. Остановлюсь только на моментах интеграции.


1. Первая сложность – указать активным первый слайд. решаем следующим образом:
– для слайдера банеров добавялем скрипт, который назначает первому элементу класс active

<script type="text/javascript">
$(document).ready(function(){
    $(".slider-banners ol.carousel-indicators li").first().addClass('active');
    $(".slider-banners .item").first().addClass('active');
});
</script>

– для слайдера, например, рекомендуемых меняем вызов цикла

{foreach name=aussen item=module_data from=$module_content}

на

{foreach name=aussen item=module_data from=$module_content name=foo}

а в блок item ставим добавление класса active для первого элемента

<div class="item {if $smarty.foreach.foo.index == 0} active{/if}">

2. Со слайдером с одним кадром все понятно, а вот для вывода четырех кадров одновременно с пролистыванием по одному добавляем скрипт

<script type="text/javascript">
(function(){
  $('#carousel-Featured-multiproduct').carousel({ interval: 2000 });
}());
(function(){
  $('.carousel-showmanymoveone .item').each(function(){
    var itemToClone = $(this);
 
    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();
 
      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }
 
      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());
</script>

самому слайдеру добавляем стиль carousel-showmanymoveone, например, вот так будет выглядеть слайдер рекомендуемых на главной:

<!-- слайдер -->
<div id="carousel-Featured-multiproduct" class="carousel carousel-showmanymoveone slide">
<div class="carousel-inner">
{foreach name=aussen item=module_data from=$module_content name=foo}
<div class="item {if $smarty.foreach.foo.index == 0} active{/if}">
<div class="col-xs-12 col-sm-6 col-md-3 Productw">
<div class="Product-int">
{if $module_data.PRODUCTS_IMAGE}
<div class="thumbnail ProductImage">
{if $module_data.PRODUCTS_LABEL}<div class="ProductLabel">{$module_data.PRODUCTS_LABEL}</div>{/if}
{if $module_data.PRODUCTS_SPECIAL}<div class="labelSpecials"><span class="label label-default">- {$module_data.PRODUCTS_SPECIAL|round}%</span></div>{/if}
<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /></a>
</div>
{/if}
<div class="ProductName"><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></div>
{if $module_data.PRODUCTS_SHORT_DESCRIPTION}
<div class="ProductDesc">{$module_data.PRODUCTS_SHORT_DESCRIPTION|vam_truncate:$smarty.const.MAX_DISPLAY_SHORT_DESCRIPTION:"...":true}</div>
{/if}
{if $module_data.EXTRA_FIELDS}
<div class="ProductDop">
<table class="table table-condensed">
{foreach item=extra_fields from=$module_data.EXTRA_FIELDS}
<tr><td>{$extra_fields.NAME}:</td><td>{$extra_fields.VALUE}</td></tr>
{/foreach}
</table>
</div>
{/if}
<div class="ProductRating">{if $module_data.REVIEWS_TOTAL > 0}<img src="{$tpl_path}img/stars_{$module_data.REVIEWS_TOTAL_RATING|number_format:0}.png" alt="{$module_data.REVIEWS_TOTAL_RATING|number_format:2}" title="{$module_data.REVIEWS_TOTAL_RATING|number_format:2}" /> {else}нет отзывов{/if}
{if $module_data.REVIEWS_TOTAL > 0}{$module_data.REVIEWS_TOTAL} отзыв{if $module_data.REVIEWS_TOTAL%10 == 0}ов{elseif $module_data.REVIEWS_TOTAL%10 == 1}{elseif $module_data.REVIEWS_TOTAL%10 < 5}а{else}ов{/if}{/if}
</div>
<div class="ProductButton">{$module_data.PRODUCTS_BUTTON_BUY_NOW}</div>
<div class="ProductPrice">{$module_data.PRODUCTS_PRICE}</div>
<div class="clearfix"></div>
</div>
</div>
</div>
{/foreach}
</div>
<!-- кнопки -->
<a class="left carousel-control" href="#carousel-Featured-multiproduct" data-slide="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
<a class="right carousel-control" href="#carousel-Featured-multiproduct" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
</div>
<!-- /слайдер -->

также добавляем стили:

/* карусель с 4-мя блоками */
.carousel-showmanymoveone .carousel-control {width: 4%;background-image: none;}
.carousel-showmanymoveone .carousel-control.left {margin-left: 15px;}
.carousel-showmanymoveone .carousel-control.right {margin-right: 15px;}
.carousel-showmanymoveone .cloneditem-1, .carousel-showmanymoveone .cloneditem-2, .carousel-showmanymoveone .cloneditem-3 {display: none;}
@media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left, .carousel-showmanymoveone .carousel-inner > .prev {left: -50%;}
.carousel-showmanymoveone .carousel-inner > .active.right, .carousel-showmanymoveone .carousel-inner > .next {left: 50%;}
.carousel-showmanymoveone .carousel-inner > .left, .carousel-showmanymoveone .carousel-inner > .prev.right, .carousel-showmanymoveone .carousel-inner > .active {left: 0;}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {display: block;}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {-webkit-transform: translate3d(50%, 0, 0);transform: translate3d(50%, 0, 0);left: 0;}
.carousel-showmanymoveone .carousel-inner > .item.active.left, .carousel-showmanymoveone .carousel-inner > .item.prev {-webkit-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0, 0);left: 0;}
.carousel-showmanymoveone .carousel-inner > .item.left, .carousel-showmanymoveone .carousel-inner > .item.prev.right, .carousel-showmanymoveone .carousel-inner > .item.active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);left: 0;}
}
@media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left, .carousel-showmanymoveone .carousel-inner > .prev {left:-25%;}
.carousel-showmanymoveone .carousel-inner > .active.right, .carousel-showmanymoveone .carousel-inner > .next {left: 25%;}
.carousel-showmanymoveone .carousel-inner > .left, .carousel-showmanymoveone .carousel-inner > .prev.right, .carousel-showmanymoveone .carousel-inner > .active {left: 0;}
.carousel-showmanymoveone .carousel-inner .cloneditem-2, .carousel-showmanymoveone .carousel-inner .cloneditem-3 {display: block;}
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right, .carousel-showmanymoveone .carousel-inner > .item.next {-webkit-transform: translate3d(25%, 0, 0);transform: translate3d(25%, 0, 0);left: 0;}
.carousel-showmanymoveone .carousel-inner > .item.active.left, .carousel-showmanymoveone .carousel-inner > .item.prev {-webkit-transform: translate3d(-25%, 0, 0);transform: translate3d(-25%, 0, 0);left: 0;}
.carousel-showmanymoveone .carousel-inner > .item.left, .carousel-showmanymoveone .carousel-inner > .item.prev.right, .carousel-showmanymoveone .carousel-inner > .item.active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);left: 0;}
}

В итоге мы получим слайдер, который будет выводить на мобильных – один кадр, на планшетах – два кадра, на “большом брате” – четыре.

Рубрика: Веброзробка
Позначки:, , ,
Коментарі читачів статті "Bootstrap JS Carousel в шаблоне vamshop"

Немає коментарів.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.