CSS3 Slider Carousel

css3-slider-carousel.markdown

CSS3 Slider Carousel

A Pen by Renato Francia Castillo on CodePen.

License.

index.pug

// Inpired By: https://codepen.io/SaraSoueidan/pen/CyFbd 
.container
  .slider
    input(type="radio" name="slider" id="i1" checked)
    input(type="radio" name="slider" id="i2")
    input(type="radio" name="slider" id="i3")
      
    .slide#one
      img( src="https://avatars1.githubusercontent.com/u/6486733?s=460&v=4" alt="slider Image")
      h2 Renato Francia
      h6 Software Developer 
      blockquote Lorem sed do eiusmod tempor incididunt ut laboresed do eiusmod tempor incididunt ut labore
   
    .slide#two
      img( src="https://avatars1.githubusercontent.com/u/6486733?s=460&v=4" alt="slider Image")
      h2 Nacho 1
      h6 Software Developer 
      blockquote Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboresed do, sed do eiusmod tempor incididunt ut laboresed do eiusmod tempor incididunt ut labore
    
    .slide#three
      img( src="https://avatars1.githubusercontent.com/u/6486733?s=460&v=4" alt="slider Image")
      h2 Nacho 2
      h6 Software Developer 
      blockquote Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboresed do eiusmlaboreorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboresed do eiusmod tempor incididunt ut labore
    
    .selectors
      label(for="i1" class="slider-selector" id="s1")
      label(for="i2" class="slider-selector" id="s2")
      label(for="i3" class="slider-selector" id="s3")

style.sass

$primary: #FDA001
$grey: #333333
$white: #FFFFFF

@import url(https://fonts.googleapis.com/css?family=Open+Sans)
 
// Slider
.slider
  display: grid  
  min-height: 100vh
  align-items: center
  justify-content: center
  background: rgba(0,0,0,0.9)
  font-family: "Open Sans"
  
  #i1, #i2, #i3
    display: none
    
  #one, #two, #three
    display: none
    transition: 1s linear all
    animation: fadein 1s ease-in-out
    
  #i1:checked ~ #one
    display: flex
    
  #i2:checked ~ #two
    display: flex
  
  #i3:checked ~ #three
    display: flex
    
  #i1:checked ~ .selectors #s1
    background: $primary
  
  #i2:checked ~ .selectors #s2
    background: $primary
    
  #i3:checked ~ .selectors #s3
    background: $primary
    
  .selectors
    display: flex
    width: 50vw
    height: 15px
    margin-top: 35px
    justify-content: space-around
    
    label.slider-selector
      height: 10px
      background: white
      transition: .25s linear all
      cursor: pointer
      
      &:hover
        background: $primary
      
      
      @for $i from 1 through 6 
          &
            width: 100%/$i
        
  .slide
    display: flex
    width: 50vw
    padding: 15px
    flex-direction: column
    text-align: center
    
    img
      width: 40%
      margin: 0 auto
      border-radius: 50%
      
    h2
      color: $primary
      font-size: 24px
      font-weight: 600
      
    h6
      color: lighten($grey, 20)
      
    blockquote
      margin-top: 5px
      color: $white
      line-height: 2rem
      
@keyframes fadein
  0% 
    opacity: 0.2
  100%
    opacity: 1

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet" />