كيف يمكنني الحصول على عارض شرائح شكله مطابق تماما للصورة 1

Hamza Almsadi · 3 سبتمبر 2022

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

ملاحظة اعمل على مشروع حقيقي غير تدريبي واقتربت من انهائه كلياً ، بعد البحث الطويل على النت لم اصل الى النتيجة المطلوبة ،يمكنك رؤية الشكل الذي وصلت اليه في الصورة 2 .....باستخدام bootstrap5

ارجو المساعدة شكرا جزيلا

Wael Aljamal · 3 سبتمبر 2022

الصورة الكبيرة في الخلفية مطبق عليها شفافية opacity مع أبعاد كبيرة، وهي عنصر img له نفس src للصورة في المعرض.

الصورة المصغر في الأسفل هي عبارة عن قائمة من الصور، و يمكن تخزين المسارات في مصفوفة وإسناد الرابط للصورة حسب نفس الترتيب.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/*
  تنسيقات عامة
  */

body {
  font-family: Arial;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* تموضع حاوية الصور نسبي لنستطيع وضع الأسهم على الأطراف */
.container {
  position: relative;
}

/* اخفاء الصور بشكل افتراضي */
.mySlides {
  display: none;
}

/* تعديل شكل المؤشر عند وضعه على الصور المصغرة */
.cursor {
  cursor: pointer;
}

/* أزرار التنقل للأمام و الخلف */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* زر التالي لليمين */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover تظليل الخلقية عند المرور عليها */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 6 أعمدة للصور المصغرة */
.column {
  float: left;
  width: 16.66%;
}

/*  شفافية transparency تأثير thumnbail images للصور */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
</style>
<body>

<h2 style="text-align:center">Slideshow Gallery</h2>

<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
    <img src="img_woods_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 6</div>
    <img src="img_5terre_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 6</div>
    <img src="img_mountains_wide.jpg" style="width:100%">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">4 / 6</div>
    <img src="img_lights_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 6</div>
    <img src="img_nature_wide.jpg" style="width:100%">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">6 / 6</div>
    <img src="img_snow_wide.jpg" style="width:100%">
  </div>
    
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
    </div>    
    <div class="column">
      <img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
    </div>
  </div>
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
    
</body>
</html>

https://www.w3schools.com/HOWTO/tryit.asp?filename=tryhow_js_slideshow_gallery

شيفرة جافاسكربت:

slideIndex هو المتغير الذي يحمل رقم الصورة
slides مصفوفة تحوي الصور
نحدد جميع الصور ب none لكي لاتظهر، ثم نعطي block للصورة التي نريد عرضها

Kais Hasan · 3 سبتمبر 2022

يمكنك استعمال إحدى مكونات bootstrap و هو ال carousel، كمثال بسيط عليه:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

و من ثم القسم الثاني carousel-inner و الذي يمثل الصور التي سيتم عرضها.

و من ثم لدينا زران للتحكم بالانتقال.

كيف يمكنني الحصول على عارض شرائح شكله مطابق تماما للصورة 1

السؤال

Hamza Almsadi

2 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

Kais Hasan

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية