猫头鹰旋转木马 - 设置和样式

时间:2017-07-03 08:09:17

标签: javascript jquery css owl-carousel

我正在尝试实现类似下面的轮播(live preview): enter image description here

我一直在摆弄设置,但到目前为止没有运气,尽管有相同的结构和类别。这是我到目前为止所做的:

enter image description here

我的代码段如下:

JS:

$('#lgi__slider .owl-carousel').owlCarousel({
  dots: false,
  autoWidth: true,
  stagePadding: 0,
  margin: 15,
  nav: true,
  navText: ['<i class="icon-left-small"></i>', '<i class="icon-right-small"></i>'],
  navContainer: '#lgi__slider',
  navClass: [ 'lgi__btn lgi__btn--prev', 'lgi__btn lgi__btn--next' ],
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 2,
      autoWidth: false,
    },
    992: {
      items: 3,
      autoWidth: false,
    },
    1310: {
      items: 3,
      autoWidth: false,
      margin: 30,
    }
  }
});

PHP / HTML:

    <section class="lgi">
    <div class="container">
    <div class="lgi__block lgi__block-2">
        <div class="lgi__head">

            <h2 class="h0">PRODUCTS BY <?php echo $model->title ?></h2>
            <p class="lgi__quote"></p>
        </div>
        <div class ="lgi__slider" id="lgi__slider">
        <div class="owl-carousel owl-loaded owl-drag">  
            <?php foreach ($model->products as $product): ?>
            <div class="lgi__item">
                <a class="lgi__item-inner main-enterprise-image" data-enterprise-id="<?php echo $product['id']; ?>" data-image="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" data-category="<?php echo $product->productCategory->title;?>" data-desc="<?php echo $product->text_short_description;?>" data-title="<?php echo $product['title']; ?>">
                    <div class="lgi__block-img">
                        <img class="lgi__img" src="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" />
                        <div class="overlay"></div>
                    </div>
                    <div class="lgi__title stripe">
                        <h4> <?php echo $product['title']; ?></h4>
                        <h6> 
                            <?php echo $product->productCategory->title; ?>
                        </h6>
                    </div>
                </a>
            </div> 
            <?php endforeach; ?>
        </div>
        </div>
    </div>
    </div>
    </section>

非常感谢任何人都可以指出我做错了什么。

0 个答案:

没有答案