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

سلايد باللمس scroll كما في موقع eBay

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

السؤال

السلام عليكم ورحمة الله وبركاته، أتمنى أن يكون الجميع بصحة جيدة ... أريد أن أسأل أيّ المكتبات توفر هذا السلايد الذي يكون على الأجهزة اللوحية والصغيرة ( انظر الفيديو المرفق من فضلك ) .. المثال من موقع eBay . 

تحياتي لكم وبالتوفيق للجميع .

Record_2020-09-11-22-19-52.mp4

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

Recommended Posts

  • 0
بتاريخ 38 دقائق مضت قال Motaz Khogali:

وعليكم السلام موجودة علي flutter 

 

باستخدام هذل الكود كمثال 


class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          height: 200, // card height
          child: PageView.builder(
            itemCount: 10,
            controller: PageController(viewportFraction: 0.7),
            onPageChanged: (int index) => setState(() => _index = index),
            itemBuilder: (_, i) {
              return Transform.scale(
                scale: i == _index ? 1 : 0.9,
                child: Card(
                  elevation: 6,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  child: Center(
                    child: Text(
                      "Card ${i + 1}",
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

 

أهلاً بك أستاذي؛ 

هل يمكنك إرشادي إلى دليل أو فيديو يوضح لي كيف أستخدم flutter في هذه المرحلة ؟ 

وشكرا لك مسبقاً .

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

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

السلام عليكم ورحمة الله وبركاته، أتمنى أن يكون الجميع بصحة جيدة ... أريد أن أسأل أيّ المكتبات توفر هذا السلايد الذي يكون على الأجهزة اللوحية والصغيرة ( انظر الفيديو المرفق من فضلك ) .. المثال من موقع eBay . 

تحياتي لكم وبالتوفيق للجميع .

Record_2020-09-11-22-19-52.mp4

أهلاً  بك 
هذا يسمى Carousel في الويب . يوجد له  استخدام في الbootstrap  و يمكن عمله  ال css و ال html و ال js 

اقدم لك هذا المثال الشبيه لما هو في الفديو الخاص بك .  

يمكنك التعديل على الملف . بما يناسب حاجتك . 
مرفق ملف فيه كود html css js 

شكراً لك 

op.JPG

index.html

بتاريخ 17 دقائق مضت قال عبد الواحد الحدادي:

أهلاً بك أستاذي؛ 

هل يمكنك إرشادي إلى دليل أو فيديو يوضح لي كيف أستخدم flutter في هذه المرحلة ؟ 

وشكرا لك مسبقاً .

flutter هو إطار عمل يعتمد  على لغة ال dart  البرمجية و هو مخصص لتطوير تطبيقات الأندرويد و ال ios 
و حتى الآن فهو غير مدعوم لتطوير الويب 
لذلك لا يمكنك إستخدامه في الموقع الخاص بكـ  و لا ينصح باستخدام الflutter لتطوير تطبيقات الويب بسبب انها غير مدعومة . 
عدى عن هذا فأنت تحتاج الى تعلم لغة برمجة جديدة و هي لغة ال dart و هذا سيكون محبط لك نوعاً ما بما أنك ما زلت في مرحلة التعلم . 
أرفقت لك حل للمشكلة  الخاصة بك بإستخدام ال html js css 

 

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

  • 0
بتاريخ On 9/11/2020 at 14:23 قال عبد الواحد الحدادي:

السلام عليكم ورحمة الله وبركاته، أتمنى أن يكون الجميع بصحة جيدة ... أريد أن أسأل أيّ المكتبات توفر هذا السلايد الذي يكون على الأجهزة اللوحية والصغيرة ( انظر الفيديو المرفق من فضلك ) .. المثال من موقع eBay . 

تحياتي لكم وبالتوفيق للجميع .

Record_2020-09-11-22-19-52.mp4

مرحبًا عبد الواحد.

يمكنك بناء الslider الموجود في المثال المرفق باستخدام html و css فقط دون الحاجة إلى استخدام أي مكتبات كما يلي:

أكواد html:

<div class="slider">

  <div class="slider__item">
    <img class="slider__image" src="image1.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image2.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image3.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image4.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image5.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image6.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image7.png" alt="" >
  </div>
  
</div>

أكواد css:

.slider {
  display: flex; /*تظهر على هيئة صف slider ستقوم هذه الخاصية بجعل محتويات الحاوية */
  
  overflow-x: scroll; /* حتى نرى باقي العناصر scroll بعدها نستخدم هذه الخاصية حتى نتمكن من عمل  */
  
  /* IE, Edge and Firefox في المتصفحات scroll baar نستخدم التنسيقين التاليين إذا أردنا إخفاء ال */
  
  -ms-overflow-style: none;   /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Chrome, Safari and Opera في المتصفحات scroll baar نستخدم التنسيقين التاليين إذا أردنا إخفاء ال */
  
.slider::-webkit-scrollbar {
  display: none;
}

.slider__image {
  width: 150px;
}

 

نتيجة الأكواد السابقة:

repl.it.mp4

ملفات الأكواد إذا أردت تجربتها: ThoroughWateryWireframes.zip

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

  • -2

وعليكم السلام موجودة علي flutter 

 

باستخدام هذل الكود كمثال 

class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          height: 200, // card height
          child: PageView.builder(
            itemCount: 10,
            controller: PageController(viewportFraction: 0.7),
            onPageChanged: (int index) => setState(() => _index = index),
            itemBuilder: (_, i) {
              return Transform.scale(
                scale: i == _index ? 1 : 0.9,
                child: Card(
                  elevation: 6,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  child: Center(
                    child: Text(
                      "Card ${i + 1}",
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...