<div class="container">
  <h1>Custom Image Carousel with Line Arrows</h1>
  <div class="image">
    <p class="description"></p>
    <div class="arrow left-arrow">
      <div class="short"></div>
      <div class="med"></div>
      <div class="long"></div>
    </div>
    <div class="arrow right-arrow">
      <div class="short"></div>
      <div class="med"></div>
      <div class="long"></div>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

//Colors
$blue: #009FB7;
$gray: #696773;
$white: #eff1f3;

$radius: 4px;

* {
  font-family: "Montserrat", arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: $white;
}

.container {
  width: 95%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  h1{
    margin-bottom: 50px;
  }
  .image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 320px;
    width: 480px;
    position: relative;
    border-radius: $radius;
    .description {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      color: $white;
      border-bottom-left-radius: $radius;
      border-bottom-right-radius: $radius;
    }
    .arrow {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 75px;
      width: 40px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      * {
        width: 5px;
        background: $gray;
        border-radius: $radius;
        transition: all 200ms ease-in-out;
      }
      .short{
        height: 25px;
      }
      .med{
        height: 50px;
      }
      .long {
        height: 75px;
      }
    }
    .left-arrow {
      left: -50px;
    }
    .right-arrow {
      right: -50px;
      flex-direction: row-reverse;
    }
    .arrow:hover * {
      background-color: $blue;
      cursor: pointer;
    }
    .arrow:active * {
      transform: translateY(2px);
    }
  }
}

const images = [
  ['https://images.unsplash.com/photo-1549611016-3a70d82b5040?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1316&q=80', 'Farmer Burger - <em>The Artisian Bistro</em>'], 

  ['https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', 'Family Breakfast - <em>AM Diner</em>'], 

  ['https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', 'Garden Pizza - <em>The Pizzataliano</em>'], 

  ['https://images.unsplash.com/photo-1496116218417-1a781b1c416c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', 'Dim Sum - <em>Asian Fusion</em>']
];
let imageCounter = 0;

setContent();

$('.left-arrow').on('click', function() {
  if(imageCounter === 0){
    imageCounter = images.length - 1;
  } else {
    imageCounter --;
  }
  setContent();
});

$('.right-arrow').on('click', function() {
  if(imageCounter === images.length - 1){
    imageCounter = 0;
  } else {
    imageCounter ++;
  }
  setContent();
});

function setContent() {
  $('.image').css('background-image', `url(${images[imageCounter][0]})`);
  $('.description').html(images[imageCounter][1]);
}