Simple carousel with any number of elements on CSS




Explanation

Probably the hardest part of my job. Certainly not the carousel, and the carousel with navigation buttons (http://only-css.com/blog/article/karusel-s-lyubym-kolichestvom-elementov-i-navigaciey), without JavaScript.

Asked to make a carousel with any number of elements, implemented quickly. It was difficult to make navigation buttons for her.

But in this article we will talk about a simple carousel.

 

The trick

Due to the fact that the indentation of vertically margin-top/margin-bottom (https://www.w3.org/TR/CSS2/box.html#margin-properties) and padding-top/padding-bottom (https://www.w3.org/TR/CSS2/box.html#padding-properties) are considered to be the width of the element, you need to use top/bottom, with the appropriate positioning (position).

The following is an example of code that is a feature of the slider.

  1. <div class="carousel">
  2. <!-- Begin one slide -->
  3. <input id="slide-1" type="radio" name="carousel" checked>
  4. <div class="carousel-content">
  5. <span>Slide 1</span>
  6. </div>
  7. <label class="control" for="slide-1"></label>
  8. <!-- End one slide -->
  9.  
  10. <input id="slide-2" type="radio" name="carousel">
  11. <a href="#slide_num_2" class="carousel-content">
  12. <span>Slide 2 (slide is anchor)</span>
  13. </a>
  14. <label class="control" for="slide-2"></label>
  15.  
  16. ...
  17. </div>

And no matter which element will have the class carousel-content - div, span or a.

CSS for layout.

  1. .carousel > .carousel-content {
  2. position: absolute;
  3. left: -100%;
  4. visibility: hidden;
  5. transition: .5s;
  6. }
  7. .carousel > input:checked + .carousel-content {
  8. left: 0;
  9. visibility: visible;
  10. }
  11. .carousel > input:checked + .carousel-content ~ .carousel-content {
  12. left: 100%;
  13. }

This code allows you to do all the slides on the left, current slide in the center, and everything after the current to the right.

 

Feature

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, including a vertical carousel.

Live demo
Download ZIP







Found comments - 0






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