<section class="container">
  <h1>Using the nowrap Property on an Image Carousel</h1>
  <h2>
				Tenniel Illustrations 
				for 
				Alice in Wonderland
  </h2>
  <h3>
				by Sir John Tenniel
			  </h3>

  <div class="carousel">
    <div class="carousel-inner">
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/hand.gif" alt="Hand">
        <figcaption>
          <span>1</span> Alice's hand grabbing at Rabbit
        </figcaption>
      </figure>
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/rabbit.gif" alt="Rabbit">
        <figcaption>
          <span>2</span> White Rabbit checking watch
        </figcaption>
      </figure>
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drinkmebottle.gif" alt="Bottle">
        <figcaption>
          <span>3</span> Alice taking "Drink Me" bottle
        </figcaption>
      </figure>
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/giantalice.gif" alt="Giant Alice">
        <figcaption>
          <span>4</span> Giant Alice watching Rabbit run away
        </figcaption>
      </figure>
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/dodo.gif" alt="Dodo">
        <figcaption>
          <span>5</span> Dodo presenting thimble
        </figcaption>
      </figure>
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/alicetall.gif" alt="Tall Alice">
        <figcaption>
          <span>6</span> Alice stretched tall
        </figcaption>
      </figure>

      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/caterpillar.gif" alt="Caterpillar">
        <figcaption>
          <span>7</span> Alice meets the Caterpillar
        </figcaption>
      </figure>

      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/fishandfrog.gif" alt="Fish and Frog">
        <figcaption>
          <span>8</span> Fish and Frog servants
        </figcaption>
      </figure>

      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/pigbaby.gif" alt="Pig">
        <figcaption>
          <span>9</span> Alice and pig baby
        </figcaption>
      </figure>

    </div>

  </div>
  <div class="button">
    <a href="#">Scroll</a>
  </div>
</section>

<p class="p">Demo by Antonietta Perna. <a href="http://www.sitepoint.com" target="_blank">See article</a>.</p>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 100%;
  line-height: 1.5;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2em;
  font-weight: lighter;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 1em;
  white-space: pre-line;
}

h3 {
  color: #9e1620;
  text-align: center;
  margin-bottom: 1em;
}

.container {
  max-width: 100%;
  min-width: 300px;
  margin: 0 auto;
  background-color: #fff;
  padding: 1em 2em;
}

.carousel {
  overflow-x: hidden;
  outline: 2px double #cb1c29;
  width: 600px;
  padding: 0;
  padding-left: 3px;
  background: #fadbdd;
  margin: 0 auto;
}

@media screen and (min-width: 300px) and (max-width: 599px) {
  .carousel {
    width: 300px;
    padding: 0;
    padding-left: 3px;
  }
}

.carousel .carousel-inner {
  white-space: nowrap;
  position: relative;
  margin: 0;
  text-align: center;
  left: 0;
  transition: left 1s linear;
}

figure {
  display: inline-block;
  width: 194px;
  height: auto;
  margin: 0;
  padding: 6px;
  position: relative;
  text-align: center;
  background: #fadbdd;
}

figure img {
  width: 90%;
  display: block;
  height: auto;
  margin: 0 auto;
}

@media screen and (min-width: 300px) and (max-width: 599px) {
  figure {
    width: 144px;
  }
}

figure:hover img,
figure:focus img {
  outline: 1px solid #9e1620;
}

figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(158, 22, 32, .8);
  color: #fff;
  padding: .5em 0;
  font-size: .8em;
  font-weight: bolder;
  font-style: italic;
  white-space: normal;
  transition: opacity .5s linear;
}

figure figcaption span {
  width: 20px;
  height: 20px;
  line-height: 16px;
  font-size: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: block;
  text-align: center;
  margin: 0 auto;
}

figure:hover figcaption,
figure:focus figcaption {
  opacity: 0;
}

.button {
  max-width: 50%;
  margin: 2em auto;
  padding: 0.2em 0;
  font-size: 0.9em;
  font-weight: bold;
}

.button a {
  display: block;
  background: #cb1c29;
  border-radius: 1em;
  padding: 1em;
  text-align: center;
  color: #fff;
  text-decoration: none;
  transition: background .5s linear;
}

.button a:hover,
.button a:focus {
  background: #9e1620;
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 130px;
}

(function($) {

  var $carousel = $('.carousel'),
    $carouselWidth = $carousel.outerWidth(true),
    $carouselInner = $('.carousel-inner'),
    $numImgs = $('.carousel figure').length,

    //get each figure element width 
    $imgWidth = parseInt($('.carousel-inner figure').css('width')),
    $winSize = $(window).width(),
    paddingLarge = 17,
    paddingSmall = 11.2,
    carouselPos = 0;

  //set initial carousel position to 0 (starting point)
  $carouselInner.css('left', carouselPos);

  //Scroll button click
  $('.button a').on('click', function(e) {

    e.preventDefault();

    //if the screen size is less than 600px, show 2 images, otherwise show 3 images
    if ($winSize <= 599) {
      carouselPos += ($imgWidth * 2 + paddingSmall);
    } else {
      carouselPos += ($imgWidth * 3 + paddingLarge);
    }

    $carouselInner.css('left', -carouselPos);

    //if the position is bigger or = to the entire width of the total images, go back to position 0 
    // that is, to the beginning of the carousel
    if (carouselPos >= parseInt($imgWidth * $numImgs)) {
      carouselPos = 0; // the position goes back to 0 and the panel slides to the beginning of the carousel
      $carouselInner.css('left', carouselPos);
    }

  });

  //Adjust some values on screen resize
  $(window).resize(function() {

    $carouselWidth = $carousel.outerWidth(true);
    $imgWidth = parseInt($('.carousel-inner figure').css('width'));
    $winSize = $(window).width();

  });

})(jQuery);