• 0

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

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

Screenshot_2.png

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 3

كما تعلم تعتمد 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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

شكرا  على الرد ، لكن  لم  أعمل ب  jquery  ، فقط html و css و بعض  من javascript

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن