react awesome slider

React Awesome Slider V3 [NEW PAGE Navigation HOC]

react-awesome-slider เป็น 60fps, ขยายได้, ปรับแต่งได้สูง, การผลิตส่วนประกอบ React พร้อมการผลิตที่แสดงผลสื่อ (ภาพ/วิดีโอ) ตัวเลื่อน/Carousel

HOC การนำทางเต็มหน้า

สำหรับการใช้งานนำทางแบบเต็มหน้าจอโปรดชำระเงินตัวอย่าง GatsbyJS และ NextJS ในพื้นที่เก็บข้อมูลกลยุทธ์ RAS FullPage

คุณสามารถเข้าถึงตัวอย่างสำหรับการนำทางเต็มหน้าได้ที่นี่: 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 >
) ; 

สูตรแอนิเมชั่น: ขยายออก, พับ, ลูกบาศก์, เปิดและตก

สำหรับการวิเคราะห์วิธีการสร้างภาพเคลื่อนไหวโปรดตรวจสอบโฟลเดอร์นี้ ยินดีต้อนรับความร่วมมือกับ Creative Ones ใหม่เพียงแค่เปิดการประชาสัมพันธ์

สูตรแอนิเมชั่นคิวบ์

ชำระเงินสูตรเพิ่มเติมในโฟลเดอร์สไตล์ สำหรับสูตรแอนิเมชั่นเพิ่มเติมลองดูโฟลเดอร์สไตล์

 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-cas ของไฟล์แอนิเมชัน 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 >
) ;

ใช้ Autoplay Hoc กับ 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 (Custom-Properties) (ไฟล์หลัก SCSS)
• สื่อล่วงหน้า
• เปิดใช้งาน
• แอนิเมชั่น 60fps
• สูตรการเปลี่ยนแปลงแบบเคลื่อนไหว
• ขยายได้ผ่านส่วนประกอบปลั๊กอินแบบกำหนดเอง
• Fullscreen ประสบความสำเร็จผ่าน Prop fillParent

อุปกรณ์ประกอบฉากหลัก

คุณลักษณะ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ชื่อชั้นเรียน	string	null	เพิ่มคลาสคลาสไปยังคอนเทนเนอร์ส่วนประกอบ
CSSmodule	object	null	วัตถุโมดูล CSS หากคุณเลือกใช้วิธีการจัดแต่งทรงผมนี้
ชื่อ	string	awesome-slider	ชื่อที่ไม่ซ้ำกันของแถบเลื่อนที่แสดงผล มีประโยชน์หากคุณนำทางระหว่างหลาย ๆ หน้าที่มีส่วนประกอบตัวเลื่อน
ที่เลือก	number	0	ตั้งค่าหน้าจอที่ใช้งานอยู่/เลือกปัจจุบัน
กระสุนปืน	boolean	true	เมื่อตั้งค่าเป็นจริงแสดงการควบคุมกระสุนใต้ตัวเลื่อน
อินทรีย์	boolean	true	เมื่อตั้งค่าเป็นจริงแสดงลูกศรอินทรีย์ next และการควบคุม prev
ซึ่งเติมเต็ม	boolean	false	เมื่อตั้งค่าเป็นจริงแถบเลื่อนจะเติมขนาดขององค์ประกอบหลัก มีประโยชน์สำหรับการใช้งานในโหมดเต็มหน้าจอ
ไม่มีที่สิ้นสุด	boolean	true	เมื่อตั้งค่าเป็นจริงแถบเลื่อนจะทำงานบนแฟชั่นที่ไม่มีที่สิ้นสุดเพื่อรักษาสไลด์แรกหลังจากอันสุดท้าย
หน้าจอสตาร์ทอัพ	node	null	ชุดส่วนประกอบหน้าจอเริ่มต้นที่จะแสดงก่อนที่จะโหลดหน้าจอแรก มันทำงานเหมือนหน้าจอโหลดล่วงหน้า
การเริ่มต้น	boolean	true	ใช้ร่วมกับการควบคุม startupScreen ว่า Startupscreen ควรเริ่มต้นโดยอัตโนมัติหรือไม่
การเปลี่ยนผ่าน	number	0	ตั้งค่าความล่าช้าใน ms ระหว่างการเปลี่ยนสไลด์ มีประโยชน์หากคุณกำลังรอการเคลื่อนไหวทางออกเพื่อให้เสร็จในสไลด์ปัจจุบัน
โทรศัพท์มือถือ	boolean	true	เมื่อตั้งค่าเป็นจริงจะเปิดใช้งานเอฟเฟกต์การสัมผัสเพื่อนำทางบนอุปกรณ์มือถือ
ปุ่ม	boolean	true	ควรแสดงปุ่มนำทางซ้ายและขวาเริ่มต้น
ButtonContentright	node	null	เพิ่มเนื้อหาเป็นลูกของปุ่มที่ถูกต้อง
ButtonContentleft	node	null	เพิ่มเนื้อหาเป็นลูกของปุ่มซ้าย
ประเพณี	node	null	แสดงเนื้อหาเพิ่มเติมในระดับเดียวกันของปุ่มเริ่มต้น มีประโยชน์หากคุณต้องการเพิ่มเลเยอร์การนำทางแถบเลื่อนพิเศษหรือองค์ประกอบการซ้อนทับคงที่
onfirstmount	function	null	เรียกว่า ComponentDidMount ผ่านการอ้างอิงตัวเลื่อนเป็นอาร์กิวเมนต์
ontransitionend	function	null	เรียกร้องที่เหตุการณ์การเปลี่ยนสไลเดอร์ผ่านการอ้างอิงตัวเลื่อนเป็นอาร์กิวเมนต์
ontransitionstart	function	null	เรียกว่าการเปลี่ยนเลื่อนเริ่มผ่านการอ้างอิงตัวเลื่อนเป็นอาร์กิวเมนต์
ontransitionRequest	function	null	เรียกว่าเมื่อผู้ใช้โต้ตอบกับการนำทางแถบเลื่อน (ลูกศรหรือกระสุน)

มีส่วนช่วย

หากคุณมีความคิดสำหรับคุณสมบัติที่ขาดหายไปหรือแอนิเมชั่นเพียงแค่สร้าง hoc feature หรือ animation style ของคุณเองและส่งผ่าน PR ไปยังโฟลเดอร์ src/components

ผู้เขียน

Rafael Caferati

• ชำระเงินเว็บไซต์พอร์ตโฟลิโอของนักพัฒนาเว็บของฉัน
• โครงการโอเพ่นซอร์สอื่น ๆ @ Code Laboratory
• ขอบเขตของผลงานของฉัน @ web Developer Portfolio

ใบอนุญาต

MIT ลิขสิทธิ์ (c) 2018 Rafael Caferati