index.html

<!DOCTYPE html>
<html lang="fa">
  
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./style.css">
  <title>Project4 Image Slider</title>

</head>

<body>



  <div class="container">

    <div class="slider-outer">

      <img src="./images/arrow-left.png" alt="prev" class="prev">

      <div class="slider-inner">

        <img src="./images/slider1.jpg" alt="slider1" class="active">
        <img src="./images/slider2.jpg" alt="slider2">
        <img src="./images/slider3.jpg" alt="slider3">
        <img src="./images/slider4.jpg" alt="slider4">

      </div>

      <img src="./images/arrow-right.png" alt="next" class="next">

    </div>

  </div>




  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="./app.js"></script>
</body>

</html>