Carousel with any number of elements and navigation




Explanation

No such carousel on pure CSS, I have not found.

The carousel is a modified version of the carousel http://only-css.com/blog/article/prostaya-karusel-s-lyubym-kolichestvom-elementov-na-css.

The hardest part was to make the navigation buttons (arrow vlevo, right arrow). To the last (right) looking at the first slide, and the first (left) at last, it is especially difficult to make it all work regardless of the number of slides.

In the example, I laid the possibility of using from 2 to 10 slides.

 

The trick

Order, regardless of the selected slide, it was possible to make visible any button, they had to move down the tree carousel.

The structure was such:

  1. <div class="carousel">
  2. <!-- Begin block with input -->
  3. <input id="slide-1" type="radio" name="carousel" checked>
  4. <!-- End block with input -->
  5.  
  6. <input id="slide-2" type="radio" name="carousel">
  7.  
  8. ...
  9.  
  10. <!-- Begin block with label -->
  11. <a href="#slide_num_1" class="carousel-content" style="background-image: url(http://lorempixel.com/800/400/cats/1);">
  12. <span>Slide 1 (slide is anchor)</span>
  13. </a>
  14. <label class="control" for="slide-1"></label>
  15. <label class="arrow" for="slide-1"></label>
  16. <!-- End block with label -->
  17.  
  18. <a href="#slide_num_2" class="carousel-content" style="background-image: url(http://lorempixel.com/800/400/cats/2);">
  19. <span>Slide 2 (slide is anchor)</span>
  20. </a>
  21. <label class="control" for="slide-2"></label>
  22. <label class="arrow" for="slide-2"></label>
  23.  
  24. ...
  25. </div>

It is very important what type of element will have a class carousel-contentas the reference in the CSS is using the pseudo class :nth-of-type.

Example on CSS.

  1. .carousel > input:checked:nth-of-type(1) ~ label.arrow:nth-of-type(4),
  2. .carousel > input:checked:nth-of-type(2) ~ label.arrow:nth-of-type(6),
  3. .carousel > input:checked:nth-of-type(3) ~ label.arrow:nth-of-type(8),
  4. .carousel > input:checked:nth-of-type(4) ~ label.arrow:nth-of-type(10),
  5. .carousel > input:checked:nth-of-type(5) ~ label.arrow:nth-of-type(12),
  6. .carousel > input:checked:nth-of-type(6) ~ label.arrow:nth-of-type(14),
  7. .carousel > input:checked:nth-of-type(7) ~ label.arrow:nth-of-type(16),
  8. .carousel > input:checked:nth-of-type(8) ~ label.arrow:nth-of-type(18),
  9. .carousel > input:checked:nth-of-type(9) ~ label.arrow:nth-of-type(20),
  10. .carousel > input:checked:nth-of-type(2):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  11. .carousel > input:checked:nth-of-type(3):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  12. .carousel > input:checked:nth-of-type(4):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  13. .carousel > input:checked:nth-of-type(5):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  14. .carousel > input:checked:nth-of-type(6):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  15. .carousel > input:checked:nth-of-type(7):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  16. .carousel > input:checked:nth-of-type(8):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  17. .carousel > input:checked:nth-of-type(9):nth-last-of-type(1) ~ label.arrow:nth-of-type(2),
  18. .carousel > input:checked:nth-of-type(10):nth-last-of-type(1) ~ label.arrow:nth-of-type(2) {
  19. display: inline-block;
  20. right: 0;
  21. left: auto;
  22. border-radius: 100% 0 0 100%;
  23. }

CSS has been challenging, for more information view the source code, or DEMOS with comments.

 

Feature

At one point of time each slide will be only 1 link (either left arrow, or right). So, no need to have 2 elements (<label class="arrow" for="slide"></label>) arrow and it is sufficient to have only one, which will be either one or the other arrow.

In order to "point" the slides in the carousel were at the bottom of the carousel, their position is considered as top: calc(100% - 20px);and the height of the slide is limited as top: 0; bottom: 20px;

In the demo, presented options for the location of "points" slides, but there is no vertical carousels (don't want to fight with arrows).

Live demo
Download ZIP







Found comments - 4






Козлов Андрей December 27, 2016
Могу написать статью, о том как я делаю каптчу для этого сайта. Ведь она тоже на CSS. :)
Козлов Андрей December 27, 2016
А вы хоть раз видели карусель, в которой хотябы больше 15 картинок или предложений??? Это не реально, потому что даже если не на CSS делать то у вас не будут "влазить" навигационные точки по слайдам. Тем более что ширина может быть 320 пикселей, там вообще 10 штук войдет.
Кирилл December 24, 2016
А если картинок 100?
DefDis December 07, 2016
шикардос!
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result