سلايد شو متجاوب مع الشاشات - شركة انكور التطويرية

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

سلايد,متجاوب,الشاشات,keyword

سلايد شو متجاوب مع الشاشات - شركة انكور التطويرية

دليل انكور للمواقع





القوانين العامة لشركة انكور التطويرية | وجب على الجميع القراءة والالتزام



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


سلايد شو متجاوب مع الشاشات

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


لا يمكنك الرد على هذا الموضوع لا يمكنك إضافة موضوع جديد


Admin
.:: مؤسس انكور ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 1284
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 11-9-1998
الدعوات : 9
قوة السمعة : 70
موقعي : زيارة موقعي
 offline 
16-06-2020 01:47 مساء
بسم الله الرحمن الرحيم

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

مميزات السلايد :
- تنقل يدوي عن طريق الاسم او النقاط بالاسفل
- التحكم بحجم السلايد
- متجاوب مع الشاشات
-  يمكن تقسيمه ويمكن وضعه كامل

معاينة السلايد :
3512
تركيب السلايد :
ضع الكود التالي في المكان الذي تريد وضع السلايد فيه

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Slideshow from iinkor.com */
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

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

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://i93.servimg.com/u/f93/15/47/21/99/img_na10.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://i93.servimg.com/u/f93/15/47/21/99/img_sn10.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://i93.servimg.com/u/f93/15/47/21/99/img_mo10.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

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

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  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";
}
</script>
 

يمكنك تقسيم اكواد السلايد بحيث :
الاكواد بين <style> </style> ضعها في ملف css
والاكواد بين <sccript> </s c r i p t> ضعها في ملف javas c r i p t
والباقي html توضع في المكان المراد وضع السلايد فيه

للتعديل على حجم الصور :

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://i93.servimg.com/u/f93/15/47/21/99/img_na10.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

عدل على الكود التالي من 100% الى الرقم بالبكسل "350px" مثلا او كما هي نسبة مئوية "30%"
ولاضافة ارتفاع معين اضف وسم height الى الكود ليصبح هكذا

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://i93.servimg.com/u/f93/15/47/21/99/img_na10.jpg" style="width:100%;height:100%;">
  <div class="text">Caption Text</div>
</div>



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



:. كاتب الموضوع Admin ، المصدر: سلايد شو متجاوب مع الشاشات .:


sghd] a, lj[h,f lu hgahahj

توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل




المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
شركات استضافة متجاوب Admin
1 77 Admin
استايل احتراف التطوير المتجاوب Admin
0 132 Admin
نافبار مع قوام مسندلة متجاوب مع جميع الشاشات Admin
0 144 Admin
افحص موقعك اذا ما كان متجاوب مع الاجهزة Admin
0 277 Admin

الكلمات الدلالية
سلايد ، متجاوب ، الشاشات ،

« نافبار مع قوام مسندلة متجاوب مع جميع الشاشات | صندوق اعلاني يظهر للزائر يمكن ازالته »

 














الساعة الآن 04:20 مساء


جميع حقوق تصميم الاستايل محفوظة لابو كريم وتحويل الاستايل لسليمان


RSS 2.0XML Site MapArchiveTeamContactCalendarStatic Forum