Post by mrducanhtran » Wed Dec 20, 2017 5:51 pm

I want use owl carousel to display featured product in 2 rows.
But i can not get result as below image
I attach the code and someone can help me. Thanks!

Mycode: catalog\view\theme\green\template\extension\module\featured.twig

<link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
<style>
.hide_description {
display: none;
}
.product-thumb .action {
display: none;
position: absolute;
top: 80px; left: 16px; right: 16px;
}
.product-thumb:hover .action {
display: block;
}
</style>
<div><h3>{{ heading_title }}</h3>
<div align="right" class="customNavigation">
<a class="btn prev_featured"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a class="btn next_featured"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
<a class="btn play_featured"><i class="fa fa-play" aria-hidden="true"></i></a>
<a class="btn stop_featured"><i class="fa fa-pause" aria-hidden="true"></i></a>
</div>
</div>
<div id="featured" class="row">
{% for product in products %}
<div class="col-xs-12 owlCarousel">
<div class="product-thumb transition">
<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
<div>
<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
<div class="hide_description">{{ product.description }}</div>
{% if product.rating %}
<div class="rating">
{% for i in 5 %}
{% if product.rating < i %}
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
{% 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>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% if product.price %}
<div class="price">
{% if not product.special %}
{{ product.price }}
{% else %}
<span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
{% endif %}
{% if product.tax %}
<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
{% endif %}
</div>
{% endif %}
</div>
<div class="button-group action">
<button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
<button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
{% endfor %}
</div>
<script type="text/javascript"><!--
$(document).ready(function() {

var owl = $("#featured");

owl.owlCarousel({
items : 4, //4 items above 1000px browser width
autoPlay: false,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
// Responsive
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
//Pagination
pagination : false,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,4],
itemsTablet: [768,2],
itemsTabletSmall: false,
//Lazy load
lazyLoad : false,
lazyFollow : true,
lazyEffect : "fade",
itemsMobile : [479,1]
});

// Custom Navigation Events
$(".next_featured").click(function(){
owl.trigger('owl.next');
})
$(".prev_featured").click(function(){
owl.trigger('owl.prev');
})
$(".play_featured").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop_featured").click(function(){
owl.trigger('owl.stop');
})

});
--></script>

Attachments

Carousel Featured Product in 2 rows.png

Carousel Featured Product in 2 rows.png (293.55 KiB) Viewed 6277 times


Newbie

Posts

Joined
Wed Dec 20, 2017 5:38 pm

Post by cyclops12 » Fri Dec 22, 2017 2:24 am

Have you tried going into extensions/extensions then choose Modules from the dropdown.
There you can change the Limit from 4 to 8, this should give you 2 lines

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am
Who is online

Users browsing this forum: RoyT and 138 guests