<div class="deal-group-product">
<div class="group-block group-products deal-slider-id14">
<div class="product-container">
<div class="title-home">
<h2>Deal Of The Days</h2>
</div>
{{block class="Sm\FilterProducts\Block\FilterProducts" template="Sm_FilterProducts::default-grid-column-id14.phtml" title_module="" display_countdown="1" product_source="special_products" select_category="3" product_limitation="3"}}
<script type="text/javascript">
	require([
		'jquery',
		'owlcarousel',
		'domReady!'
	], function ($) {
		setTimeout(function(){
			$(".deal-slider-id14 .block-content-products").owlCarousel({
				autoplay:false,
				nav : true, 
				dots: false,
				autoplaySpeed : 500,
				navSpeed : 500,
				dotsSpeed : 500,
				autoplayHoverPause: true,
				margin:30,
				
				responsive: {
					0: {
						items:1
					},
					480: {
						items:1
					},
					768: {
						items:1
					},
					991: {
						items:1
					},
					
					1366: {
						items:2
					},

					1920: {
						items:1
					}
				},
			});	 
		}, 500);
		 
	});		
							
							
</script>
</div>
</div>
<div class="group-block group-products group-block-title slider-1">
<div class="product-container">
<div class="title-home">
<h2>Featured Products</h2>
</div>
{{block class="Sm\FilterProducts\Block\FilterProducts" template="Sm_FilterProducts::default-slider-id14.phtml" title_module="" display_countdown="0" product_source="featured_products" select_category="3,4,30" product_limitation="5"}}
<script type="text/javascript">
	require([
		'jquery',
		'owlcarousel',
		'domReady!'
	], function ($) {
		setTimeout(function(){
			var slider_1 = $(".slider-1 .block-content-slider");
			slider_1.owlCarousel({				
				nav: true,
				dots:false,
				stagePadding: 5,
				margin: 16,
				
				responsive: {
					0: {
						items:1
					},
					
					480: {
						items:2
					},
					
					768: {
						items:3
					},
					
					991: {
						items:4
					},	
					
					1200: {
						items:5
					},

					1500: {
						items:6
					},
					
					1800: {
						items:4		
					}
				}
			});	 
		}, 500);
		 
	});
							
</script>
</div>
</div>
</div>
<div class="group-block top-collections-14">
<div class="top-collection lazyload-container">
<div class="title-home">
<h2>Top Collections</h2>
</div>
<div class="owl-carousel slider-top-collection">
<div class="item">
<div class="item-inner">
<div class="image-box static-image"><a href="#"> <img class="mark-lazy"  src="{{media url="wysiwyg/top-collection/cat-1.jpg"}}" alt="Smartphone &amp; Tablet" /> </a></div>
<div class="info-box">
<h3><a title="Smartphone &amp; Tablet" href="#">Smartphone &amp; Tablet</a></h3>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="image-box static-image"><a href="#"> <img class="mark-lazy"  src="{{media url="wysiwyg/top-collection/cat-2.jpg"}}" alt="Fashion" /> </a></div>
<div class="info-box">
<h3><a title="Fashion" href="#">Fashion</a></h3>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="image-box static-image"><a href="#"> <img class="mark-lazy"  src="{{media url="wysiwyg/top-collection/cat-3.jpg"}}" alt="Sport Bikes" /> </a></div>
<div class="info-box">
<h3><a title="Sport Bikes" href="#">Sport Bikes</a></h3>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="image-box static-image"><a href="#"> <img class="mark-lazy"  src="{{media url="wysiwyg/top-collection/cat-4.jpg"}}" alt="Furniture &amp; Decor" /> </a></div>
<div class="info-box">
<h3><a title="Furniture &amp; Decor" href="#">Furniture &amp; Decor</a></h3>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="image-box static-image"><a href="#"> <img class="mark-lazy"  src="{{media url="wysiwyg/top-collection/cat-5.jpg"}}" alt="Appliances" /> </a></div>
<div class="info-box">
<h3><a title="Appliances" href="#">Appliances</a></h3>
</div>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="image-box static-image"><a href="#"> <img class="mark-lazy"  src="{{media url="wysiwyg/top-collection/cat-1.jpg"}}" alt="Smartphone &amp; Tablet" /> </a></div>
<div class="info-box">
<h3><a title="Smartphone &amp; Tablet" href="#">Smartphone &amp; Tablet</a></h3>
</div>
</div>
</div>
</div>
<script type="text/javascript">
	require([
		'jquery',
		'owlcarousel',
		'domReady!'
	], function ($) {
			setTimeout(function(){
				var collection_slider = $(".slider-top-collection");
				collection_slider.owlCarousel({				
					nav: true,
					dots:false,
					margin: 20,
					stagePadding: 2,
					
					responsive: {
						0: {
							items:1
						},
						480: {
							items:2
						},
						768: {
							items:3
						},
						991: {
							items:4
						},						
						1200: {
							items:5
						}
					}
				});	 
			}, 2000);
			 
		});
		
						
					
</script>
</div>
</div>