كيف انشأ سلايدر بواسطة جافا سكربت؟

0

2023-09-26T09:49:38+00:00
المزيد
- رابط مختصر

يمكنك إنشاء سلايدر (شريط التمرير) باستخدام JavaScript و HTML و CSS. سأقدم لك مثالًا بسيطًا حول كيفية إنشاء سلايدر باستخدام مكتبة JavaScript المعروفة باسم "slick slider". يمكنك تنزيل هذه المكتبة أو استخدام روابط CDN لتضمينها في مشروعك.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
</head>
<body>
    <div class="slider">
        <div><img src="image1.jpg" alt="Slide 1"></div>
        <div><img src="image2.jpg" alt="Slide 2"></div>
        <div><img src="image3.jpg" alt="Slide 3"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.slider').slick({
                autoplay: true,
                autoplaySpeed: 2000, // التأخير بين الشرائح بالميللي ثانية
                dots: true, // إظهار نقاط التنقل
            });
        });
    </script>
</body>
</html>

في هذا المثال، قمنا بتضمين مكتبة Slick Slider و jQuery باستخدام روابط CDN في الجزء العلوي من ملف HTML. قمنا بإنشاء عنصر div بفئة slider حيث ستتم عرض الشرائح.في الجزء السفلي من الملف HTML، قمنا بتهيئة السلايدر باستخدام JavaScript. تم تمكين خاصية الـ autoplay لتشغيل السلايدر تلقائياً مع تحديد سرعة الانتقال بين الشرائح. وتم أيضاً تفعيل خاصية النقاط (dots) للملاحة بين الشرائح.

يمكنك تخصيص السلايدر وفقاً لاحتياجاتك الخاصة باستخدام خصائص وخيارات مكتبة Slick Slider.

0

Alasdee Ali

2023-09-26T10:07:58+00:00
المزيد
- رابط مختصر

افضل استخدام جافا سكربت خالصة من غير مكتبات لاني في فترة التعلم ولست بصدد استخدام مكتبات.

شكرا

0

اسماء محمد

2023-09-26T10:13:05+00:00
المزيد
- رابط مختصر

استخدم مكتبة Vanilla JS.

مثال لإنشاء سلايدر باستخدام جافا سكربت، يمكنك استخدام الكود التالي:

<div class="container">
  <input type="range" id="myRange">
  <p id="value"></p>
</div>

<script>
// إنشاء السلايدر
var slider = document.getElementById("myRange");
var value = document.getElementById("value");

// تحديث قيمة النص عند تغيير قيمة السلايدر
slider.addEventListener("change", function() {
  value.textContent = slider.value;
});
</script>

مثال اخر على كيفية استخدام سلايدر لعرض مجموعة من الصور:

<div class="container">
  <input type="range" id="myRange">
  <div class="images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

<script>
// إنشاء السلايدر
var slider = document.getElementById("myRange");
var images = document.querySelectorAll(".images img");

// تحديث صورة العرض عند تغيير قيمة السلايدر
slider.addEventListener("change", function() {
  var index = slider.value;
  images[index].style.display = "block";
});
</script>

0

Mustafa Suleiman

2023-09-26T10:32:21+00:00
2023-09-26T10:38:56+00:00
المزيد
- رابط مختصر

هناك طريقتان رئيسيتان لإنشاء سلايدر بواسطة جافا سكريبت:

استخدام كود جافا سكريبت من البداية، والذي يتطلب معرفة جيدة بقواعد جافا سكريبت.
استخدام مكتبة جافا سكريبت جاهزة، مثل مكتبة jQuery أو مكتبة SlickSlider أو Swiper.

وإليك مثال على كيفية إنشاء سلايدر بواسطة جافا سكريبت من البداية:

HTML

<div class="slider">
  <ul class="slider__img-container">
    <li class="slide">
      <img src="https://s20.postimg.cc/kank2kv9n/outdoors_1.jpg" alt="" class="slide__img">
    </li>
    <li class="slide">
      <img src="https://s20.postimg.cc/rqmtodyej/outdoors_2.jpg" alt="" class="slide__img">
    </li>
    <li class="slide">
      <img src="https://s20.postimg.cc/3mw203nnf/outdoors_3.jpg" alt="" class="slide__img">
    </li>
    <li class="slide">
      <img src="https://s20.postimg.cc/pytuthuh7/outdoors_4.jpg" alt="" class="slide__img">
    </li>
    <li class="slide">
      <img src="https://s20.postimg.cc/wpac2wuhn/outdoors_5.jpg" alt="" class="slide__img">
    </li>
  </ul>
  <div class="slider__arrow-nav-container">
    <div class="arrow-container">
      <span class="arrow arrow--prev"></span>
      <span class="arrow arrow--next"></span>
    </div>
    <ul class="dot-container">
      <li class="dot is-active" id="dot-1"></li>
      <li class="dot" id="dot-2"></li>
      <li class="dot" id="dot-3"></li>
      <li class="dot" id="dot-4"></li>
      <li class="dot" id="dot-5"></li>
    </ul>
  </div>
</div>

CSS:

html {
	 background: lightgray;
	 margin: 0;
	 padding: 0;
	 font-family: Lato;
	 font-size: 16px;
}
 .slider {
	 position: relative;
	 height: 500px;
	 max-width: 800px;
	 margin: 3.125em auto;
	 overflow: hidden;
}
 .slider__img-container {
	 transition: transform 1s;
}
 .slide {
	 float: left;
	 height: 500px;
}
 .slide__img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
}
 .slider__arrow-nav-container {
	 position: relative;
	 width: 100%;
	 height: 500px;
	 max-width: 800px;
}
 .slider__arrow-nav-container.is-active {
	 cursor: grabbing;
	 cursor: -webkit-grabbing;
}
 .arrow {
	 display: block;
	 position: absolute;
	 top: 50%;
	 width: 40px;
	 height: 40px;
	 border-radius: 50%;
	 background: rgba(255, 255, 255, 0.7);
	 cursor: pointer;
}
 .arrow::before {
	 box-sizing: border-box;
	 content: '';
	 display: block;
	 position: absolute;
	 top: 12px;
	 width: 16px;
	 height: 16px;
	 border-top: 5px solid #3498db;
}
 .arrow--prev {
	 left: 25px;
}
 .arrow--prev::before {
	 left: 15px;
	 border-left: 5px solid #3498db;
	 transform: rotate(-45deg);
}
 .arrow--next {
	 right: 25px;
}
 .arrow--next::before {
	 right: 15px;
	 border-right: 5px solid #3498db;
	 transform: rotate(45deg);
}
 .dot-container {
	 width: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 position: absolute;
	 bottom: 25px;
	 left: 0;
}
 .dot {
	 width: 10px;
	 height: 10px;
	 border-radius: 50%;
	 margin: 0 0.2em;
	 background: lightgray;
	 cursor: pointer;
}
 .dot.is-active {
	 background: #3498db;
}

جافاسكريبت:

let img_width = document.querySelector('.slider').clientWidth;
const imgs_container = document.querySelector('.slider__img-container');
const imgs = document.querySelectorAll('.slide');
const total_imgs = imgs.length;


const arrow_dot_container = document.querySelector('.slider__arrow-nav-container');


const dots_container = document.querySelector('.dot-container');
const prev_btn = document.querySelector('.arrow--prev');
const next_btn = document.querySelector('.arrow--next');


const slide_seconds = 4000;
let current_index = 1; 
let last_index; 
let move_distance; 
let timer;


let mouse_is_down = false; 
let mouse_position_x = [0, 0]; 


function calculateNextDistance() {
  move_distance = -(current_index * img_width); 
  last_index = current_index;


  if (current_index == total_imgs) {
    current_index = 1;
    move_distance = 0;
  } else {
    current_index++;
  }


  slideImages();
}


function calculatePrevDistance() {


  if (current_index > 1) {
    last_index = current_index;
    current_index--;
    move_distance = move_distance + img_width; 
  } else {
    last_index = current_index;
    current_index = total_imgs;
    move_distance = -((total_imgs - 1) * img_width);
  }


  slideImages();
}


function slideImages(drag_distance) {
  clearInterval(timer);


  const distance = drag_distance || move_distance;


  imgs_container.style.transform = `translateX(${distance}px)`;
  document.querySelector(`#dot-${last_index}`).classList.remove('is-active');
  document.querySelector(`#dot-${current_index}`).classList.add('is-active');


  timer = setInterval(calculateNextDistance, slide_seconds);


}


function slideDotImages(e) {
  const dots = this.querySelectorAll('.dot');


  for (var i = 1; i <= dots.length; i++) {
    if (e.target.id == `dot-${i}`) {
      last_index = current_index;
      current_index = i;
      move_distance = -((current_index - 1) * img_width);
    }
  }


  slideImages();
}


function createDraggingEffects(e) {


  mouse_position_x[1] = e.clientX;


  if (mouse_position_x[0] == mouse_position_x[1]) {
    return false;
  }


  let scrolled_distance = Math.abs((mouse_position_x[0] - mouse_position_x[1]));
  const weight = img_width / 12; 


  if (mouse_position_x[0] > mouse_position_x[1]) {  
      scrolled_distance = move_distance - scrolled_distance - weight;
  } else { 
      scrolled_distance = move_distance + scrolled_distance + weight;
  }


  slideImages(scrolled_distance); 


  console.log(current_index)
  console.log(mouse_position_x);
}


function dragAndSlideImages() {
  if (mouse_position_x[0] == mouse_position_x[1]) {
    slideImages();
    return false;
  }


  if (Math.abs(mouse_position_x[0] - mouse_position_x[1]) < 30) {
    slideImages(); 
    return false; 
  }


  if (mouse_position_x[0] > mouse_position_x[1]) {
    calculateNextDistance();
  } else {
    calculatePrevDistance();
  }
}


function init() {
  document.querySelector(`#dot-${current_index}`).classList.remove('is-active');


  img_width = document.querySelector('.slider').clientWidth;
  imgs.forEach(img => img.style.width = `${img_width}px`);
  imgs_container.style.width = `${img_width * total_imgs}px`;


  current_index = total_imgs;
  calculateNextDistance();
}


init();


next_btn.addEventListener('click', calculateNextDistance);
prev_btn.addEventListener('click', calculatePrevDistance);
dots_container.addEventListener('click', slideDotImages);
window.addEventListener('resize', init);


arrow_dot_container.addEventListener('mousedown', (e) => {
  mouse_is_down = true;


  clearInterval(timer);


  mouse_position_x = [e.clientX, 0];
  arrow_dot_container.style.cursor = '-webkit-grabbing';
  console.log(mouse_position_x);
})


arrow_dot_container.addEventListener('mousemove', (e) => {


  if (!mouse_is_down) return false; 
  createDraggingEffects(e);
})


arrow_dot_container.addEventListener('mouseup', (e) => {
  mouse_position_x[1] = e.clientX;
  dragAndSlideImages(e);
  mouse_is_down = false;
  arrow_dot_container.style.cursor = '';


  console.log(current_index);
})


arrow_dot_container.addEventListener('mouseleave', () => {
  if (!mouse_is_down) return false;


  mouse_position_x = [0, 0];
  dragAndSlideImages();
  mouse_is_down = false;
  arrow_dot_container.style.cursor = ''; 
})

النتيجة هي:

أما بخصوص الطريقة الثانية وهي استخدام مكتبة مثل Swiper فستجد شرح لذلك في المستند الرسمي هنا:

وتستطيع استخدام المكتبة مع React وVue وغيرها من المكتبات والإطارات.

0

عبدالباسط ابراهيم

2023-09-26T12:19:07+00:00
المزيد
- رابط مختصر

يمكنك استخدام الJavaScript فقط لتحقيق ذلك. وهذا هو كود javascript يمكنك فهم الفكرة وبناء السلايدر بنفسك

var sliderIndex = 0;
var slides = document.querySelectorAll("#slider img");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");


// Show the first image on page load
slides[sliderIndex].style.transform = "translateX(0)";


// Switch to the next image
function nextSlide() {
  slides[sliderIndex].style.transform = "translateX(-100%)";
  sliderIndex = (sliderIndex + 1) % slides.length;
  slides[sliderIndex].style.transform = "translateX(0)";
}


// Switch to the previous image
function prevSlide() {
  slides[sliderIndex].style.transform = "translateX(100%)";
  sliderIndex = (sliderIndex - 1 + slides.length) % slides.length;
  slides[sliderIndex].style.transform = "translateX(0)";
}


// Set click event listeners on buttons
nextBtn.addEventListener("click", nextSlide);
prevBtn.addEventListener("click", prevSlide);

0

Alasdee Ali

2023-09-26T14:33:01+00:00
المزيد
- رابط مختصر

هكذا طريقة سيتنفذ لمرة واحدة للامام أو مرة واحدة للخلف

مما يعني سﻻيدر من صورتين فقط

0

Alasdee Ali

2023-09-27T21:48:13+00:00
المزيد
- رابط مختصر

0

Alasdee Ali

2023-09-27T21:48:38+00:00
المزيد
- رابط مختصر

0

Hikmat Jaafer

2023-10-05T23:07:28+00:00
المزيد
- رابط مختصر

هناك طرق مختلفة لإنشاء سلايدر باستخدام JavaScript. واحدة من الطرق هي استخدام تقنية CSS3 المعروفة باسم "checkbox hack". تعتمد هذه الطريقة على استخدام عناصر الاختيار (checkbox) وتعديل الأنماط الخاصة بها باستخدام CSS لتحقيق تأثير السلايدر.

هنا هو مثال بسيط يوضح هذه الطريقة:

HTML:

<div class="slider">
  <input type="checkbox" id="slide1" checked>
  <input type="checkbox" id="slide2">
  <input type="checkbox" id="slide3">
  
  <div class="slides">
    <div class="slide" id="slide1-content">
      <!-- محتوى الشريحة 1 -->
    </div>
    <div class="slide" id="slide2-content">
      <!-- محتوى الشريحة 2 -->
    </div>
    <div class="slide" id="slide3-content">
      <!-- محتوى الشريحة 3 -->
    </div>
  </div>
  
  <div class="slider-nav">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

CSS:

.slider {
  position: relative;
}

.slides {
  display: flex;
  overflow: hidden;
}

.slide {
  flex: 1 0 100%;
  transition: transform 0.5s;
}

.slider-nav {
  text-align: center;
}

.slider-nav label {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: gray;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ .slides {
  transform: translateX(0);
}

input[type="checkbox"]:checked ~ .slider-nav label:nth-child(1) {
  background: red;
}

input[type="checkbox"]:checked ~ .slider-nav label:nth-child(2) {
  background: green;
}

input[type="checkbox"]:checked ~ .slider-nav label:nth-child(3) {
  background: blue;
}

تم استخدام عناصر الاختيار (checkbox) والتعديل على الأنماط الخاصة بها باستخدام CSS لتحقيق التأثير المطلوب. يتم تحقيق التنقل بين الشرائح عن طريق تغيير حالة عنصر الاختيار المختار (checked) وتطبيق التأثيرات المناسبة باستخدام المحددات (~) في CSS.

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

حالات استخدام هذه الطريقة :

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

مع ذلك، يجب مراعاة أن هذه الطريقة لديها بعض القيود وتكون ملائمة فقط في بعض الحالات البسيطة. إذا كانت لديك متطلبات معقدة أو تحتاج إلى مرونة أكبر في السلايدر، فقد تحتاج إلى استخدام إطار عمل أو مكتبة جاهزة مثل Swiper.js أو Slick Carousel التي توفر ميزات وخيارات أكثر تعقيداً وتخصيصاً.

كيف انشأ سلايدر بواسطة جافا سكربت؟

التعليقات

اقرأ أيضًا

تطوير الويب