div(class="slides-container")
  button(class="btn btn__absolute btn__prev btn--muted") Back
  button(class="btn btn__absolute btn__next btn--highlighted") Next
  section(class="slide slide-1")
    article(class="slide__inner slide--left")
      .container.container--slide-1
        .container__logo
          i.material-icons trending_up
        .container__stripe.container__stripe--long
        .container__stripe.container__stripe--short
    article(class="slide__inner slide--right")
      h1 Challenges
      p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, aut accusantium modi incidunt, odit voluptatem tempora alias!
  section(class="slide slide-2")
    article(class="slide__inner slide--left")
      .card.card--profile
        .card__logo.card--profile__logo
          i(class="material-icons") person
        .card__info.card--profile__info
          h5.card__info__name.card--profile__info__name Kevin Badge
          .card__data.card--profile__data
            .card__data__stats.card--profile__data__stats 
              i(class="material-icons") work
              span 413
            .card__data__stats.card--profile__data__stats
              i(class="material-icons") home
              span 221
            .card__data__stats.card--profile__data__stats
              span Admin
      .card.card--profile.profile--pink
        .card__logo.card--profile__logo
          i(class="material-icons") person
        .card__info.card--profile__info
          h5.card__info__name.card--profile__info__name Billy Bob
          .card__data.card--profile__data
            .card__data__stats.card--profile__data__stats 
              i(class="material-icons") work
              span 13
            .card__data__stats.card--profile__data__stats
              i(class="material-icons") home
              span 21
            .card__data__stats.card--profile__data__stats
              span Developer
      .card.card--profile.profile--yellow
        .card__logo.card--profile__logo
          i(class="material-icons") person
        .card__info.card--profile__info
          h5.card__info__name.card--profile__info__name Kate Mate
          .card__data.card--profile__data
            .card__data__stats.card--profile__data__stats 
              i(class="material-icons") work
              span 13
            .card__data__stats.card--profile__data__stats
              i(class="material-icons") home
              span 21
            .card__data__stats.card--profile__data__stats
              span CTO
    article(class="slide__inner slide--right")
      h1 Peers
      p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, aut accusantium modi incidunt, odit voluptatem tempora!
  section(class="slide slide-3")
    article(class="slide__inner slide--left")
      .container.container--slide-3
        header.header--slide-3
          nav.header__nav
            .header__nav__logo 
              p LOGO
            .header__nav__cta Lorem
          .header__hero
            .header__hero__table
            .header__hero__chair
        main.main--slide-3
          section.section--about
            h5 About
            .section__stripe
            .section__stripe
          section.section--testimonials
            .section__logo
              i(class="material-icons") person
            .section__info
              .section__stripe.section__info__stripe
              .section__stripe.section__info__stripe
    article(class="slide__inner slide--right")
      h1 Landing page
      p  Lorem ipsum dolor sit amet, consectetur adipisig elit. Dicta, aut accusantium modi incidunt, voluptatem tempora alias similique!
  section(class="slide slide-4")
    article(class="slide__inner slide--left")
      .card.card--store
        .card__logo
          i(class="material-icons") mic
        .card__info
          h5.card__info__name.store__info Microphones
          .card__data 
            p.card__data__supplier James
            p.card__data__callout Grab it soon...
        .card__price
          p.card__price__price € 15.95
          button(class="btn btn__storage btn--active") Buy
          p.card__price__storage 12 left
      .card.card--store
        .card__logo
          i(class="material-icons") laptop
        .card__info
          h5.card__info__name.store__info Computers
          .card__data 
            p.card__data__supplier James
            p.card__data__callout Grab it soon...
        .card__price
          p.card__price__price € 315
          button(class="btn btn__storage btn--active") Buy
          p.card__price__storage 9 left
      .card.card--store
        .card__logo
          i(class="material-icons") phone_iphone
        .card__info
          h5.card__info__name.store__info Mobile phones
          .card__data 
            p.card__data__supplier James
            p.card__data__callout Grab it soon...
        .card__price
          p.card__price__price € 215
          button(class="btn btn__storage btn--active") Buy
          p.card__price__storage 4 left
      
    article(class="slide__inner slide--right")
      h1 Store
      p  Lorem ipsum dolor sit amet, consectetur adipisig elit. Dicta, aut accusantium modi incidunt, voluptatem tempora alias similique!
section(class="pagination") 
      
    
  
View Compiled
@import 'https://fonts.googleapis.com/css?family=Open+Sans'
//mixins
@mixin vertical-align($position: relative)
  position: $position
  top: 50%
  transform: translateY(-50%)
// apply a natural box layout model to all elements, but allowing components to change 
html
  box-sizing: border-box
  -webkit-font-smoothing: antialiased
*, *:before, *:after 
  box-sizing: inherit
//styles for slide container unit
.slides-container
  position: relative
  width: 800px
  height: 450px
  margin: 50px auto
  font-family: 'Open Sans', sans-serif
  border: 1px solid #eee
  box-shadow: 0px 0px 15px 1px rgba(235,235,235,1)
//Basic layout styles for a slide
.slide
  position: absolute
  top: 0
  bottom: 0
  right: 0
  left: 0
//style for a half of a style
.slide__inner
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  height: 100%
  width: 50%
  float: left
//left side styles
.slide--left
  background: #eee
//right side styles
.slide--right
  position: relative
  background: #fff
  padding: 3%
  animation: fadeUp 1s forwards
  h1
    width: 100%
    margin-bottom: 5px
    font-weight: 400
    font-size: 24px
    text-align: left
    letter-spacing: 0.4px
  p
    font-size: 14px
    color: #666
    line-height: 1.8
//styles for buttons 
.btn
  height: 30px
  width: 60px
  font-weight: 400
  letter-spacing: 0.6px
  border-radius: 5px
  border: 0
  outline: none
.btn__absolute
  position: absolute
  z-index: 10
//active button for next
.btn--highlighted
  bottom: 40px
  right: 60px
  background-color: #10a5de
  color: #fff
//muted button for previous
.btn--muted
  bottom: 40px
  right: 120px
  background-color: transparent
  color: #ddd
//container unit for pagination dots
.pagination
  height: 10px
  max-width: 140px
  display: flex
  justify-content: center
  margin: 0 auto
  clear: both
.paginationDot
  width: 10px
  height: 10px
  margin: 0 3px
  border: 2px solid #ddd
  border-radius: 50%
  transition: 0.4s all
.paginationDot--active
  background: #10a5de
  border-color: #10a5de

//First slide's slide--left styles
.slide-1 .slide--left
  background: rgba(117,208,205,1)
.container
  height: 250px
  width: 200px
  background: white
.container__logo
  display: flex
  justify-content: center
  align-items: center
  width: 130px
  height: 130px
  margin: 30px auto
  border-radius: 50%
  background: rgba(117,208,205,1)
  box-shadow: 0px 0px 0px 5px rgba(229,229,229,1)
  animation: 0.8s bounceUp forwards
  .material-icons
    font-size: 72px
    color: rgba(255,255,255,0.8)
    animation: 0.6s bounceUpOnce 0s forwards
.container__stripe, .section__stripe
  height: 10px
  margin: 13px auto
  border-radius: 10px
  background: rgba(229,229,229,1)
.container__stripe--long
  width: 0
  animation: 0.3s growRightLong 0.7s forwards
.container__stripe--short
  width: 0
  animation: 0.3s growRightShort 0.7s forwards
    
//Second slide slide--left styles
.slide-2 .slide--left
  background: rgba(131,206,219,1)
.card
  height: 76px
  width: 80%
  padding: 5px
  margin: 6px 0
  border-radius: 3px
  background: white
  > *
    float: left
.card--profile  
  &:nth-child(2)
    animation-delay: 0.3s
  &:last-child
    animation-delay: 0.6s
.card--profile
  box-shadow: -5px 5px 0px 0px rgba(235,235,235,0.4)
  opacity: 0
  animation: fadeRight 1s forwards
.profile--yellow .card--profile__logo
  background: rgba(239,226,176,1)
.profile--pink .card--profile__logo
  background: rgba(200,191,231,1)
.card__logo, .section__logo
  width: 21%
  background: rgba(131,206,219,1)
  text-align: center
  border-radius: 4px
  height: 100%
  i
    color: rgba(255,255,255,0.7)
    font-size: 62px
    padding: 0
    margin: 0
.card__logo i
  @include vertical-align()
.card__info, .section__info
  width: 79%
  padding: 2%
.card__info__name
  margin: 6px 0 2px
  letter-spacing: 0.5px
  color: rgba(44,168,218,1)
.card__data__stats
  display: inline-block
  margin-right: 5px
  i, span
    font-size: 12px
    margin-right: 2px
  i
    color: #444
  span
    color: #777
//Third slide styles
.slide-3 .slide--left
  background: rgba(131,206,219,1)
.container--slide-3
  width: 80%
  height: 90%
  animation: fadeUp 0.3s forwards
  overflow: hidden
.header--slide-3
  height: 50%
  animation: .5s slideInRight forwards
.header__nav
  position: relative
  height: 50px
.header__nav__logo
  position: absolute
  z-index: 10
  top: 15%
  left: 20px
  width: 20%
  height: 70px
  border-radius: 6px
  background: rgba(247,123,131,1)
  p
    font-weight: 600
    color: white
    text-align: center
    font-size: 14px
    line-height: 70px
    letter-spacing: 1px
    margin: 0
.header__nav__cta
  position: absolute
  top: 15%
  right: 20px
  width: 15%
  padding: 2px 7px
  border-radius: 4px
  background: rgba(77,198,132,1)
  color: white
  font-size: 11px
.header__hero
  position: relative
  overflow: hidden
  height: 75%
  background: rgba(231,239,247,1)
.header__hero__table
  position: absolute
  z-index: 20
  bottom: -5%
  left: 0
  right: 0
  height: 40%
  transform: rotate(-2deg)
  background: rgba(214,222,222,1)
.header__hero__chair
  position: absolute
  bottom: 30%
  right: 20%
  width: 40%
  height: 40%
  transform: rotate(-2deg)
  border-radius: 5px
  box-shadow: -5px -5px 0px 0px rgba(247,247,247,1)
  background: rgba(239,239,239,1)
.section--about
  padding: 0 5%
  margin-bottom: 20px
  transform: translateX(100%)
  animation: .5s slideInLeft 0.2s forwards
  .section__stripe:last-child
    width: 40%
    margin: 0
  h5
    font-size: 12px
    margin: 10px 0 0
.section--testimonials
  padding: 2% 5%
  clear: both
  transform: translateX(-100%)
  animation: .5s slideInRight 0.4s forwards
  > *
    float: left
.section__logo
  border-radius: 10px
.section__info
  padding: 0 5%
.section__info__stripe:last-child
  width: 70%
  margin: 0
  
//Fourth slide styles
.slide-4 .slide--left
  background: rgba(117,208,205,1)
.card--store
  animation: 1.5s fadeRight forwards
.card--store .card__logo i
  font-size: 36px
  color: #666
.card--store .card__info
  width: 55%
.store__info
  margin: 0
  color: #333
.card--store .card__data
  width: 60%
.card__data__supplier, .card__data__callout
  margin: 0
  padding: 0
  font-size: 11px
.card__data__supplier
  color: #d6d6d6
.card__price
  position: relative
  float: left
  width: 24%
  background: rgba(231,255,247,1)
.card__price__price
  font-size: 13px
  margin: 15px 0 0
  padding: 0
  color: #333
  font-weight: 600
  text-align: center
.card__price__storage
  position: absolute
  right: -10px
  top: -10px
  width: 35px
  height: 15px
  background: #000
  color: white
  font-size: 10px
  text-align: center
.btn__storage
  height: 24px
  margin: 5px auto
  color: white
  background: rgba(77,198,132,1)
  display: block
//keyframes for different onload animations
@keyframes fadeUp
  0%
    opacity: 0
    transform: translateY(10px)
  100%
    opacity: 1
    transform: translateY(00)
@keyframes bounceUp
  0%
    transform: translateY(100%)
  60%
    transform: translateY(-18%)
  70%
    transform: translateY(8%)
  85%
    transform: translateY(-6%)
  100%
    transform: translateY(0%)
@keyframes bounceUpOnce
  0%
    transform: translateY(0%)
  35%
    transform: translateY(45%)
  70%
    transform: translateY(-16%)
  90%
    transform: translateY(10%)
  100%
    transform: translateY(0%)
@keyframes growRightLong
  from
    width: 0%
  to
    width: 60%
@keyframes growRightShort
  from
    width: 0%
  to
    width: 35%
@keyframes fadeRight
  0%
    opacity: 0
    transform: translateX(-30%)
  50%
    transform: translateX(0%)
  100%
    opacity: 1
@keyframes slideInRight
  0%
    transform: translateX(-100%)
  100%
    transform: translateX(0%)
  
@keyframes slideInLeft
  0%
    transform: translateX(100%)
  100%
    transform: translateX(0%)
    
  
      
    
View Compiled
$(document).ready(function(){
  //basic variables for slide information
  var currentIndex = 0, //first slide
  slides = $('.slide'),
  slidesLength = slides.length; //how many slides
  $('.btn__prev').hide(); //hide previous button
  createDots(slidesLength); //funtion for creating pagination dots
  function cycleSlides(current) { //function which handles slide traversing
    var slide = $('.slide').eq(current);
    slides.hide();
    slide.show();
  }
  function markDots(position){  //function to add active class to active dot
    $('.paginationDot').removeClass('paginationDot--active');
    $('.paginationDot:nth-child(' + position + ')').addClass('paginationDot--active');
  }
  markDots(1);  //add active class to the first dot
  cycleSlides(currentIndex);
  $('.btn__next').on('click', function(){ //function for 'next' button
    $('.btn__prev').show(); //show the previous button
    currentIndex += 1 //increment the value of current slide
    cycleSlides(currentIndex);  //call slide handle function
    if(currentIndex > slidesLength-2){  //if it second to last slide show 'done' instead of 'next'
      $('.btn__next').html('Done');
      $('.btn__next').attr("disabled", true);
    } else{
      $('.btn__next').attr("disabled", false);
    }
    cycleSlides(currentIndex);
    markDots(currentIndex+1);
  });
 $('.btn__prev').on('click', function(){  //function for previous slide
   $('.btn__next').attr("disabled", false);
   currentIndex -= 1;
   if(currentIndex <= 0){
     $('.btn__prev').hide();
   } 
   else if(currentIndex >= slidesLength -2){
     $('.btn__next').html('Next');
   }
   cycleSlides(currentIndex);
   markDots(currentIndex+1);
 })
});
function createDots(length){  //function to create pagination dots
    for(i=0;i<=length-1;i++){
      $('.pagination').append('<div class="paginationDot"></div>');
    }
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js