0

أود أن أضع أزرارا للتقليب بين الصور كما في الصورة التالية ولكن لا تظهر الأزرار في المتصفح ما الخطأ

<!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>


1
waelaljamal

هل يمكنك مشاركة الملفات كاملة كملف مضغوط؟ مع الصور و المكتبات، سأحاول عمل التعديلات المطلوبة

0
Maherahsoun

لم استطع مشاركة الملف المضغوط

1
waelaljamal

يمكنك رفع ملف المشروع على google drive مثلا ومشاركة الرابط.

0
Maherahsoun
1
waelaljamal

طالما أنك تستخدم بوتستراب، فالنصيحة هي الذهاب مباشرة للتوثيق الرسمي، والبحث عن معرض الصور..

بهذه الحالة ستجد شيفرة منظمة مقدمة من مطوري البوتستراب وتعمل بشكل جيد..

أنت تستعمل الإصدار 5، لذلك نبحث في غوغل عن bootstrap 5 image slider

استخدم معرض الصور المقدم من طرفهم..

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

رابط التوثيق:

يمكنك تصفح توثيق بوتستراب المقدم من موسوعة حسوب بالعربية:

0
Maherahsoun

شكرا جزيلا