diff options
author | Carsten Schoenert <c.schoenert@t-online.de> | 2019-07-22 16:15:32 -0300 |
---|---|---|
committer | Laura Arjona Reina <larjona@debian.org> | 2019-12-13 19:40:00 +0100 |
commit | 4ddc04974a4469b40e86c23b32ba5f38af8c109b (patch) | |
tree | c8801d0271236de4990b6af6b763026059429f18 /english/5img-carousel-slider.css | |
parent | b7b82cc0297a74af9a3938eb9140bc6a30ba7024 (diff) |
5img-carousel-slider.css: new CSS classes for image carousel
Another implementation for a imgage carousel with currently five images
that are supported.
Diffstat (limited to 'english/5img-carousel-slider.css')
-rw-r--r-- | english/5img-carousel-slider.css | 266 |
1 files changed, 266 insertions, 0 deletions
diff --git a/english/5img-carousel-slider.css b/english/5img-carousel-slider.css new file mode 100644 index 00000000000..05ac1035750 --- /dev/null +++ b/english/5img-carousel-slider.css @@ -0,0 +1,266 @@ +/* + This stylesheet is holding classes for a static image carousel for + five images. +*/ + +/*---- NUMBER OF SLIDE CONFIGURATION ----*/ +.wrapper { + max-width: 60em; + position: relative; + +} + +.wrapper input { + display: none; +} + +.inner { + width: 500%; + line-height: 0; +} + +.inner article { + width: 20%; + float: left; + position: relative; +} +.inner article img { + max-width: 95%; + height: auto; +} + +/*---- SET UP CONTROL ----*/ +.slider-prev-next-control { + height: 50px; + position: absolute; + top: 50%; + width: 100%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); +} + +.slider-prev-next-control label { + display: none; + width: 40px; + height: 40px; + border-radius: 50%; + background: #5f5f5f; + opacity: 0.7; +} + +.slider-prev-next-control label:hover { + opacity: 1; +} + +.slider-dot-control { + position: absolute; + width: 100%; + bottom: 15px; + text-align: center; +} + +.slider-dot-control label { + cursor: pointer; + border-radius: 5px; + display: inline-block; + width: 10px; + height: 10px; + background: #bbb; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + transition: all 0.3s; +} + +.slider-dot-control label:hover { + background: #ccc; + border-color: #777; +} + +/* Info Box */ +.info { + position: absolute; + font-style: italic; + line-height: 20px; + opacity: 0; + color: #000; + background-color: gainsboro; + border-radius: 5px; + -moz-border-radius: 5px; + text-align: left; + -webkit-transition: all 1000ms ease-out 600ms; + -moz-transition: all 1000ms ease-out 600ms; + transition: all 1000ms ease-out 600ms; +} + +.info h3 { + color: #000; + margin: 0.4em; + font-weight: normal; + font-size: 0.9em; + font-style: normal; +} + +.info.top-left { + top: 20px; + left: 55px; +} + +.info.top-right { + top: 20px; + right: 55px; +} + +.info.bottom-left { + bottom: 20px; + left: 55px; +} + +.info.bottom-right { + bottom: 20px; + right: 55px; +} + +/* Slider Styling */ +.slider-wrapper { + width: 100%; + overflow: hidden; + /*border-radius: 5px;*/ + /*box-shadow: 1px 1px 4px #666;*/ + /*background: #fff;*/ + /*background: #fcfff4;*/ + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition: all 500ms ease-out; + -moz-transition: all 500ms ease-out; + transition: all 500ms ease-out; +} + +.slider-wrapper .inner { + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); + -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); + transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); +} + +/*---- SET POSITION FOR SLIDE ----*/ +#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, +#slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, +#slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, +#slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, +#slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, +#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, +#slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, +#slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, +#slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, +#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after { + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + margin: 0; + line-height: 38px; + font-size: 3em; + display: block; + color: #fff; +} + +#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, +#slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, +#slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, +#slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, +#slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after { + content: "\f105"; + padding-left: 15px; +} + +#slide1:checked ~ .slider-prev-next-control label:nth-child(2), +#slide2:checked ~ .slider-prev-next-control label:nth-child(3), +#slide3:checked ~ .slider-prev-next-control label:nth-child(4), +#slide4:checked ~ .slider-prev-next-control label:nth-child(5), +#slide5:checked ~ .slider-prev-next-control label:nth-child(1) { + display: block; + float: right; + margin-right: 8%; +} + +#slide2:checked ~ .slider-prev-next-control label:nth-child(1), +#slide3:checked ~ .slider-prev-next-control label:nth-child(2), +#slide4:checked ~ .slider-prev-next-control label:nth-child(3), +#slide5:checked ~ .slider-prev-next-control label:nth-child(4), +#slide1:checked ~ .slider-prev-next-control label:nth-child(5) { + display: block; + float: left; + margin-left: 8%; +} + +#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, +#slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, +#slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, +#slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, +#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after { + content: "\f104"; + padding-left: 8px; +} + +#slide1:checked ~ .slider-dot-control label:nth-child(1), +#slide2:checked ~ .slider-dot-control label:nth-child(2), +#slide3:checked ~ .slider-dot-control label:nth-child(3), +#slide4:checked ~ .slider-dot-control label:nth-child(4), +#slide5:checked ~ .slider-dot-control label:nth-child(5) { + background: #333; +} + +#slide1:checked ~ .slider-wrapper article:nth-child(1) .info, +#slide2:checked ~ .slider-wrapper article:nth-child(2) .info, +#slide3:checked ~ .slider-wrapper article:nth-child(3) .info, +#slide4:checked ~ .slider-wrapper article:nth-child(4) .info, +#slide5:checked ~ .slider-wrapper article:nth-child(5) .info { + opacity: 1; +} + +#slide1:checked ~ .slider-wrapper .inner { + margin-left: 0%; +} + +#slide2:checked ~ .slider-wrapper .inner { + margin-left: -100%; +} + +#slide3:checked ~ .slider-wrapper .inner { + margin-left: -200%; +} + +#slide4:checked ~ .slider-wrapper .inner { + margin-left: -300%; +} + +#slide5:checked ~ .slider-wrapper .inner { + margin-left: -400%; +} + +/*---- TABLET ----*/ +@media only screen and (max-width: 850px) and (min-width: 450px) { + .slider-wrapper { + border-radius: 0; + } +} +/*---- MOBILE----*/ +@media only screen and (max-width: 450px) { + .slider-wrapper { + border-radius: 0; + } + + .slider-wrapper .info { + opacity: 0; + } +} |