كيف يمكنني إزاحة سلايد شو في html ؟

زدني علما · 7 مايو 2016

السلام عليكم ، عندي مشكلة في إزاحة سلايد شو ، فعلت كل الطرق بدون فائدة ، أريده أن يزيح إلى الوسط جهة اليمن .. ما العمل ؟

E.Nourddine · 7 مايو 2016

كما تعلم تعتمد html على عدة وسوم ، تختلف كل منها حسب حاجة المبرمج، لذا وجب علينا احترام البنية المبنية بها الصفحة ليتم التفاعل مع مختلف مكوناتها عبر css أو jquery، حيث أن هذه الأخيرةjquery- هي من ستساعدنا على إنشاء SlideShow أو شرائح منزلقة، وذلك بكتابة كودHtmlالتالي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Sliding-enabled slideshow using jQuery | Script Tutorials</title>
  <meta name="description" content="Sliding-enabled slideshow using jQuery demo - Script Tutorials">

  <!-- include to stylesheet -->
  <link rel="stylesheet" href="css/style.css" type="text/css" />

  <!-- include jQuery library and other javascripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/jquery.scrollTo.js"></script>
  <script src="js/jquery.localscroll.js"></script>
  <script src="js/custom-scripts.js"></script>
</head>
<body>
  <div id="slideshow">
    <!-- List of slider images -->
    <ul>
      <li id="slide1"><img src="images/slide1.jpg" alt="Slide 1" /></li>
      <li id="slide2"><img src="images/slide2.jpg" alt="Slide 2" /></li>
      <li id="slide3"><img src="images/slide3.jpg" alt="Slide 3" /></li>
      <li id="slide4"><img src="images/slide4.jpg" alt="Slide 4" /></li>
      <li id="slide5"><img src="images/slide5.jpg" alt="Slide 5" /></li>
    </ul>
  </div>
  <div id="slideshow-nav">
    <!-- Navigation list of slider images -->
    <ul>
      <li><a href="#slide1">Slide 1</a></li>
      <li><a href="#slide2">Slide 2</a></li>
      <li><a href="#slide3">Slide 3</a></li>
      <li><a href="#slide4">Slide 4</a></li>
      <li><a href="#slide5">Slide 5</a></li>
    </ul>
  </div>
</body>
</html>

ثم ملف css المُنظم لشكل ظهور مختلف العناصر الموجودة في الصفحة:

css/style.css

#slideshow {/*slider container css*/
  width: 800px;
  height: 400px;
  overflow: hidden;
  margin: 50px auto 50px auto;
  box-shadow: 0px 0px 50px #333;
  -moz-box-shadow: 0px 0px 50px #333;
  -webkit-box-shadow: 0px 0px 50px #333;
}

#slideshow ul {/*manage slider scroll elements css*/
  width: 4000px;
  list-style: none; 
}

#slideshow ul li {
  float: left;
}

إضافة بعض التأثيرات -ملف css-:

#slideshow-nav {/* Slider navigation container css */
  width: 150px;
  margin: 0 auto 100px auto;
}
#slideshow-nav ul {
  list-style: none; 
}
#slideshow-nav ul li {
  float: left; 
}
#slideshow-nav ul li a {/* navigation styling css */
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  margin: 0 5px;
  background: #fff;
  text-indent: -9999px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0px 0px 30px #000;
  -webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
/* hover and active navigation css */
  background: #333;
}

بعد ربط ملف Html بسكريبت javascript، في ملف :

js/custom-scripts.js

نقوم بكتابة الكود :

$(document).ready(function() {
  var slider = $("#slideshow");
  var slider_nav = $("#slideshow-nav");
  slider_nav.find("a[href=#slide1]").addClass("active");

  slider_nav.localScroll({
    target:'#slideshow',
    axis: 'x'
  });

  slider_nav.find("a").click(function(){
    slider_nav.find("a").removeClass("active");
    $(this).addClass("active");
  });
});

رابط المثال.

المصدر: كيفيَّة إنشاء عرض شرائح قابل للتَّحريك باستخدام jQuery