Posts Tagged ‘Magento2’


Currently I have used easy responsive for tabbing and owlCarousel for Carousel.

HTML :


<div id="parentHorizontalTab">
	<ul class="resp-tabs-list hor_1">
		<li>Horizontal 1</li>
		<li>Horizontal 2</li>
		<li>Horizontal 3</li>
	</ul>
	<div class="resp-tabs-container hor_1">
		<div>
			<div class="new-products1">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>
		<div>
			<div class="new-products2">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>
		<div>
			<div class="new-products3">
				<div class="item">product1</div>
				<div class="item">product2</div>
				<div class="item">product3</div>
				<div class="item">product4</div>
				<div class="item">product5</div>
				<div class="item">product6</div>
				<div class="item">product7</div>
				<div class="item">product8</div>
			</div>
		</div>

	</div>
</div>

 

Script :

<script type="text/javascript">
	require (['js/easy-responsive-tabs','js/owl.carousel.min'], function(myjs) {
		jQuery(document).ready(function() {
			//Horizontal Tab
			jQuery('#parentHorizontalTab').easyResponsiveTabs({
				type: 'default', //Types: default, vertical, accordion
				width: 'auto', //auto or any width like 600px
				fit: true, // 100% fit in a container
				tabidentify: 'hor_1', // The tab groups identifier
				activate: function(event) { // Callback function if tab is switched
					var $info = $('#nested-tabInfo');
					var $name = $('span', $info);
					$name.text($tab.text());
					$info.show();
				}
			});
			jQuery(".new-products1").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
			jQuery(".new-products2").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
			jQuery(".new-products3").owlCarousel({
				autoPlay: 3000, //Set AutoPlay to 3 seconds
				items : 4,
				navigation :true,
				itemsDesktop : [1199,4],
				itemsDesktopSmall : [979,4],
				lazyLoad : true
			});
		});
	});
</script>
Advertisements