<!DOCTYPE html>

<html>

 <head>

  <title>5</title>

  <link rel="stylesheet" href="4.css">

  <link rel="stylesheet" href="bootstrap.css">

  <script src="jquery-3.6.0.js"></script>

 </head>

 <body>

  <a href="1.html">1</a>

  <a href="2.html">2</a>

  <a href="3.html">3</a>

  <a href="5.html">5</a>

  <hr>

  <h1 onclick="merhabasoyle();">5</h1>

  <div class="row">

   <div class="col-md-3">

    <img id="img1"

     class="margin1-img"

     src="F1.jpg">

   </div>

   <div class="col-md-3">

    <img id="img2"

     class="margin1-img"

     src="F2.jpg"/>

   </div>

   <div class="col-md-3">

    <img id="img3"

     class="margin1-img"

     src="F3.jpg"/>

   </div>

   <div class="col-md-3">

    <img id="img4"

     class="margin1-img"

     src="F4.jpg"/>

   </div>

  </div>

  <div class="row">

   <div class="col-md-12">

    <img id="buyukFoto"

     class="mardin2-img"

     src="F1.jpg"/>

   </div>

  </div>

 </div>

 </body>

 <script type="text/javascript">

 function merhabasoyle(){

  alert('merhaba 2');

 };

 $(".margin1-img").click(function(){

  $("#buyukFoto").attr('src',

   $(this).attr('src'));

 });

 var counter = 1;

 $("#img"+counter).click();

 $("forward").click(function (){

  counter = counter + 1;

  if (counter > 4) {

   counter = 1;

  }

  $("#img"+counter).click();

 });

 </script>

</html>