title: Carousel with preview of the next and previous image
body: <p>I'm trying to re-learn webprogramming since it's been long since then that I have made one (I actually don't like web programming but a need might come anytime soon)</p>
  
  <p>Anyhow what my problem is that, I'm trying to replicate this one <a href="https://codepen.io/glebkema/pen/RKavve/" rel="nofollow noreferrer">https://codepen.io/glebkema/pen/RKavve/</a>
  I've been aple to replicate until the display of the image but the functions to slide and the arrows it self is not working and cannot be seen.</p>
  
  <p>Here's my code:
  HTML</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="assets\css\bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="assets\css\mycss1.css"&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
  
  &lt;div id="mycarousel" class="carousel slide multi-item-carousel" data-ride="carousel"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-1" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-1" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-1" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;div class="item__third"&gt;
          &lt;img src="assets\img\lightblue.png" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;div class="item__third"&gt;
          &lt;img src="assets\img\red.png" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;div class="item__third"&gt;
          &lt;img src="assets\img\orange.png" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;a href="#carousel-1" class="right carousel-control" role="button" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
          &lt;script src="assets\js\bootstrap.min.js"&gt; &lt;/script&gt;
          &lt;script src="assets\js\carouselengine1.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.multi-item-carousel {
    overflow: hidden;
  }
  .multi-item-carousel img {
    height: auto;
    width: 100%;
  }
  .multi-item-carousel .carousel-control.left, 
  .multi-item-carousel .carousel-control.right {
      background: rgba(255, 255, 255, 0.3);
      width: 25%;
  }
  .multi-item-carousel .carousel-inner {
    width: 150%;
    left: -25%;
  }
  .carousel-inner &gt; .item.next, 
  .carousel-inner &gt; .item.active.right {
      -webkit-transform: translate3d(33%, 0, 0);
      transform: translate3d(33%, 0, 0);
  }
  .carousel-inner &gt; .item.prev, 
  .carousel-inner &gt; .item.active.left {
      -webkit-transform: translate3d(-33%, 0, 0);
      transform: translate3d(-33%, 0, 0);
  }
  .item__third {
    float: left;
    width: 33.33333333%;
  }
  </code></pre>
  
  <p>and finally the JS.</p>
  
  <pre><code>$(".multi-item-carousel .item").each(function() {
    var next = $(this).next();
    if (!next.length) next = $(this).siblings(":first");
    next
      .children(":first-child")
      .clone()
      .appendTo($(this));
  });
  $(".multi-item-carousel .item").each(function() {
    var prev = $(this).prev();
    if (!prev.length) prev = $(this).siblings(":last");
    prev
      .children(":nth-last-child(2)")
      .clone()
      .prependTo($(this));
  });
  </code></pre>
  
  <p>I'm not new to programming but is at web.
  Lastly can someone explain to me what is the use of $(".xxxx .xxx").each()</p>
  
  <p>Also, I'm getting $ not defined error</p>