0

opencart 2.0.1.1 的目录 features.tpl 的代码如下，我为 owl-carousel 实现修改并添加

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

在控制器中。

精选.tpl

<h3>
  <?php echo $heading_title; ?>
  <span class="customNavigation"><!-- added navigation -->
    <a class="btn prev">Previous</a>
    <a class="btn next">Next</a>
    <a class="btn play">Autoplay</a>
    <a class="btn stop">Stop</a>
  </span>
</h3>

<div class="row">
  <div id="owl-demo" class="owl-carousel"><!--added owl carousel container-->
  <?php foreach ($products as $product) { ?>
  <div class="item"><!--added class item for individual product-->
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><!--this bootstrap style creating problem-->
    <div class="product-thumb transition">
      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
      <div class="caption">
        <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
        <p><?php echo $product['description']; ?></p>
        <?php if ($product['rating']) { ?>
        <div class="rating">
          <?php for ($i = 1; $i <= 5; $i++) { ?>
          <?php if ($product['rating'] < $i) { ?>
          <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
          <?php } else { ?>
          <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
          <?php } ?>
          <?php } ?>
        </div>
        <?php } ?>
        <?php if ($product['price']) { ?>
        <p class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
          <?php } ?>
          <?php if ($product['tax']) { ?>
          <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
          <?php } ?>
        </p>
        <?php } ?>
      </div>
      <div class="button-group">
        <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
        <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
        <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
      </div>
    </div>
  </div>
</div>
  <?php } ?>
</div>
</div>


<script>
  $(document).ready(function() {

  var owl = $("#owl-demo");

  owl.owlCarousel({
      items : 4,
      itemsDesktop : [1000,3], 
      itemsDesktopSmall : [900,2],
      itemsTablet: [600,1], 
      itemsMobile : false 
  });

  // Custom Navigation Events
  $(".next").click(function(){
    owl.trigger('owl.next');
  })
  $(".prev").click(function(){
    owl.trigger('owl.prev');
  })
  $(".play").click(function(){
    owl.trigger('owl.play',1000); 
  })
  $(".stop").click(function(){
    owl.trigger('owl.stop');
  })

});
</script>

此代码创建损坏的前端特色模块（虽然轮播正在工作），但如果我删除<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">，那么单个产品将获得样式，但没有引导效果。是否可以同时拥有 owl-carousel 效果和 bootstrap 段效果？我正在使用 opencart 2.0.1.1

4

1 回答 1

0

从 div 类“col-lg-3 col-md-3 col-sm-6”中删除，只留下 col-xs-12 :)

于 2015-02-07T23:02:55.043 回答