Kako napraviti jednostavan SLIDER?

U ovome primjeru kreiraćemo jednostavan Slider sa slikama. 



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>IT TUTORIJALI | Jednostavan SLIDER</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:300,400|Roboto|Open+Sans:300,400,700">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <style>
    .carousel {
      margin: 25px 0 50px;
      background: #fff;
      position: relative;
      padding: 8px;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

    .carousel:before,
    .carousel:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 15px;
      left: 10px;
      width: 50%;
      top: 80%;
      max-width: 400px;
      background: rgba(0, 0, 0, 0.7);
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      transform: rotate(-3deg);
    }

    .carousel:after {
      transform: rotate(3deg);
      right: 10px;
      left: auto;
    }

    .carousel .carousel-item {
      text-align: center;
      min-height: 200px;
    }

    .carousel .carousel-item img {
      max-width: 100%;
      margin: 0 auto;
      /* Poravnanje slike slidera vodoravno po sredini u Bootstrap v3 */
    }

    .carousel-control-prev,
    .carousel-control-next {
      width: 27px;
      height: 54px;
      overflow: hidden;
      opacity: 1;
      margin: auto 0;
      background: none;
      text-shadow: none;
    }

    .carousel-control-prev span,
    .carousel-control-next span {
      width: 54px;
      height: 54px;
      display: inline-block;
      background: #4a4a4a;
      border-radius: 50%;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

    .carousel-control-prev span {
      margin-right: -27px;
    }

    .carousel-control-next span {
      margin-left: -27px;
    }

    .carousel-control-prev:hover span,
    .carousel-control-next:hover span {
      background: #3b3b3b;
    }

    .carousel-control-prev i,
    .carousel-control-next i {
      font-size: 24px;
      margin-top: 13px;
    }

    .carousel-control-prev {
      margin-left: -28px;
    }

    .carousel-control-next {
      margin-right: -28px;
    }

    .carousel-control-prev i {
      margin-left: -24px;
    }

    .carousel-control-next i {
      margin-right: -24px;
    }

    .carousel-indicators {
      bottom: -42px;
    }

    .carousel-indicators li,
    .carousel-indicators li.active {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      margin: 1px 4px;
    }

    .carousel-indicators li {
      border: 1px solid #475c6f;
    }

    .carousel-indicators li.active {
      background: #20b0b9;
      border-color: #20b0b9;
    }
  </style>
</head>

<body>
  <div class="container-sm">
    <div class="row">
      <div class="col-md-8 mx-auto">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Carousel idikator -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
          <!-- Wrapper za carousel stavke -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="../img/notebook.jpg" class="img-fluid" alt="">
            </div>
            <div class="carousel-item">
              <img src="../img/workstation.jpg" class="img-fluid" alt="">
            </div>
            <div class="carousel-item">
              <img src="../img/tablet.jpg" class="img-fluid" alt="">
            </div>
          </div>
          <!-- Carousel kontrole -->
          <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
            <span><i class="fa fa-angle-left"></i></span>
          </a>
          <a class="carousel-control-next" href="#myCarousel" data-slide="next">
            <span><i class="fa fa-angle-right"></i></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>