0

كيفية عمل الاسلايدر شو هذا

اريد اكواد Html لهذة الاضافة و اكوادCss و اكواد Java

ارجو المساعده.


1
waelaljamal أضف ردا

لقد وجدت تصميما مشابها لما تريده:

والشيفرة البرمجية:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>


<div class="w3-container">
  <h2>Slideshow Indicators</h2>
  <p>Using images to indicate how many slides there are in the slideshow, and highlight the image the user is currently viewing.</p>
</div>


<div class="w3-content" style="max-width:1200px">
  <img class="mySlides" src="img_nature_wide.jpg" style="width:100%;display:none">
  <img class="mySlides" src="img_snow_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%;display:none">


  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_snow_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_mountains_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(3)">
    </div>
  </div>
</div>


<script>
function currentDiv(n) {
  showDivs(slideIndex = n);
}


function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-opacity-off";
}
</script>


</body>
</html>

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

وإن كان لديك الكثير من المشاكل وليدك بيئة عمل مثل Blogger (ليس لدي خبرة فيها) يفضل توظي مبرمج من خلال موقعي خمسات أو مستقل لإتمام جميع التعديلات الصعبة التي من الممكن أن تعترضك

0
Mohamed_abdelssamad أضف ردا

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

لو تعرف تعملها رد عليا ابعتلك الاكواد وتعملها.