اذهب إلى المحتوى
  • 0

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

عبدالله ابو حميد

السؤال

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

أرغب في تغيير طريقة عرض قسم "الخدمات المقدمة" هنا: https://alobailancpa.com/7/index.php

حيث عند النقر على أزرار الأسهم للانتقال جهة اليمين أو اليسار، يتم الانتقال إلى مربع واحد فقط وهو المربع التالي، ما أريده هو عند النقر على زر اليمين أو اليسار تتغير كامل العناصر الموجودة إلى عناصر أخرى جديدة بمعنى يعرض ٣ خدمات جديدة وليس خدمة واحدة فقط، مع مراعاة أن تصفح الهواتف والشاشات الصغيرة يبقى على حاله (كل خدمة تعرض بشكل منفصل).

 

شكراً جزيلاً.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

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

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

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

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

 

تم التعديل في بواسطة عبدالله التميمي5
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 

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

 

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

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

 

شكراً

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 وأين أجده؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

 

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

وأين أجده؟

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 

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

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

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

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

على الهاتف:

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

 

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

 

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...