Unduh react awesome slider - react awesome slider Source Source Code Download

react awesome slider

Kode Sumber AI

v3.3.0

Unduh

React Awesome Slider V3 [Hoc Navigasi Lengkap Baru]

react-awesome-slider adalah komponen reaksi siap 60fps, dapat diperpanjang, sangat dapat disesuaikan, dan membuat slider/carousel galeri media (gambar/video).

Hoc Navigasi Penggunaan Penggunaan

Untuk menggunakan HOC navigasi layar penuh, silakan checkout contoh GatsbyJS dan NextJS pada repositori strategi ras fullpage.

Anda dapat mengakses demo untuk Navigasi Penggunaan Full di sini: FullPage.caferati.me

Demo React-Awesome-Slider

Penggunaan dasar

Demo React-Awesome-Slider

Penggunaan Dasar dengan CSS murni

 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 >
) ;

Resep animasi: skala-out, lipat, kubus, terbuka dan jatuh.

Untuk menganalisis bagaimana animasi dibangun, silakan periksa ke folder ini. Kolaborasi dengan yang kreatif baru dipersilakan, cukup buka PR.

Demo React-Awesome-Slider

Resep Animasi Kubus

Periksa lebih banyak resep pada folder gaya. Untuk lebih banyak resep animasi, lihat folder gaya.

 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 >
) ;

Sentuhan diaktifkan

Demo React-Awesome-Slider

Demo langsung

CHECKOUT CSS customizer DI Portofolio Saya

File figma

Impor komponen langsung ke proyek FIGMA Anda.

Menginstal

 npm install --save react-awesome-slider

atau

 yarn add react-awesome-slider

Lebih banyak contoh

Penggunaan Dasar dengan Objek Media

 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' ,
      } ,
    ] }
  />
) ;

Penggunaan Dasar dengan Modul 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 >
) ;

Resep animasi lipat dengan modul CSS

Periksa lebih banyak resep pada folder gaya. Untuk lebih banyak resep animasi, lihat folder gaya.

Perhatikan bahwa pada v3 ada pemujaan terhadap prop animation . Nama animasi adalah versi cammel dari file CSS animasi.

 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 >
) ;

Menggunakan Autoplay Hoc dengan CSS biasa

 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 >
) ;

Menggunakan Captioned Hoc dengan CSS biasa

 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." ,
      } ,
    ] }
  />
) ;

Fitur utama

Lihat dan rasakan dapat disesuaikan dan dapat diperpanjang melalui variabel SASS dan CSS (Properti Kustom) (file utama SCSS)
Pra-Loader Media
Sentuhan diaktifkan
Animasi 60fps
Resep transisi animasi
Dapat diperpanjang melalui komponen hoc plugin khusus
Layar penuh dicapai melalui prop fillParent

Alat peraga utama

Atribut	Jenis	Bawaan	Keterangan
ClassName	`string`	`null`	Tambahkan nama class ke wadah komponen
cssmodule	`object`	`null`	Objek Modul CSS Jika Anda memilih untuk menggunakan pendekatan gaya ini
nama	`string`	`awesome-slider`	Nama unik dari slider yang diberikan. Berguna jika Anda menavigasi di antara beberapa halaman yang berisi komponen slider.
terpilih	`number`	`0`	Menetapkan layar aktif/terpilih saat ini
peluru	`boolean`	`true`	Saat diatur ke True Show, kontrol peluru di bawah slider
Organicarrows	`boolean`	`true`	Saat diatur ke true show panah organik `next` dan kontrol `prev`
isiparen	`boolean`	`false`	Saat diatur ke true, slider akan mengisi dimensi elemen induk. Usefull untuk menggunakannya dalam mode layar penuh.
tak terbatas	`boolean`	`true`	Ketika diatur ke True, slider akan berperilaku pada cara yang tak terbatas yang memikat kembali ke slide pertama setelah yang terakhir.
Layar Startup	`node`	`null`	Atur komponen layar startup yang akan ditampilkan sebelum layar pertama dimuat. Ini berfungsi seperti layar pra-pemuatan.
rintisan	`boolean`	`true`	Digunakan bersama dengan `startupScreen` mengontrol apakah startupscreen harus start secara otomatis atau tidak.
TransitionDelay	`number`	`0`	Menetapkan penundaan `ms` antara transisi slide. Berguna jika Anda menunggu animasi keluar untuk menyelesaikan di slide saat ini.
MobileTouch	`boolean`	`true`	Saat diatur ke True mengaktifkan efek sentuh gesek untuk menavigasi pada perangkat seluler.
tombol	`boolean`	`true`	Harus membuat tombol navigasi kiri dan kanan default.
ButtonContentRight	`node`	`null`	Tambahkan konten sebagai anak -anak dari tombol kanan.
ButtonContentLeft	`node`	`null`	Tambahkan konten sebagai anak -anak dari tombol kiri.
KESUHAN Kustom	`node`	`null`	Render konten ekstra pada tingkat yang sama dari tombol default. Berguna jika Anda ingin menambahkan lapisan navigasi slider tambahan atau elemen overlay tetap
OnFirstMount	`function`	`null`	Dipanggil pada ComponentDidMount yang meneruskan referensi slider sebagai argumen
Ontransitionend	`function`	`null`	Dipanggil di acara akhir transisi slider yang melewati referensi slider sebagai argumen
OntransitionStart	`function`	`null`	Dipanggil transisi slider mulai melewati referensi slider sebagai argumen
OntransitionRequest	`function`	`null`	Dipanggil saat pengguna berinteraksi dengan navigasi slider (panah atau peluru)

Menyumbang

Jika Anda memiliki ide untuk fitur atau animasi yang hilang, cukup buat hoc feature atau animation style Anda sendiri dan kirimkan melalui PR ke folder src/components .