c(ss)arousel - pure CSS carousels 🎪🐎🎪🐎🎪🐎

c-ss-arousel-pure-css-carousels.markdown

c(ss)arousel - pure CSS carousels 🎪🐎🎪🐎🎪🐎

Pure CSS "carousel"(heavy emphasis on the quotes there)

Leveraging use of how elements behave in the DOM in combination with features of CSS makes implementing a pure CSS "carousel" relatively trivial.

Read more in a blog post here Enjoy!

A Pen by Jhey on CodePen.

License.

index.pug

h3 Pure CSS carousels
.carousel-container
  h2 fade in/out
  ul.carousel.my-carousel
    - var panels = ['A', 'B', 'C', 'D', 'E']
    each val in panels
      input.carousel__activator(type="radio", id=val, name='activator' checked=(val == panels[0]))
    each val, idx in panels
      .carousel__controls
        label.carousel__control.carousel__control--backward(for=`${(idx == 0) ? panels[panels.length - 1] : panels[idx - 1]}` )
        label.carousel__control.carousel__control--forward(for= `${(idx == panels.length - 1) ? panels[0] : panels[idx + 1]}`)
    each val in panels
      li.carousel__slide
        h1= val
    .carousel__indicators
      each val in panels
        label.carousel__indicator(for=val)
.carousel-container
  h2 slider
  .carousel.my-carousel.carousel--translate
    - var panels = ['F', 'G', 'H', 'I', 'J']
    each val in panels
      input.carousel__activator(type="radio", name="carousel", id=val, checked=(val == panels[0]))
    each val, idx in panels
      .carousel__controls
        label.carousel__control.carousel__control--backward(for=`${(idx == 0) ? panels[panels.length - 1] : panels[idx - 1]}` )
        label.carousel__control.carousel__control--forward(for= `${(idx == panels.length - 1) ? panels[0] : panels[idx + 1]}`)
    .carousel__track
      each val in panels
        li.carousel__slide
          h1= val
    .carousel__indicators
      each val in panels
        label.carousel__indicator(for=val)
.carousel-container
  h2 thumbnail indicators
  ul.carousel.my-carousel.carousel--thumb
    - var panels = ['K', 'L', 'M', 'N', 'O']
    each val in panels
      input.carousel__activator(type="radio", id=val, name='thumb' checked=(val == panels[0]))
    each val, idx in panels
      .carousel__controls
        label.carousel__control.carousel__control--backward(for=`${(idx == 0) ? panels[panels.length - 1] : panels[idx - 1]}` )
        label.carousel__control.carousel__control--forward(for= `${(idx == panels.length - 1) ? panels[0] : panels[idx + 1]}`)
    each val in panels
      li.carousel__slide
        h1= val
    .carousel__indicators
      each val in panels
        label.carousel__indicator(for=val)
.carousel-container
  h2 scale
  ul.carousel.my-carousel.carousel--scale
    - var panels = ['P', 'Q', 'R', 'S', 'T']
    each val in panels
      input.carousel__activator(type="radio", id=val, name='scale' checked=(val == panels[0]))
    each val, idx in panels
      .carousel__controls
        label.carousel__control.carousel__control--backward(for=`${(idx == 0) ? panels[panels.length - 1] : panels[idx - 1]}` )
        label.carousel__control.carousel__control--forward(for= `${(idx == panels.length - 1) ? panels[0] : panels[idx + 1]}`)
    each val in panels
      li.carousel__slide
        h1= val
    .carousel__indicators
      each val in panels
        label.carousel__indicator(for=val)

style.stylus

@import url('https://fonts.googleapis.com/css?family=Roboto:900');
/**
  * style variables
*/
$noOfSlides            = 5
$carouselHeight        = 300px
$carouselWidth         = 400px
$carouselIndicatorSize = 15px
$carouselControlSize   = 30px
$slideTransition       = .5s

/**
  * Control & indicator mixin
*/
.carousel
  height     $carouselHeight
  width      $carouselWidth
  overflow   hidden
  text-align center
  position   relative
  padding    0
  list-style none

  // &__slide
  &__controls
  &__activator
    display none

  /**
  * Where the magic happens
  */
  for num in 1..$noOfSlides
    &__activator:nth-of-type({num})
      &:checked ~ .carousel__track
        transform translateX(-((num - 1) * 100%))
      &:checked ~ .carousel__slide:nth-of-type({num})
        transition opacity $slideTransition, transform $slideTransition
        top 0
        left 0
        right 0
        opacity 1
        transform scale(1)
      &:checked ~ .carousel__controls:nth-of-type({num})
        display block
        opacity 1
      &:checked ~ .carousel__indicators .carousel__indicator:nth-of-type({num})
        opacity 1

  /**
    * Control element - right/left arrows
  */
  &__control
    height       $carouselControlSize
    width        $carouselControlSize
    margin-top   -($carouselControlSize / 2)
    top          50%
    position     absolute
    display      block
    cursor       pointer
    border-width 5px 5px 0 0
    border-style solid
    border-color #fafafa
    opacity      .35
    outline      0
    z-index      3

    &:hover
      opacity 1

    &--backward
      left      10px
      transform rotate(-135deg)

    &--forward
      right     10px
      transform rotate(45deg)

  /**
    * Element for holding slide indicators
  */
  &__indicators
    position   absolute
    bottom     20px
    width      100%
    text-align center

  /**
    * Indicator for indicating active slide
  */
  &__indicator
    height        $carouselIndicatorSize
    width         $carouselIndicatorSize
    border-radius 100%
    display       inline-block
    z-index       2
    cursor        pointer
    opacity       .35
    margin        0 2.5px 0 2.5px
    &:hover
      opacity     .75

  /**
    * Create rules for when slides are contained within a track
  */
  &__track
    position absolute
    top      0
    right    0
    bottom   0
    left     0
    padding  0
    margin   0
    transition transform $slideTransition ease 0s

    .carousel__slide
      display block
      top     0
      left    0
      right   0
      opacity 1
      for num in (1..$noOfSlides)
        &:nth-of-type({num})
          transform translateX((num - 1) * 100%)

  &--scale
    .carousel__slide
      transform scale(0)

  &__slide
    height     100%
    position   absolute
    overflow-y auto
    opacity 0

/**
  * Theming
*/
*
  box-sizing border-box

html
body
   background-color #111
   font-family 'Roboto', sans-serif
   text-align       center
   color white

.carousel-container
  display       inline-block

.my-carousel
  border-radius 5px
  margin        30px

.carousel__slide
  overflow      hidden

.carousel
  &--thumb .carousel__indicator
    height 30px
    width  30px

h1
  font-size   50px
  line-height 50px
  color       #fafafa
  position    absolute
  top         50%
  width       100%
  text-align  center
  margin-top  -25px

h2
h3
  color #fafafa

h3
  font-size 50px

.carousel__indicator
  background-color #fafafa

for num in (1..$noOfSlides)
  .carousel__slide:nth-of-type({num})
  .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type({num})
    // multiply to get better quality pics
    background-image url('https://unsplash.it/' + (num * 3) + '00?random')
    background-size cover
    background-position center