عرض مجموعة من العناصر دفعة واحدة في Javascript بدلاً عرض كل عنصر بشكل منفصل

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

بتاريخ On 1/17/2020 at 12:57 قال Ahmed Essam11:

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

Owl carousel تم استخدامها في قسم الفريق الإداري، لكن هل أنت متأكد أخي أنه تم استخدامها في قسم "الخدمات المقدمة" على الموقع؟

علماً بأنه هذا هو الكود الأصلي (حيث لا يوجد أثر للـ OWL Caraousel) : 

السلام عليكم أخي الحبيب . . يمكنك أن تجرب حل هذه المشكلة بأن تجعل كل ثلاثة  news_item داخل news-slider__item swiper-slide واحد . . جرب وأخبرني إن نجحت الفكرة

بتاريخ 11 ساعات قال أحمد صلاح2:

السلام عليكم أخي الحبيب . . يمكنك أن تجرب حل هذه المشكلة بأن تجعل كل ثلاثة  news_item داخل news-slider__item swiper-slide واحد . . جرب وأخبرني إن نجحت الفكرة

لم تنجح للأسف، العناصر تظهر فوق بعضها في عمود واحد

السلام عليكم.

افضل طريقه لعمل ذالك هو اضافه الevent click واستدعاء الدوال slideNext و slidePrev داخله

بتاريخ 21 ساعات قال Hamada Sayed:

السلام عليكم.

 

افضل طريقه لعمل ذالك هو اضافه الevent click واستدعاء الدوال slideNext و slidePrev داخله

 

وعليكم السلام ورحمة الله،

هل يمكنك التفصيل أكثر وشرح الأمر عملياً، فأنا مبتدئ في الجافا سكربت.

شكراً

بتاريخ 1 ساعة قال عبدالله التميمي5:

هل يمكنك التفصيل أكثر وشرح الأمر عملياً، فأنا مبتدئ في الجافا سكربت.

اضافه الevent click استخدم الكود ده

swiper.on('click', function (e) {
  var np=e.target;
  var spv=3; //this.params.slidesPerView-1;

  do{
    if (np.getAttribute("class").indexOf("news-slider-prev") != -1)
    {
      while(spv--) this.slidePrev(0, 0);
      break;
    } 
    else if (np.getAttribute("class").indexOf("news-slider-next") != -1)
    {
      while(spv--) this.slideNext(0, 0);
      break;
    }
  }while((np=np.parentNode) != null);
});

بتاريخ On 1/16/2020 at 09:23 قال عبدالله التميمي5:

مع مراعاة أن تصفح الهواتف والشاشات الصغيرة يبقى على حاله (كل خدمة تعرض بشكل منفصل).

في الjson الممرر كوسيط ثاني لانشاء instance من الكائن Swiper استبدل السطر

slidesPerView: 'auto',
  بالسظر
slidesPerView: 1,
  
  

لعرض slide واحد في الشاشات اصغر من 480px

واستبدل ايضا

    breakpoints: {
        480: {
            spaceBetween: 0,
            centeredSlides: true
        }
    },

بال

breakpoints: {
  480: {
    slidesPerView: 2,
    centeredSlides: true,
    spaceBetween: 0
  },
  800: {
    slidesPerView: 3,
    centeredSlides: true,
    spaceBetween: 0
  }
},

لعرض اكتر من slide مع اختلاف حجم الشاشات

في الevent click استبدل السطر

var spv=3; //this.params.slidesPerView-1;

بالسطر

var spv=this.params.slidesPerView-1;

بتاريخ On 1/20/2020 at 16:18 قال Hamada Sayed:

اضافه الevent click استخدم الكود ده

swiper.on('click', function (e) {
  var np=e.target;
  var spv=3; //this.params.slidesPerView-1;

  do{
    if (np.getAttribute("class").indexOf("news-slider-prev") != -1)
    {
      while(spv--) this.slidePrev(0, 0);
      break;
    } 
    else if (np.getAttribute("class").indexOf("news-slider-next") != -1)
    {
      while(spv--) this.slideNext(0, 0);
      break;
    }
  }while((np=np.parentNode) != null);
});

 

في الjson الممرر كوسيط ثاني لانشاء instance من الكائن Swiper استبدل السطر

slidesPerView: 'auto',
  بالسظر
slidesPerView: 1,
  
  

لعرض slide واحد في الشاشات اصغر من 480px

واستبدل ايضا

    breakpoints: {
        480: {
            spaceBetween: 0,
            centeredSlides: true
        }
    },

بال

breakpoints: {
  480: {
    slidesPerView: 2,
    centeredSlides: true,
    spaceBetween: 0
  },
  800: {
    slidesPerView: 3,
    centeredSlides: true,
    spaceBetween: 0
  }
},

لعرض اكتر من slide مع اختلاف حجم الشاشات

 

في الevent click استبدل السطر

var spv=3; //this.params.slidesPerView-1;

بالسطر

var spv=this.params.slidesPerView-1;

 

جميل، ما هو المقصود بالـ event click وأين أجده؟

بتاريخ منذ ساعة مضت قال عبدالله التميمي5:

ما هو المقصود بالـ event click

التفاعل مع المستخدم عند الضغط علي العناصر في html

بتاريخ منذ ساعة مضت قال عبدالله التميمي5:

وأين أجده؟

يمكنك اضافته في نهايه شفره الجافا سكربت في الكود الاصلي في tab Js

بتاريخ 52 دقائق مضت قال Hamada Sayed:

التفاعل مع المستخدم عند الضغط علي العناصر في html

 

يمكنك اضافته في نهايه شفره الجافا سكربت في الكود الاصلي في tab Js

حدث العكس تماماً، الذي كنت أرغب به التالي:

على الكمبيوتر:

عند النقر على زر الانتقال لليمين أو اليسار، يقوم بالانتقال إلى الـ ٣ نوافذ الأخرى كاملة دفعة واحدة.

على الهاتف:

يبقى الوضع كما هو، بحيث يعرض لي كل خدمة في نافذة لوحدها.

لكن للأسف الوضع الحالي كما ترى هنا:

https://alobailancpa.com/8/index.php

الكود يتفاعل مع المستخدم علي الكمبيوتر وينتقل 3 نوافذ لليمين واليسار وعلي الموبايل نافذه واحده 

لكن للانتقال دفعه واحده يجب استخدام واحده من الدوال slideTo, slideToLoop بدلا من الدوال slideNext, slidePrev