A Pen by bloodyKnuckles.

index.html

<!--
 Copyright 2014 by Intellectual Reserve, Inc.

 Licensed under the Apache License, Version 2.0
 http://www.apache.org/licenses/LICENSE-2.0
 
 Author:        Adam Carson
 Dependencies:  None
 
 Name: [no name]
 Description: 
 Options: 
 -->

<div class="banner__wrapper">
    <span class="banner__nav left js-banner__left"></span>
    <div class="banner">
      <div class="banner__bulg">
        <ul class="banner__slides">
          <li class="banner__slide js-banner__slide">
            <a href="#d">
              <figure class="banner__slide--image-frame">
                <img src="http://placekitten.com/600/400" alt="kitten"/>
                <figcaption class="banner__slide--info">
                  <h2>Kitten Love</h2>
                  <h3>Domestic<span>0-6 months</span></h3>
                  <span>Reserve</span>
                </figcaption>
              </figure>
            </a>
          </li>
          <li class="banner__slide js-banner__slide">
            <a href="#d">
              <figure class="banner__slide--image-frame">
                <img src="http://placekitten.com/700/350" alt="kitten"/>
                <figcaption class="banner__slide--info">
                  <h2>Kitten Love</h2>
                  <h3>Farm Raised<span>0-18 months</span></h3>
                  <span>Reserve</span>
                </figcaption>
              </figure>
            </a>
          </li>
          <li class="banner__slide js-banner__slide">
            <a href="#d">
              <figure class="banner__slide--image-frame">
                <img src="http://placekitten.com/800/500" alt="kitten"/>
                <figcaption class="banner__slide--info">
                  <h2>Kitten Love</h2>
                  <h3>Foreign<span>0-12 months</span></h3>
                  <span>Reserve</span>
                </figcaption>
              </figure>
            </a>
          </li>
          <li class="banner__slide js-banner__slide">
            <a href="#d">
              <figure class="banner__slide--image-frame">
                <img src="http://placekitten.com/400/200" alt="kitten"/>
                <figcaption class="banner__slide--info">
                  <h2>Kitten Love</h2>
                  <h3>Fun<span>All ages</span></h3>
                  <span>Reserve</span>
                </figcaption>
              </figure>
            </a>
          </li>
        </ul><!-- end .banner__slides -->
      </div><!-- end .banner__bulg -->
    </div><!-- end .banner -->
    <span class="banner__nav right js-banner__right"></span>
    <ul class="banner__position"></ul>
  </div><!-- end .banner-wrapper -->

  <div class="notice">
    <p class="version">Plain JS version (no jQuery) and mostly complete. CSS transitions for fade effects.</p>
  </div>

Responsive-Bulged-Carousel-(Pure-JS).markdown

Responsive Bulged Carousel [With Labels] (Pure JS)

Copyright 2014 by Intellectual Reserve, Inc.

Licensed under the Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0

Author: Adam Carson Dependencies: None

Name: [no name] Description: Options:

A Pen by bloodyKnuckles on CodePen.

License.

Added labels to the carousel navigation.

script.js

/*
 * Copyright 2014 by Intellectual Reserve, Inc.
 *
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Author:        Adam Carson
 * Dependencies:  None
 *
 * Name: [no name]
 * Description: 
 * Options: 
 */

// CSS transition on class change.

// No jQuery.

var BANNER = {};

BANNER.num = 0;
BANNER.timer;
BANNER.pause = false;

BANNER.slides_list = document.getElementsByClassName('js-banner__slide');
BANNER.slides = [];

BANNER.positions_list;
BANNER.positions = [];
BANNER.position = 0;
BANNER.position_of = function(obj) {
  var all_children = this.parentNode.childNodes;
  var index = 0;
  for (var i = 0; i < all_children.length; i++) {
    index = i;
    if (this === all_children[i]) {
      break;
    }
  }
  BANNER.position = index;
  BANNER.change('manual');
};

// CHANGE BANNER
BANNER.change = function(value) {
  BANNER.slides[BANNER.num].className = BANNER.slides[BANNER.num].className.replace(/(?:^|\s)active(?!\S)/g,'');
  BANNER.positions[BANNER.num].className = '';
  if (BANNER.num + value > BANNER.slides.length - 1) {
    BANNER.num = 0;
  } else if (BANNER.num + value < 0) {
    BANNER.num = BANNER.slides.length -1;
  } else if (value === 'manual') {
    BANNER.num = BANNER.position;
  } else {
    BANNER.num += value;
  }
  BANNER.slides[BANNER.num].className += ' active';
  BANNER.positions[BANNER.num].className = 'active';
};
// 
// INITIALIZE
BANNER.init = function() {
  for (var i = 0; i < BANNER.slides_list.length; i++) {
    BANNER.slides[i] = BANNER.slides_list[i];
    var label = BANNER.slides[i].getElementsByTagName('h3')[0].firstChild.nodeValue;
    var li_new = document.createElement('li');
    li_new.innerHTML = label;
    document.getElementsByClassName('banner__position')[0].appendChild(li_new);
  }
  BANNER.slides[0].className += ' active';
  BANNER.positions_list = document.getElementsByClassName('banner__position')[0].children;
  for (var i = 0; i < BANNER.slides.length; i++) {
    BANNER.positions[i] = BANNER.positions_list[i];
  }
  BANNER.positions[0].className = 'active';
  for (var i = 0; i < BANNER.positions.length; i++) {
    BANNER.positions[i].addEventListener('click', BANNER.position_of, false);
  }
  BANNER.timer = setInterval(function() {
    if(!BANNER.pause) {
      BANNER.change(1);
    }
  }, 5000);
  document.getElementsByClassName('banner__wrapper')[0].onmouseover = function() {
    BANNER.pause = true;
  };
  document.getElementsByClassName('banner__wrapper')[0].onmouseout = function() {
    BANNER.pause = false;
  };
  document.getElementsByClassName('js-banner__left')[0].onclick = function() {
    BANNER.change(-1);
  };
  document.getElementsByClassName('js-banner__right')[0].onclick = function() {
    BANNER.change(1);
  };
};

BANNER.init();

style.css

/*
 * Copyright 2014 by Intellectual Reserve, Inc.
*
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Author:        Adam Carson
 * Dependencies:  None
 *
 * Name: [no name]
 * Description: 
 * Options: 
 */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { width: 100%; max-width: 960px; margin: 25px auto; background: #d6c17c; }

.notice {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 5px;
  width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: sans-serif;
  font-size: 12px;
  background: rgba(168,132,95,0.75);
}
.version {
  float: left;
  margin: 0;
}
.info {
  float: right;
  margin: 0;
}

.banner__wrapper {
  position: relative;
  height: 250px;
  margin-top: 75px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;   
}
.banner__nav {
  position: absolute;
  z-index: 1;
  display: block;
  width: 50px;
  height: 50px;
  margin: 15px 0 0;
  background: #fff;
  cursor: pointer;
  opacity: 0.25;
}
.banner__nav.left {
  left: 0;
}
.banner__nav.left:before {
  content: "";
  position: inherit;
  width: inherit;
  height: inherit;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVCAYAAAByrA+0AAABrElEQVQ4EY1TW0sCQRg9u2zrGl0eykLoalFGEhJZDxYRIYSP0b/sqR6C6iEJs8A0km4PGlhExHaTInULa74vdmjbLn4P38ycOefMNze81xFXF/l3q1phpop/olg4xl5iFamtFQgF/hQQOZPaYMv2zm6Uy2Vovy2QSyeQPzvgaZ+/Fz0DIWia9rMgk1pHsXDCZK1BR2h8lsm6rrtL+komxaggN+geGIbxacBZpFeritx+QjoTTmV0iHKIrCgKU3kPRN7eWEbpwWSQktHYhIHgOKgMqt0OPqXvZJoMT8WgewwW2GRq1dK96XAmMCCcm1vb4PV6ZSmEU6i0oe/xVLpjZ1V1X5Pa2NSCnsCIQ2NeF3F5furA7AFbTEQX0NU3bGPcnhzuoPR458BoINecnIljLDInCW+vFrK7m6jVahJzCGgwGAyL05mXhIfbaxxlk3JMHbmCjQaGxhyi/GkG5s2VPe0W0AyJItNx0DuiSCfXUK2Uue9agVGRuvuHEZ1fZFHl5RlHB8n//0Obz4+Z2BKL6PlYlgWF/p3t+lv7/PQIKOIviDdVl4CM6Hjp5j8ANui6S6qLlboAAAAASUVORK5CYII=) no-repeat center center;
}
.banner__nav.right {
  right: 0;
}
.banner__nav.right:before {
  content: "";
  position: inherit;
  width: inherit;
  height: inherit;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVCAYAAAByrA+0AAABpklEQVQ4EY2TTUsCURSGX4dx1CjUSkIignKRJoaZi0zCTQbt+4ntol0SSF+YC7NEwihDrayQMolKchwHbc4FL4xWdhZ3zsfz3nvmzhlDR7N2uw1BEPAfE2VZhqqqQEfF8IhtoEYwGAzInR/hYHcLb7XnwQJJkmCUTFBbChLxbdSqlT9F7ASvPwzz0DATJfd38HCb/1XE3tRktiAY3mAQnZQ+iaF0c/GjiF+NY2ISLneAQ9nU/o8iLiDSuxiGfdypExWuszwmRyegb7G4vAbRKHHoIn2I00SMxzoBZa22MXgWVjhAzuNdHmfJPZbrE1B2asYNh3OaAd2lXLrCV/1D3xIVaUwURcGIdazL8mdLaeoF2lih0Wjg872G0nWGg+RY7Q5YRx16Ae2sNGVkU/E+eDW6yXJit0IDSIKitrP8Ve+mMT3rgW8pwsaHkkxArdDUvlTuUS7mdHAgtM5jctgtEUwvdJk55kXauRemokhtUDs5DaY5InPN+eELRpjfu4gEUxtVrR2yQCiq9T3fy/FYsFgseH1+YIlBMIPon9ausvNULpA70L4BOEvU+9VaFC4AAAAASUVORK5CYII=) no-repeat center center;
}
.banner__nav.left:hover,
.banner__nav.right:hover {
  opacity: 1;
}
.banner__slides {
  list-style-type: none;
  padding: 0;
}
.banner__slide {
  position: absolute;
}
.banner__slide--image-frame {
  margin: 0;
}
.banner__slide--image-frame img {
  width: 100%;
  min-height: 100%;
  max-height: 100%;
}
.banner__slide--info {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  padding: 0 100px;
  text-align: right;
  color: #fff;
  text-shadow: 0 0 10px #000;
}
.banner__slide--info h2 {
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.banner__slide--info h3 {
  margin-top: 25%;
  font-size: 32px;
  font-weight: normal;
}
.banner__slide--info h3 span {
  display: block;
  margin-top: 0.5em;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.5em;
}
.banner__slide--info > span {
  padding: 8px 15px;
  border: none;
  border-top: 1px solid #826b42;
  border-bottom: 3px solid #735a32;
  background: #594018;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}
.banner__position {
  display: none;
}

/* ANIMATIONS */
.banner__slides {
  /* Prevents white flash on transition of slides */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.js-banner__slide {
  opacity: 0;
  
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.js-banner__slide.active {
  opacity: 0.9999; /* CSS3 transition doesn't keep image in rounded frame of opacity is 1. */
}

@media (min-width: 500px) {
  .banner__wrapper {
    height: 300px;
    margin-top: 50px;
  }
}

@media (min-width: 600px) {
  .banner__wrapper {
    width: 100%;
    max-width: 960px;
    height: 400px;
  }
  .banner__wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 100%;
    border-radius: 45%;
    box-shadow: 0 0 25px 0 #888;
  }
  .banner__nav {
    top: 50%;
    margin-top: -36px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }
  .banner__nav.left {
    left: -25px;
    box-shadow: -15px 10px 25px -15px #888,
    inset 36px 0 36px -20px #f8f8f8;
  }
  .banner__nav.right {
    right: -25px;
    box-shadow: 15px 10px 25px -15px #888,
    inset -36px 0 36px -20px #f8f8f8;
  }
  .banner__nav.left:hover,
  .banner__nav.right:hover {
    background: #fff;
    box-shadow: none;
  }
  .banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .banner__bulg {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -100%;
    width: 200%;
    max-width: 1920px;
    height: 380px;
    border-radius: 50%;
    border: 2px solid #e8e8e8;
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
  }
  .banner__bulg:before {
    content: "";
    position: absolute;
    top: 22px;
    left: 50%;
    margin-left: -470px;
    width: 100%;
    max-width: 940px;
    height: 332px;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    box-shadow: 10px 0 0 0 #fff,
    -10px 0 0 0 #fff;
  }
  .banner__slides {
    list-style-type: none;
    padding: 0;
  }
  .banner__slide {
    content: "";
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 344px;
    border-radius: 50%;
    text-align: center;
  }
  .banner__slide a {
    position: relative;
    display: block;
    width: 54%;
    margin-left: 22%;
    font-family: 'Georgia', 'Times New Roman', serif;
    text-decoration: none;
  }
  .banner__slide--image-frame img {
    min-height: 100%;
  }
  .banner__slide--info {
    width: 35%;
    height: 100%;
    padding: 5% 60px 100% 10px;
    background: rgba(89,64,24,0.25);
    text-shadow: none;
  }
  .banner__slide--info__name {
    text-shadow: 1px -1px 0 #594018;
  }
  .banner__position {
    position: absolute;
    display: block;
    right: 0;
    bottom: -30px;
    list-style-type: none;
    padding: 0;
  }
  .banner__position li {
    float: left;
    margin-left: 10px;
    width: 120px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 0 0 #ccc;
    cursor: pointer;
  }
  .banner__position li.active {
    background: #bda376;
    box-shadow: 0 1px 0 0 #fff;
  }
}

@media (min-width: 700px) {
  .banner__nav {
    opacity: 1;
  }
  .banner__slide a {
    width: 47%;
    margin-left: 26.5%;
  }
  .banner__slide--image-frame {
    width: 68%;
  }
  .banner__slide--info {
    width: 31%;
    padding-right: 30px;
    background: #a38b5f;
    background: -moz-linear-gradient(top,  #a38b5f 0%, #674f29 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a38b5f), color-stop(100%,#674f29));
    background: -webkit-linear-gradient(top,  #a38b5f 0%,#674f29 100%);
    background: -o-linear-gradient(top,  #a38b5f 0%,#674f29 100%);
    background: -ms-linear-gradient(top,  #a38b5f 0%,#674f29 100%);
    background: linear-gradient(to bottom,  #a38b5f 0%,#674f29 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a38b5f', endColorstr='#674f29',GradientType=0 );
  }
}

/* The following is strictly for the image and description panels to be completely stable. (When set to percentages, in smaller views, they would slightly move in or out a pixel or two when the next slide came in: */
@media (min-width: 960px) {
  .banner__wrapper {
    width: 960px;
  }
  .banner__bulg {
    margin-left: -960px;
    width: 1920px;
  }
  .banner__slide {
    left: 50%;
    margin-left: -900px;
    width: 1800px;
  }
  .banner__slide a {
    width: 900px;
    margin-left: 25%;
  }
}