From 9b57288945c8d656e47e5f06975996a668d6e60b Mon Sep 17 00:00:00 2001 From: hugo cabrera diaz Date: Tue, 23 Oct 2018 16:02:10 -0500 Subject: [PATCH] ya logre traer las img solo hay un error --- modulos/slider/css/estiloh.css | 8 +++-- modulos/slider/index.html | 54 +++++----------------------- modulos/slider/js/hugo.js | 37 +++++++++++++++++++ modulos/slider/slick/slick-theme.css | 6 ++-- 4 files changed, 53 insertions(+), 52 deletions(-) create mode 100644 modulos/slider/js/hugo.js diff --git a/modulos/slider/css/estiloh.css b/modulos/slider/css/estiloh.css index 2c3ca43..368df9b 100644 --- a/modulos/slider/css/estiloh.css +++ b/modulos/slider/css/estiloh.css @@ -1,9 +1,11 @@ div .carrusel{ - background: #fff; + background: #000; } .imag{ width: 100%; - height: 300px!important; - + height: 500px; + margin-left: auto; + margin-right: auto; + } diff --git a/modulos/slider/index.html b/modulos/slider/index.html index 3befa1f..1a99848 100644 --- a/modulos/slider/index.html +++ b/modulos/slider/index.html @@ -3,7 +3,8 @@ - + + @@ -14,63 +15,24 @@ +
-
+
-
+
-
- -
-
+
+ - - + diff --git a/modulos/slider/js/hugo.js b/modulos/slider/js/hugo.js new file mode 100644 index 0000000..273a756 --- /dev/null +++ b/modulos/slider/js/hugo.js @@ -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, + }); +}); diff --git a/modulos/slider/slick/slick-theme.css b/modulos/slider/slick/slick-theme.css index 785b445..45612b4 100644 --- a/modulos/slider/slick/slick-theme.css +++ b/modulos/slider/slick/slick-theme.css @@ -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; }