The code of catalog's featured.tpl of opencart 2.0.1.1 is as below, which i modified for owl-carousel implementation and added
$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');
in the controller.
featured.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>
This code creates broken front end featured module(though carousel is working) but if i delete <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> then the individual products are getting the style, but not having the bootstrap effect.
Is it possible to have owl-carousel effect and bootstrap segment effect together ?
I'm using opencart 2.0.1.1
