<article class='recipe-card'>
  <h2>Creamy Carrot Soup</h2>
  <div id='carousel' class='recipe-pic-frame'>
    <div id='sliderBox' class='slider-box'>
      <div class='recipe-pic pic1' role='img'></div>
      <div class='recipe-pic pic2' role='img'></div>
      <div class='recipe-pic pic3' role='img'></div>
    </div>
  </div>
  <section>
    <h3>Ingredients</h3>
    <ul class='ingredient-list'>
      <li>1 tablespoon butter</li>
      <li>
        1 tablespoon extra-virgin olive oil</li>
      <li>
        1 medium onion, chopped</li>
      <li>
        1 stalk celery, chopped</li>
      <li>
        2 cloves garlic, chopped</li>
      <li>
        1 teaspoon chopped fresh thyme or parsley</li>
      <li>
        5 cups chopped carrots</li>
      <li>
        2 cups water</li>
      <li>
        4 cups reduced-sodium chicken broth, “no-chicken” broth (see Note) or vegetable broth</li>
      <li>
        1/2 cup half-and-half (optional)</li>
      <li>
        1/2 teaspoon salt</li>
      <li>
        Freshly ground pepper to taste</li>
    </ul>
  </section>
  <section>
    <h3>Preperation</h3>

    <p>Heat butter and oil in a Dutch oven over medium heat until the butter melts. Add onion and celery; cook, stirring occasionally, until softened, 4 to 6 minutes. Add garlic and thyme (or parsley); cook, stirring, until fragrant, about 10 seconds.</p>
    <p>
      Stir in carrots. Add water and broth; bring to a lively simmer over high heat. Reduce heat to maintain a lively simmer and cook until very tender, about 25 minutes. Puree the soup in batches in a blender until smooth. (Use caution when pureeing hot liquids.)
      Stir in half-and-half (if using), salt and pepper.</p>
  </section>
  <section>
    <h3>Tips &amp; Notes</h3>
    <p>
      Make Ahead Tip: Cover and refrigerate for up to 4 days or freeze for up to 3 months.
      <p>
        <p>Note: Chicken-flavored broth, a vegetarian broth despite its name, is preferable to vegetable broth in some recipes for its hearty, rich flavor. Sometimes called “no-chicken” broth, it can be found with the soups in the natural-foods section of
          most supermarkets.</p>
  </section>
  <section>
    <h3>Nutrition</h3>
    <p>Per serving: 77 calories; 3 g fat (1 g sat, 2 g mono); 4 mg cholesterol; 10 g carbohydrates; 0 g added sugars; 3 g protein; 3 g fiber; 484 mg sodium; 397 mg potassium.</p>

    <p>Nutrition Bonus: Vitamin A (269% daily value).</p>

    <p>Carbohydrate Servings: 1/2</p>

    <p>Exchanges: 1 vegetable, 1 fat</p>
  </section>
</article>

.recipe-card {
  max-width: 30em;
  display: block;
  overflow: hidden;
  transition: max-width 3s;
  font-family: 'Oswald', sans-serif;
  border: solid 1px rgb(205, 90, 0);
  border-radius: .4em;
  margin: 3em auto;
  background-color: rgba(255, 140, 0, 1);
  box-shadow: -3px 3px 10px rgba(30, 30, 30, .4);
  text-shadow: 0px 1px 3px rgba(255, 255, 255, .5);
  color: #190F00;
}

.recipe-pic-frame {
  width: 100%;
  height: 20em !important;
  border-bottom: solid 1px rgba(205, 90, 0, 1);
  position: relative;
  cursor: pointer;
}

.slider-box {
  width: 300%;
  height: 20em;
  min-height: 20em;
  left: 0%;
  position: absolute;
  transition: left 1s;
}

.recipe-pic {
  width: 33.3333333333%;
  height: 20em;
  min-height: 200px;
  margin: 0;
  padding: 0;
  border: none;
  background-size: cover;
  background-position: center center;
  display: block;
  float: left;
}

.pic3 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Carrots_of_many_colors.jpg/635px-Carrots_of_many_colors.jpg);
}

.pic2 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e6/Carrots.JPG);
}

.pic1 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Carrot_soup.jpg/681px-Carrot_soup.jpg);
}

.recipe-card h2 {
  background-color: rgba(255, 205, 205, .3);
  margin: 0;
  padding: 1em .2em;
  box-sizing: content-box;
  display: block;
  border-bottom: solid 1px rgba(205, 90, 0, 1);
}

.recipe-card h3 {
  padding: .1em .2em;
  ;
  box-sizing: border-box;
}

.recipe-card p {
  margin-left: 1em;
  margin-right: 1em;
  font-size: .9em;
}

.recipe-card section {
  border-bottom: solid 1px rgba(205, 90, 0, 1);
  border-top: solid 1px rgba(255, 190, 50, .7);
  margin: 0;
  padding;
  0;
}

.recipe-card section:last-child {
  border-bottom: none;
}

.ingredient-list {
  line-height: 1.5em;
  list-style: circle;
  margin-right: 1em;
}

let imageIndex = 0;
let imageCount = document.getElementsByClassName('recipe-pic').length;
let carousel = document.getElementById('carousel');
let slider = document.getElementById('sliderBox');
carousel.addEventListener('click', function(event) {
  imageIndex = (imageIndex >= imageCount - 1) ? 0 : imageIndex + 1;
  console.log((100 * imageIndex) + "%");
  slider.style.left = (-100 * imageIndex) + "%";
})