Files
portalEditorial-front/modulos/slider/index.html
T
2018-10-23 12:44:35 -05:00

77 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="../../css/bulma.css"> -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/estiloh.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="carrusel">
<div><img class="imag" src="imag/imagen01.jpg" alt=""></div>
<div><img class="imag" src="imag/imagen02.jpg" alt=""></div>
<div><img class="imag" src="imag/imagen03.jpg" alt=""></div>
<div><img class="imag" src="imag/imagen04.jpg" alt=""></div>
<div id="imgh">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
let res=[
{
id:1,nombre:'imagen05',url:'https://k45.kn3.net/9A4004F30.jpg'
},
{
id:2,nombre:'imagen06',url:'https://k31.kn3.net/C5C50F5FE.jpg'
},
{
id:3,nombre:'imagen07',url:'https://k31.kn3.net/D8E7CDD3E.jpg'
}
]
for (var i = 0; i < res.length; i++)
{
console.log(res[i].url);
console.log(res[i].id);
const app = document.getElementById('imgh');
const logo = document.createElement('img');
logo.src = (res[i].url);
// const imgh = document.createElement('div');
imgh.setAttribute('class', 'imag');
// imgh.setAttribute('class', 'imag');
// imgh.setAttribute("width", "100%");
// imgh.setAttribute("height", "300px");
app.appendChild(logo);
// app.appendChild(imgh);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.carrusel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
</script>
</body>
</html>