CodePen Embed - Animated Carousel on CSS with Minimal JS

<body>
  <header class="main-header">
    <div class="header-wrapper">
      <div class="main-logo">MoGo</div>
      <nav>
        <ul class="main-menu">
          <li><a href="#section-2">About</a></li>
          <li><a href="#section-5">Service</a></li>
          <li><a href="#section-7">Work</a></li>
          <li><a href="#section-9">Blog</a></li>
          <li><a href="#main-footer">Contact</a></li>
          <li><a href="#"><span class="fa fa-shopping-cart"></span></a></li>
          <li><a href="#"><span class="fa fa-search"></span></a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="section-1">
    <div class="content-slider">
      <input type="radio" id="banner1" class="sec-1-input" name="banner" checked>
      <input type="radio" id="banner2" class="sec-1-input" name="banner">
      <input type="radio" id="banner3" class="sec-1-input" name="banner">
      <input type="radio" id="banner4" class="sec-1-input" name="banner">
      <div class="slider">
        <div id="top-banner-1" class="banner">
          <div class="banner-inner-wrapper">
            <h2>Creative Template</h2>
            <h1>Welcome<br>to MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#section-2">Learn More</a></div>
          </div>
        </div>
        <div id="top-banner-2" class="banner">
          <div class="banner-inner-wrapper">
            <h2>What We Do</h2>
            <h1>Great<br>MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#section-4">Learn More</a></div>
          </div>
        </div>
        <div id="top-banner-3" class="banner">
          <div class="banner-inner-wrapper">
            <h2>Here We Are</h2>
            <h1>We Are<br>MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#section-6">Learn More</a></div>
          </div>
        </div>
        <div id="top-banner-4" class="banner">
          <div class="banner-inner-wrapper">
            <h2>Our Contacts</h2>
            <h1>Welcome<br>to MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#main-footer">Learn More</a></div>
          </div>
        </div>
      </div>
      <nav>
        <div class="controls">
          <label for="banner1"><span class="progressbar"><span class="progressbar-fill"></span></span><span>01</span> Intro</label>
          <label for="banner2"><span class="progressbar"><span class="progressbar-fill"></span></span><span>02</span> Work</label>
          <label for="banner3"><span class="progressbar"><span class="progressbar-fill"></span></span><span>03</span> About</label>
          <label for="banner4"><span class="progressbar"><span class="progressbar-fill"></span></span><span>04</span> Contacts</label>
        </div>
      </nav>
    </div>
  </section>
</body>

/* General Variables */
@main-font: Montserrat, sans-serif;
@content-font: Roboto, sans-serif;
@h3-font: 'Kaushan Script', cursive;
@main-color: #fff;
@icon-color: #95e1d3;

/* General Styles */
body {
  margin: 0 auto;
  padding: 0;
  font-size: 16px;
  background: @main-color;
  section {display: block;} 
  h1, h2, h3, h4, h5, h6, ul, li {
    margin: 0;
    padding: 0;
  }
  h1 {
    font-family: @main-font;
    font-weight: 700;
    text-transform: uppercase;
  }
  h2 {
    font-family: @main-font;
    font-size: 1.875em;
    font-weight: 700;
    text-transform: uppercase;
  }
  h3 {
    font-family: @h3-font;
    font-size: 1.5em;
    font-weight: 400;
  }
  h4 {
    font-family: @main-font;
    font-size: 0.875em;
    font-weight: 400;
    text-transform: uppercase;
  }
  p {
    line-height: 150%;
    font-family: @content-font;
    font-size: 0.9375em;
    color: #999;
  }
  li {list-style-type: none;}
  a {text-decoration: none;}
}
.bg-wrapper {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8));
}
.section-header {
  padding-top: 5.625em;
  text-align: center;
  h3 {margin-bottom: 0.5em;}
  .line-red {margin: 2.5em auto 2.9375em auto;}
}
.line-red {
  display: block;
  width: 4em;
  height: 0.1875em;
  margin: 0 auto;
  background: #f38181;
}

/* Main Header Styles */
.main-header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  font-family: @main-font;
  color: @main-color;
  background: transparent;
  .header-wrapper {
    display: block;
    width: 70%;
    margin: 0 auto;
    padding-top: 1em;
    .main-logo {
      float: left;
      font-weight: 700;
      font-size: 1.875em;
    }
    .main-menu {
      float: right;
      text-align: center;
      li {
        display: inline-block;
        padding: 0.75em 1.875em;
        a {
          padding-bottom: 0.75em;
          text-transform: uppercase;
          color: @main-color;
          font-size: 0.875em;
          &:hover {
            color: #fce38a;
            border-bottom: 0.1875em solid #fce38a;
            transition: .1s;
          }
          span {font-size: 1.2em;}
        }
        &:last-child {padding: 0.75em 0;}
        &:nth-child(6) a:hover, &:last-child a:hover {border: none;}
      }
    }
  }
}

/* Section-1 Styles */
#section-1 {
  height: 38em;
  color: @main-color;
  background-color: #222;
  .content-slider {
    position: relative;
    width: 100%;
    height: 100%;
    input {display: none;}
    .slider {
      position: relative;
      width: inherit;
      height: inherit;
      overflow: hidden;
      .banner {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 0;
        width: inherit;
        height: inherit;
        text-align: center;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        transition: all .5s ease;
        .banner-inner-wrapper {
          height: 100%;
          padding-top: 6em;
          background-image: linear-gradient(rgba(243,129,129,.9), rgba(252,227,138,.9));
          box-sizing: border-box;
          h2 {
            padding-bottom: 0.3em;
            font-family: @h3-font;
            font-weight: 400;
            font-size: 2.5em;
            text-transform: none;
          }
          h1 {
            font-size: 6em;
            line-height: 95%;
          }
          .line {
              display: block;
              width: 4em;
              height: 0.1875em;
              margin: 2.5em auto;
              background: @main-color;
          }
          .learn-more-button {
            padding-bottom: 5em;
            z-index: 15 !important;
            a {
              padding: 0.5em 2em;
              text-align: center;
              font-family: @main-font;
              font-size: 0.875em;
              color: @main-color;
              text-transform: uppercase;
              border: 0.1875em solid @main-color;
              &:hover {
                color: #e88382;
                border-color: #e88382;
                transition: .3s;
              }
            }
          }
        }
      }
      #top-banner-1 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-1.png') no-repeat center center; background-size: cover;}
      #top-banner-2 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-2.png') no-repeat center center; background-size: cover;}
      #top-banner-3 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-3.png') no-repeat center center; background-size: cover;}
      #top-banner-4 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-4.png') no-repeat center center; background-size: cover;}
    }
    nav {
      position: absolute;
      bottom: 0.5em;
      width: 100%;
      z-index: 10;
      text-align: center;
      .controls {
        display: block;
        width: 70%;
        margin: 0 auto;
        font-family: @main-font;
        color: @main-color;
        label {
          position: relative;
          display: inline-block;
          width: 20%;
          height: 3.1em;
          overflow: hidden;
          margin: 0 1em;
          padding-top: 1em;
          text-align: left;
          text-transform: uppercase;
          font-family: @main-font;
          font-size: 1em;
          color: #f6eac5;
          font-weight: 400;
          cursor: pointer;
          transition: all .3s;
          .progressbar {
            position: absolute;
            top: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: #f6eac5;
            z-index: 100;
            .progressbar-fill {
              position: inherit;
              width: inherit;
              height: inherit;
              margin-left: -100%;
              background: #e88382;
            }
          }
          span {
            font-size: 1.4em;
            font-weight: 700;
          }
          &:hover {color: #e88382;}
        }
      }
    }
    #banner1:checked ~ .slider #top-banner-1,
    #banner2:checked ~ .slider #top-banner-2,
    #banner3:checked ~ .slider #top-banner-3,
    #banner4:checked ~ .slider #top-banner-4 {
      opacity: 1;
      z-index: 1;
    }
    #banner1:checked ~ nav label:nth-of-type(1),
    #banner2:checked ~ nav label:nth-of-type(2),
    #banner3:checked ~ nav label:nth-of-type(3),
    #banner4:checked ~ nav label:nth-of-type(4) {
      cursor: default;
      color: @main-color;
      transition: all .5s;
    }
    #banner1:checked ~ nav label:nth-of-type(1) .progressbar,
    #banner2:checked ~ nav label:nth-of-type(2) .progressbar,
    #banner3:checked ~ nav label:nth-of-type(3) .progressbar,
    #banner4:checked ~ nav label:nth-of-type(4) .progressbar {
      background: @main-color;
    }
    #banner1:checked ~ nav label:nth-of-type(1) .progressbar-fill,
    #banner2:checked ~ nav label:nth-of-type(2) .progressbar-fill,
    #banner3:checked ~ nav label:nth-of-type(3) .progressbar-fill,
    #banner4:checked ~ nav label:nth-of-type(4) .progressbar-fill {
      animation: progressBarFill 5s linear;
    }
  }
}

/* Animations */
@keyframes progressBarFill {
  from {margin-left: -100%;}
  to {margin-left: 0;}
}

/* Media Queries */
@media only screen and (min-width: 1920px) {
  body {font-size: 22px;}
  .main-header .header-wrapper {width: 57%;}
  #section-1 {height: 46em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 12em;}
}

@media only screen and (max-width: 1919px) {
  body {font-size: 20px;}
  .main-header .header-wrapper {width: 60%;}
  #section-1 {height: 43em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 11em;}
}

@media only screen and (max-width: 1680px) {
  body {font-size: 18px;}
  .main-header .header-wrapper {width: 65%;}
  #section-1 {height: 40em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 9em;}
}

@media only screen and (max-width: 1366px) {
  body {font-size: 16px;}
  .main-header .header-wrapper {width: 70%;}
}

@media only screen and (max-width: 1120px) {
  .main-header .header-wrapper .main-menu li {padding: 0.75em 1.4em;}
  #section-1 {height: 35em;}
  #section-1 .content-slider nav {bottom: -0.2em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 7em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper .line {margin: 2em auto;}
}

@media only screen and (max-width: 1024px) {
  body {font-size: 14px;}
  .main-header .header-wrapper .main-menu li {padding: 0.75em 1.3em;}
  #section-1 .content-slider nav {bottom: 0;}
  #section-1 .content-slider nav .controls {width: 80%;}
}

@media only screen and (max-width: 860px) {
  .main-header .header-wrapper .main-menu li {padding: 0.75em 0.9em;}
  #section-1 {height: 29em;}
  #section-1 .content-slider nav {bottom: -1em;}
  #section-1 .content-slider nav .controls {width: 90%;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper h2 {font-size: 2em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper h1 {font-size: 4.5em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 5em;}
}

@media only screen and (max-width: 768px) {
  .main-header .header-wrapper .main-menu li {padding: 0.75em 0.5em;}
  #section-1 {height: 27em;}
  #section-1 .content-slider nav .controls {width: 100%;}
  #section-1 .content-slider nav .controls label {width: 19%; font-size: 0.8em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper .line {margin: 1.7em auto;}
}

@media only screen and (max-width: 650px) {.main-header .header-wrapper {width: 95%;}}

@media only screen and (max-width: 480px) {
  .main-header .header-wrapper {width: 97%;}
  .main-header .header-wrapper .main-logo {display: none;}
  .main-header .header-wrapper .main-menu li {padding: 0.2em 0.3em;}
  .main-header .header-wrapper .main-menu li:last-child,
  .main-header .header-wrapper .main-menu li:nth-child(6) {padding: 0.2em 0.7em;}
  #section-1 {height: 26em;}
  #section-1 .content-slider nav {bottom: -0.5em;}
  #section-1 .content-slider nav .controls label {width: 40%; font-size: 0.7em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper h2 {font-size: 1.5em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper h1 {font-size: 3em;}
  #section-1 .content-slider .slider .banner .banner-inner-wrapper .line {margin: 1.7em auto;}
}

View Compiled

///// Section-1 CSS-Slider /////    
  // Auto Switching Images for CSS-Slider
  function bannerSwitcher() {
    next = $('.sec-1-input').filter(':checked').next('.sec-1-input');
    if (next.length) next.prop('checked', true);
    else $('.sec-1-input').first().prop('checked', true);
  }

  var bannerTimer = setInterval(bannerSwitcher, 5000);

  $('nav .controls label').click(function() {
    clearInterval(bannerTimer);
    bannerTimer = setInterval(bannerSwitcher, 5000)
  });


///// Anchor Smooth Scroll /////
//   $('.main-menu a, .learn-more-button a').click(function(e){
    
//     e.preventDefault();
        
//     var target = $(this).attr('href');
        
//     $('html, body').animate({scrollTop: $(target).offset().top}, 1000);
//     return false;
//   });

This Pen is owned by Max Konoval on CodePen.

See more by @frontendmax on CodePen

External CSS

https://dl.dropboxusercontent.com/u/69747888/MoGo%20carousel/font-awesome.min.css

External CSS

External JavaScript