CIDWA/portalEditorial-front
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ya logre traer las img solo hay un error

Browse Source
This commit is contained in:
hugo cabrera diaz
2018-10-23 16:02:10 -05:00
parent 13d6ab6f7e
commit 9b57288945
4 changed files with 53 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modulos/slider/css/estiloh.css
+5 -3
View File
@@ -1,9 +1,11 @@
div .carrusel{
background: #fff;
background: #000;
}
.imag{
width: 100%;
height: 300px!important;
height: 500px;
margin-left: auto;
margin-right: auto;
}
modulos/slider/index.html
+8 -46
View File
@@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <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"> -->
@@ -14,63 +15,24 @@
</head>
<body>
<!-- carrusel -->
<div class="container">
<div class="row">
<!-- <div class="row"> -->
<div class="col-12">
<div class="carrusel">
<div class="carrusel" id="imgh">
<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> -->
</div>
<!-- termina carrusel -->
<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>
<script type="text/javascript" src="js/hugo.js"></script>
</body>
</html>
modulos/slider/js/hugo.js
+37
View File
@@ -0,0 +1,37 @@
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);
inserta()
}
function inserta() {
let app = document.getElementById('imgh');
let img = document.createElement('img');
let imgh = document.createElement('div');
img.src = (res[i].url);
imgh.setAttribute('class', 'carrusel');
img.setAttribute("width", "100%");
img.setAttribute("height", "300px");
app.appendChild(img);
app.appendChild(imgh);
}
$(document).ready(function(){
$('.carrusel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
modulos/slider/slick/slick-theme.css
+3 -3
View File
@@ -178,7 +178,7 @@
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
font-size: 10px;
line-height: 20px;
position: absolute;
@@ -191,7 +191,7 @@
content: '•';
text-align: center;
opacity: .25;
opacity: .50;
color: black;
-webkit-font-smoothing: antialiased;
@@ -199,6 +199,6 @@
}
.slick-dots li.slick-active button:before
{
opacity: .75;
opacity: .85;
color: black;
}