<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://localhost/library/owlcarousel2/owl.carousel.min.css">
<script type="text/javascript" src="http://localhost/library/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/library/owlcarousel2/owl.carousel.min.js"></script>
</head>
<body>
<?php
// example of how to use basic selector to retrieve HTML contents
include 'simple_html_dom.php';
$html = file_get_html('https://www.dienmayxanh.com/');
// Find all article blocks
$src1 = "data-src";
$src2 = "src";
foreach($html->find('div.item') as $element) {
foreach($element->find('a') as $a) {
$item['href'] = $a->href;
$item['src'] = $a->children[0]->$src1 ? $a->children[0]->$src1 : $a->children[0]->$src2;
$item['alt'] = $a->children[0]->alt;
$articles[] = $item;
}
}
?>
<div class="owl-carousel owl-theme">
<?php
foreach ($articles as $value) {
?>
<div class="item">
<a href="<?php echo $value['href']; ?>">
<img src="<?php echo $value['src']; ?>" alt="<?php echo $value['alt']; ?>">
</a>
</div>
<?php
}
?>
</div>
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
items: 4
});
});
</script>
</body>
</html>
