section.carousel
  .carousel__inner
    .carousel__item 
      img(src='http://lorempixel.com/400/200')
    .carousel__item 
      img(src='http://lorempixel.com/400/200') 
    .carousel__item 
      img(src='http://lorempixel.com/400/200') 
    .carousel__item 
      img(src='http://lorempixel.com/400/200')  
  nav.carousel__nav 
    button.carousel__control ❮
    button.carousel__control ❯
View Compiled
body 
  padding 2rem

.carousel
  margin-left auto 
  margin-right auto
  max-width 400px
  
  &__inner
    -webkit-overflow-scrolling touch
    overflow-x auto
    white-space nowrap 
  
  &__item 
    display inline-block
    width 100%
    
    > img 
      display block
      max-width 100%
      width 100%
   
  &__control 
    background none
    border solid 1px tomato
    display inline-block 
    cursor pointer
    height 3rem 
    width @height
  
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.