<?php
/**
 * Plugin Name: materials-slider
 * Plugin URI: http://www.gems.com/materials-slider
 * Description: The very first plugin that I have ever created.
 * Version: 1.0
 * Author: materials-slider
 * Author URI: http://www.gems.com
 */


// Add Shortcode
function materials_slider() {
  ob_start();
  ?>



   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/new.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <title></title>
        





  </head>
  <body>


  	<div class="owl-carousel materials-slider">
	    <div class="item">
	        <div class="materials-slider-inner">
	        	<div class="materials-slider-inner-image">
	        		<img src="https://livetestdemo.xyz/chavdarmc/wp-content/uploads/2021/02/raw-material-image.png">
	        	</div>
	        	<h4>10 MM</h4>
	        	<p>10mm cucicled <br>
engineerd aggregate will <br>
enhance the quality and life of concrete</p>
	        </div>
	    </div>
	    <div class="item">
	        <div class="materials-slider-inner">
	        	<div class="materials-slider-inner-image">
	        		<img src="https://livetestdemo.xyz/chavdarmc/wp-content/uploads/2021/02/raw2.png">
	        	</div>
	        	<h4>20 MM</h4>
	        	<p>20mm cubicled engineered <br>aggregate 
that can help in optimum <br>mixdesign & 
improved <br>quality of concrete.
</p>
	        </div>
	    </div>
	    <div class="item">
	        <div class="materials-slider-inner">
	        	<div class="materials-slider-inner-image">
	        		<img src="https://livetestdemo.xyz/chavdarmc/wp-content/uploads/2021/02/raw3.png">
	        	</div>
	        	<h4>ZONE 2 SAND</h4>
	        	<p>We source one of the finest <br>sands , 
pre-filtered to ZONE<br> 2. An authentic
resource of <br>fine sand naturally

</p>
	        </div>
	    </div>
	    <div class="item">
	        <div class="materials-slider-inner">
	        	<div class="materials-slider-inner-image">
	        		<img src="https://livetestdemo.xyz/chavdarmc/wp-content/uploads/2021/02/raw4.png">
	        	</div>
	        	<h4>FLYASH</h4>
	        	<p>We use high quality fly ash <br>concrete having 45. micron sieve <br>test for
ascertaining the <br>fineness to the ready-mix to <br>improve workability of fresh<br>
concrete and reduce water<br> demand, shrinkage and <br>permeability of the<br>
finished product.

</p>
	        </div>
	    </div>
	</div>





    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script type="text/javascript">
     $('.materials-slider').owlCarousel({
	    loop:true,
	    margin:40,
	    nav:true,
	    smartSpeed: 1000,
	    slideTransition: 'linear',
	    autoHeight:true,
	    responsive:{
	        0:{
	            items:1
	        },
	        800:{
	            items:1
	        },
	        1000:{
	            items:1
	        }
	    }
	})
    </script>




 <?php

  return ob_get_clean();

}
add_shortcode( 'materials-slider', 'materials_slider' );