From 221bc933118b9f05c063776d7ef41d75a9bf2858 Mon Sep 17 00:00:00 2001 From: Laura Arjona Reina Date: Thu, 15 Jun 2023 08:59:59 +0200 Subject: Change CSS to use 6 images in the carousel --- english/5img-carousel-slider.css | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/english/5img-carousel-slider.css b/english/5img-carousel-slider.css index 655acb30ae5..bdeaef9dc87 100644 --- a/english/5img-carousel-slider.css +++ b/english/5img-carousel-slider.css @@ -1,6 +1,6 @@ /* This stylesheet is holding classes for a static image carousel for - five images. + six images. */ /* Number Of Slide Configuration */ @@ -12,11 +12,11 @@ display: none; } .inner { - width: 500%; + width: 600%; line-height: 0; } .inner article { - width: 20%; + width: 16.66%; float: left; position: relative; } @@ -142,12 +142,14 @@ #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, +#slide5:checked ~ .slider-prev-next-control label:nth-child(6)::after, +#slide6: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 { +#slide6:checked ~ .slider-prev-next-control label:nth-child(5)::after, +#slide1:checked ~ .slider-prev-next-control label:nth-child(6)::after { font-family: FontAwesome; font-style: normal; font-weight: normal; @@ -162,7 +164,9 @@ #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 { +#slide5:checked ~ .slider-prev-next-control label:nth-child(6)::after, +#slide6:checked ~ .slider-prev-next-control label:nth-child(1)::after { + content: "\203a"; padding-left: 1px; } @@ -170,7 +174,8 @@ #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) { +#slide5:checked ~ .slider-prev-next-control label:nth-child(6), +#slide6:checked ~ .slider-prev-next-control label:nth-child(1) { display: block; float: right; margin-right: 8%; @@ -179,7 +184,8 @@ #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) { +#slide6:checked ~ .slider-prev-next-control label:nth-child(5), +#slide1:checked ~ .slider-prev-next-control label:nth-child(6) { display: block; float: left; margin-left: 8%; @@ -188,7 +194,8 @@ #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 { +#slide6:checked ~ .slider-prev-next-control label:nth-child(5)::after, +#slide1:checked ~ .slider-prev-next-control label:nth-child(6)::after { content: "\2039"; padding-left: 1px; } @@ -196,14 +203,16 @@ #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) { +#slide5:checked ~ .slider-dot-control label:nth-child(5), +#slide6:checked ~ .slider-dot-control label:nth-child(6) { 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 { +#slide5:checked ~ .slider-wrapper article:nth-child(5) .info, +#slide6:checked ~ .slider-wrapper article:nth-child(6) .info { opacity: 1; } #slide1:checked ~ .slider-wrapper .inner { @@ -221,6 +230,9 @@ #slide5:checked ~ .slider-wrapper .inner { margin-left: -400%; } +#slide6:checked ~ .slider-wrapper .inner { + margin-left: -500%; +} /* Tablet */ @media only screen and (max-width: 850px) and (min-width: 450px) { -- cgit v1.2.3