react awesome slider Download - react awesome slider Source Code Download

react awesome slider

كود الذكاء الاصطناعي

v3.3.0

تنزيل

رد فعل رهيبة Slider v3 [Full Phapage Navigation Hoc]

react-awesome-slider هو مكون React-Awesome-Sovery 60 إطارًا في الثانية ، وهو مكون React React القابل للتخصيص ، والذي يعرض عرض/معرض Media (Image/Video).

full -page الملاحة المخصص

لاستخدام مخصصات التنقل على الشاشة كاملة ، يرجى الخروج من أمثلة GatsbyJS و NextJS على مستودع استراتيجيات RAS Full Page.

يمكنك الوصول إلى العرض التوضيحي للتنقل full -page هنا: fullpage.caferati.me

رد فعل ردود الفعل العزم

الاستخدام الأساسي

رد فعل ردود الفعل العزم

الاستخدام الأساسي مع CSS النقي

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/styles.css' ;

const slider = (
  < AwesomeSlider >
    < div > 1 </ div >
    < div > 2 </ div >
    < div > 3 </ div >
    < div > 4 </ div >
  </ AwesomeSlider >
) ;

وصفات الرسوم المتحركة: التوسع ، طي ، مكعب ، مفتوح وسقوط.

لتحليل كيفية بناء الرسوم المتحركة ، يرجى مراجعة هذا المجلد. نرحب بالتعاون مع Ones Creative الجديد ، فقط افتح العلاقات العامة.

رد فعل ردود الفعل العزم

مكعب وصفة الرسوم المتحركة

الخروج المزيد من الوصفات على المجلد المصمم. لمزيد من وصفات الرسوم المتحركة ، تحقق من المجلد المصمم.

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/custom-animations/cube-animation.css' ;

const slider = (
  < AwesomeSlider animation = "cubeAnimation" >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

تمكين اللمس

رد فعل ردود الفعل العزم

عرض مباشر

الخروج من CSS customizer في محفظتي

ملف FIGMA

استيراد المكون مباشرة في مشروع Figma الخاص بك.

التثبيت

 npm install --save react-awesome-slider

أو

 yarn add react-awesome-slider

المزيد من الأمثلة

الاستخدام الأساسي مع كائن الوسائط

 import AwesomeSlider from 'react-awesome-slider' ;
import 'react-awesome-slider/dist/styles.css' ;

const slider = (
  < AwesomeSlider
    media = { [
      {
        source : '/path/to/image-0.png' ,
      } ,
      {
        source : '/path/to/image-1.png' ,
      } ,
      {
        source : '/path/to/image-2.png' ,
      } ,
    ] }
  />
) ;

الاستخدام الأساسي مع وحدات CSS

 import AwesomeSlider from 'react-awesome-slider' ;
import AwesomeSliderStyles from 'react-awesome-slider/src/styles' ;

const slider = (
  < AwesomeSlider cssModule = { AwesomeSliderStyles } >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

وصفة الرسوم المتحركة للطي مع وحدات CSS

الخروج المزيد من الوصفات على المجلد المصمم. لمزيد من وصفات الرسوم المتحركة ، تحقق من المجلد المصمم.

لاحظ أنه على V3 ، هناك تعديل لدعوة الرسوم animation . اسم الرسوم المتحركة هو الإصدار المغطى بـ Cammel من ملف CSS الرسوم المتحركة.

 import AwesomeSlider from 'react-awesome-slider' ;
import CoreStyles from 'react-awesome-slider/src/core/styles.scss' ;
import AnimationStyles from 'react-awesome-slider/src/styled/fold-out-animation/fold-out-animation.scss' ;

const slider = (
  < AwesomeSlider
    animation = "foldOutAnimation"
    cssModule = { [ coreStyles , animationStyles ] }
  >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AwesomeSlider >
) ;

باستخدام تلقائي المخصص مع CSS العادي

 import AwesomeSlider from 'react-awesome-slider' ;
import withAutoplay from 'react-awesome-slider/dist/autoplay' ;
import 'react-awesome-slider/dist/styles.css' ;

const AutoplaySlider = withAutoplay ( AwesomeSlider ) ;

const slider = (
  < AutoplaySlider
    play = { true }
    cancelOnInteraction = { false } // should stop playing on user interaction
    interval = { 6000 }
  >
    < div data-src = "/path/to/image-0.png" />
    < div data-src = "/path/to/image-1.png" />
    < div data-src = "/path/to/image-2.jpg" />
  </ AutoplaySlider >
) ;

باستخدام المخصص التعليق مع CSS العادي

 import AwesomeSlider from 'react-awesome-slider' ;
import withCaption from 'react-awesome-slider/dist/captioned' ;
import 'react-awesome-slider/dist/styles.css' ;
import 'react-awesome-slider/dist/captioned.css' ;

const CaptionedSlider = withCaption ( AwesomeSlider ) ;

const component = (
  < CaptionedSlider
    startupScreen = { StartupScreen }
    cssModule = { CaptionedStyles }
    screens = { [
      {
        backgroundColor : '#4a9c8c' ,
        media : '/images/series/ricknmorty-3.png' ,
        caption : 'I want to see what you got.' ,
      } ,
      {
        backgroundColor : '#4a9c8c' ,
        media : '/images/series/ricknmorty-3.png' ,
        caption : "The answer is -- Don't think about it." ,
      } ,
    ] }
  />
) ;

الميزات الرئيسية

انظر وشعور قابل للتخصيص وقابل للتمديد عبر متغيرات SASS و CSS (ملفات مخصصة) (ملف SCSS الرئيسي)
وسائل الإعلام قبل التحميل
تمكين اللمس
60 إطارًا في الثانية الرسوم المتحركة
وصفات انتقالية متحركة
قابلة للتمديد عبر مكونات مخصصة مخصصة مخصصة
تم تحقيق شاشة ملء الشاشة من خلال fillParent Prop

الدعائم الرئيسية

صفات	يكتب	تقصير	وصف
اسم الفصل	`string`	`null`	أضف اسم className إلى حاوية المكون
CSSModule	`object`	`null`	كائن وحدة CSS إذا اخترت استخدام نهج التصميم هذا
اسم	`string`	`awesome-slider`	اسم فريد من شريط التمرير المقدم. مفيد إذا كنت تتنقل بين صفحات متعددة تحتوي على مكون منزلق.
محدد	`number`	`0`	يضبط الشاشة النشطة/المحددة الحالية
الرصاص	`boolean`	`true`	عندما يتم تعيينه على TRUE ، أظهر عناصر التحكم في الرصاصة أسفل شريط التمرير
الحرارات العضوية	`boolean`	`true`	عند تعيينه على TRUE ، أظهر السهم العضوي `next` وضوابط `prev`
FillParent	`boolean`	`false`	عند ضبطه على TRUE ، سيملأ التمرير أبعاد العنصر الأصل. مفيد لاستخدامه في وضع شاشة كاملة.
لانهائي	`boolean`	`true`	عندما يتم تعيينه على True ، سيتصرف شريط التمرير بأسلوب لا حصر له إلى الشريحة الأولى بعد آخرها.
بدء التشغيل	`node`	`null`	Set's مكون شاشة بدء التشغيل ليتم عرضه قبل تحميل الشاشة الأولى. إنه يعمل مثل شاشة التحميل المسبق.
بدء	`boolean`	`true`	يستخدم مع بدء تشغيل `startupScreen` ما إذا كان يجب بدء تشغيل بدء التشغيل أو لا.
TransitionDelay	`number`	`0`	يضع تأخير في `ms` بين انتقالات الشريحة. مفيد إذا كنت تنتظر أن تنتهي الرسوم المتحركة للخروج في الشريحة الحالية.
موبيليتش	`boolean`	`true`	عندما يتم ضبطه على True ، ينشط تأثير اللمس المنقح للتنقل على الأجهزة المحمولة.
أزرار	`boolean`	`true`	يجب تقديم أزرار التنقل اليسرى واليمين الافتراضية.
ButtonContentRight	`node`	`null`	أضف المحتوى كأطفال من الزر الأيمن.
ButtonContentleft	`node`	`null`	أضف المحتوى كأطفال من الزر الأيسر.
customcontent	`node`	`null`	تقديم محتوى إضافي في نفس المستوى من الأزرار الافتراضية. مفيد إذا كنت ترغب في إضافة طبقة تنقل إضافية أو عنصر تراكب ثابت
onfirstmount	`function`	`null`	تم استدعاء مكونديميت مرجع التمرير كوسيطة
ontransitionend	`function`	`null`	تم استدعاء في الحدث النهائي الانتقالي المنزلق مرجعًا للمنزلق كوسيطة
onTransitionStart	`function`	`null`	استدعاء انتقال شريط التمرير ابدأ في تمرير مرجع التمرير كوسيطة
ontransitionRequest	`function`	`null`	يسمى عندما يتفاعل المستخدم مع التنقل المنزلق (الأسهم أو الرصاص)