SEOHi, hope you doing well recently i was received and requirement of adding 3rd tab best seller in porto theme home page 9 and it was so disturbing , that tab when i tried to search on platform i saw many people was searching for the same solution so letter i just fixed it my self and sharing this code may be other some searching for the same solution so you can use this simple code bellow to get the result if simple copy and past code where you want this slider you can use in page or CMS static block , i love block and widget in magento because it allow you to manage every block separately no mixer of codes and you can call widget any where you want but its up to you how you want to use , if you need more help you can you contact me or contact me send email on Skype (Zubypk92)
- <div class=”container”>
<div class=”filterproducts-tab” style=”padding-top: 40px;”>
<h2 class=”filter-title”>
<ul class=”content”>
<li id=”tab_featured” class=”active first”><a href=”#”><strong>FEATURED</strong></a></li>
<li id=”tab_latest”><a href=”#”><strong>LATEST PRODUCTS</strong></a></li>
<li id=”tab_bestseller”><a href=”#”><strong>Best Seller</strong></a></li/>
</ul>
</h2>
<div class=”clearer”></div>
<div class=”tab-content” id=”tab_featured_contents”>
<div id=”featured_product” class=”owl-top-narrow hide-addtocart hide-addtolinks”>
{{block type=”filterproducts/featured_home_list” name=”featured_list” product_count=”10″ template=”filterproducts/list.phtml” column_count=”4″ category_id=”3″ }}
</div>
<script>
jQuery(function($){
$(“#featured_product .filter-products .owl-carousel”).owlCarousel({
lazyLoad: true,
itemsCustom: [ [0, 1], [320, 1], [480, 2], [768, 3], [992, 4], [1200, 5] ],
responsiveRefreshRate: 50,
slideSpeed: 200,
paginationSpeed: 500,
scrollPerPage: false,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: false,
navigation: true,
autoPlay: true,
navigationText:[“<i class=’icon-left-open’></i>”,”<i class=’icon-right-open’></i>”] });
});
</script>
</div>
<div class=”clearer”></div>
<div class=”tab-content” id=”tab_bestseller_contents”>
<div id=”bestseller_product” class=”owl-top-narrow hide-addtocart hide-addtolinks”>
{{block type=”filterproducts/bestsellers_home_list” name=”bestsellers_list”” product_count=”10″ template=”filterproducts/list.phtml” column_count=”4″ category_id=”3″ }}
</div>
<script>
jQuery(function($){
$(“#bestseller_product .filter-products .owl-carousel”).owlCarousel({
lazyLoad: true,
itemsCustom: [ [0, 1], [320, 1], [480, 2], [768, 3], [992, 4], [1200, 5] ],
responsiveRefreshRate: 50,
slideSpeed: 200,
paginationSpeed: 500,
scrollPerPage: false,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: false,
navigation: true,
autoPlay: true,
navigationText:[“<i class=’icon-left-open’></i>”,”<i class=’icon-right-open’></i>”] });
});
</script>
</div>
