├── README.md ├── css └── estilos.css ├── img ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── 9.png └── thumb.png ├── index.html └── js └── app.js /README.md: -------------------------------------------------------------------------------- 1 | # Crea un Carousel Responsive Fácilmente con Glider.js 2 | ### [Tutorial: https://youtu.be/uDqW8bCFhps ](https://youtu.be/uDqW8bCFhps ) 3 | 4 | ![Crea un Carousel Responsive Fácilmente con Glider.js](https://raw.githubusercontent.com/falconmasters/glider-js/master/img/thumb.png) 5 | 6 | Por: [FalconMasters](http://www.falconmasters.com) -------------------------------------------------------------------------------- /css/estilos.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background: #1D1D1F; 7 | color: #fff; 8 | font-family: 'Montserrat', sans-serif; 9 | min-height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | } 13 | 14 | .contenedor { 15 | max-width: 1200px; 16 | width: 90%; 17 | margin: auto; 18 | } 19 | 20 | /* --- --- CONTENEDOR PRINCIPAL --- --- */ 21 | 22 | .contenido-principal { 23 | margin-bottom: 50px; 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | .contenido-principal__imagen { 29 | vertical-align: top; 30 | margin-right: 20px; 31 | width: 50%; 32 | max-width: 550px; 33 | } 34 | 35 | .contenido-principal__contenedor { 36 | width: 50%; 37 | } 38 | 39 | .contenido-principal__titulo { 40 | font-weight: normal; 41 | font-size: 28px; 42 | } 43 | 44 | .contenido-principal__resumen { 45 | font-family: 'Open Sans', sans-serif; 46 | line-height: 30px; 47 | color: #CFCFCF; 48 | } 49 | 50 | /* --- --- CAROUSEL --- --- */ 51 | .carousel__contenedor { 52 | position: relative; 53 | } 54 | 55 | .carousel__anterior, 56 | .carousel__siguiente { 57 | position: absolute; 58 | display: block; 59 | width: 30px; 60 | height: 30px; 61 | border: none; 62 | top: calc(50% - 35px); 63 | cursor: pointer; 64 | line-height: 30px; 65 | text-align: center; 66 | background: none; 67 | color: #fff; 68 | opacity: 20%; 69 | } 70 | 71 | .carousel__anterior:hover, 72 | .carousel__siguiente:hover { 73 | opacity: 100%; 74 | } 75 | 76 | .carousel__anterior { 77 | left: -30px; 78 | } 79 | 80 | .carousel__siguiente { 81 | right: -30px; 82 | } 83 | 84 | .carousel__lista { 85 | overflow: hidden; 86 | } 87 | 88 | .carousel__elemento { 89 | text-align: center; 90 | } 91 | 92 | .carousel__indicadores .glider-dot { 93 | display: block; 94 | width: 30px; 95 | height: 4px; 96 | background: #fff; 97 | opacity: .2; 98 | border-radius: 0; 99 | } 100 | 101 | .carousel__indicadores .glider-dot:hover { 102 | opacity: .5; 103 | } 104 | 105 | .carousel__indicadores .glider-dot.active { 106 | opacity: 1; 107 | } 108 | 109 | @media screen and (max-width: 800px) { 110 | body { 111 | padding: 40px 0; 112 | } 113 | 114 | .contenido-principal { 115 | flex-direction: column; 116 | } 117 | 118 | .contenido-principal > * { 119 | width: 100%; 120 | } 121 | } -------------------------------------------------------------------------------- /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/1.png -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/2.png -------------------------------------------------------------------------------- /img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/3.png -------------------------------------------------------------------------------- /img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/4.png -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/6.png -------------------------------------------------------------------------------- /img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/7.png -------------------------------------------------------------------------------- /img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/8.png -------------------------------------------------------------------------------- /img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/9.png -------------------------------------------------------------------------------- /img/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/glider-js/b7491a8181358bf12396d3b04efc2a9879ff3062/img/thumb.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Carousel / Slider con Glider.js 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Dome of the German Bundestag 16 |
17 |

Dome of the German Bundestag

18 |

19 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a commodo orci. Nulla ipsum ante, auctor a odio id, bibendum accumsan mauris. 20 |

21 |

22 | Fusce malesuada mollis ante, at elementum mi maximus nec. Praesent volutpat, tortor sed condimentum sagittis, mi diam fringilla nibh. 23 |

24 |
25 |
26 | 27 |
28 |
29 | 32 | 33 |
34 |
35 | Rock and Roll Hall of Fame 36 |

Rock and Roll Hall of Fame

37 |
38 |
39 | Constitution Square - Tower I 40 |

Constitution Square - Tower I

41 |
42 |
43 | Empire State Building 44 |

Empire State Building

45 |
46 |
47 | Harmony Tower 48 |

Harmony Tower

49 |
50 | 51 |
52 | Empire State Building 53 |

Empire State Building

54 |
55 |
56 | Harmony Tower 57 |

Harmony Tower

58 |
59 |
60 | Empire State Building 61 |

Empire State Building

62 |
63 |
64 | Harmony Tower 65 |

Harmony Tower

66 |
67 |
68 | 69 | 72 |
73 | 74 |
75 |
76 |
77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('load', function(){ 2 | new Glider(document.querySelector('.carousel__lista'), { 3 | slidesToShow: 1, 4 | slidesToScroll: 1, 5 | dots: '.carousel__indicadores', 6 | arrows: { 7 | prev: '.carousel__anterior', 8 | next: '.carousel__siguiente' 9 | }, 10 | responsive: [ 11 | { 12 | // screens greater than >= 775px 13 | breakpoint: 450, 14 | settings: { 15 | // Set to `auto` and provide item width to adjust to viewport 16 | slidesToShow: 2, 17 | slidesToScroll: 2 18 | } 19 | },{ 20 | // screens greater than >= 1024px 21 | breakpoint: 800, 22 | settings: { 23 | slidesToShow: 4, 24 | slidesToScroll: 4 25 | } 26 | } 27 | ] 28 | }); 29 | }); --------------------------------------------------------------------------------