forked from akiran/react-slick
-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request akiran#2244 from akiran/function-component-examples
Function component examples
- Loading branch information
Showing
32 changed files
with
1,293 additions
and
1,316 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,44 @@ | ||
| import React from "react"; | ||
| import Slider from "../src/slider"; | ||
|
|
||
| const AdaptiveHeight = () => { | ||
|
|
||
| const settings = { | ||
| className: "", | ||
| dots: true, | ||
| infinite: true, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| adaptiveHeight: true | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2>Adaptive height</h2> | ||
| <Slider {...settings}> | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| <div> | ||
| <h3>2</h3> | ||
| <p>Hello</p> | ||
| </div> | ||
| <div> | ||
| <h3>3</h3> | ||
| <p>See ....</p> | ||
| <p>Height is adaptive</p> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| </div> | ||
| ); | ||
| } | ||
| function AdaptiveHeight() { | ||
| const settings = { | ||
| className: "", | ||
| dots: true, | ||
| infinite: true, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| adaptiveHeight: true | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2>Adaptive height</h2> | ||
| <Slider {...settings}> | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| <div> | ||
| <h3>2</h3> | ||
| <p>Hello</p> | ||
| </div> | ||
| <div> | ||
| <h3>3</h3> | ||
| <p>See ....</p> | ||
| <p>Height is adaptive</p> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default AdaptiveHeight; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,60 @@ | ||
| import React, { Component } from "react"; | ||
| import React from "react"; | ||
| import Slider from "../src/slider"; | ||
|
|
||
| export default class AppendDots extends Component { | ||
| render() { | ||
| const settings = { | ||
| dots: true, | ||
| infinite: true, | ||
| speed: 500, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| appendDots: dots => ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: "#ddd", | ||
| borderRadius: "10px", | ||
| padding: "10px" | ||
| }} | ||
| > | ||
| <ul style={{ margin: "0px" }}> {dots} </ul> | ||
| function AppendDots() { | ||
| const settings = { | ||
| dots: true, | ||
| infinite: true, | ||
| speed: 500, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| appendDots: dots => ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: "#ddd", | ||
| borderRadius: "10px", | ||
| padding: "10px" | ||
| }} | ||
| > | ||
| <ul style={{ margin: "0px" }}> {dots} </ul> | ||
| </div> | ||
| ), | ||
| customPaging: i => ( | ||
| <div | ||
| style={{ | ||
| width: "30px", | ||
| color: "blue", | ||
| border: "1px blue solid" | ||
| }} | ||
| > | ||
| {i + 1} | ||
| </div> | ||
| ) | ||
| }; | ||
| return ( | ||
| <div> | ||
| <h2>Append Dots</h2> | ||
| <Slider {...settings}> | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| ), | ||
| customPaging: i => ( | ||
| <div | ||
| style={{ | ||
| width: "30px", | ||
| color: "blue", | ||
| border: "1px blue solid" | ||
| }} | ||
| > | ||
| {i + 1} | ||
| <div> | ||
| <h3>2</h3> | ||
| </div> | ||
| ) | ||
| }; | ||
| return ( | ||
| <div> | ||
| <h2>Append Dots</h2> | ||
| <Slider {...settings}> | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| <div> | ||
| <h3>2</h3> | ||
| </div> | ||
| <div> | ||
| <h3>3</h3> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| </div> | ||
| ); | ||
| } | ||
| <div> | ||
| <h3>3</h3> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| </div> | ||
| ); | ||
| } | ||
| export default AppendDots; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,69 @@ | ||
| import React, { Component } from "react"; | ||
| import React, { useState, useEffect, useRef } from "react"; | ||
| import Slider from "../src/slider"; | ||
|
|
||
| export default class AsNavFor extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| nav1: null, | ||
| nav2: null | ||
| }; | ||
| } | ||
| function AsNavFor(props) { | ||
| const [nav1, setNav1] = useState(null); | ||
| const [nav2, setNav2] = useState(null); | ||
| let sliderRef1 = useRef(null); | ||
| let sliderRef2 = useRef(null); | ||
|
|
||
| componentDidMount() { | ||
| this.setState({ | ||
| nav1: this.slider1, | ||
| nav2: this.slider2 | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <h2>Slider Syncing (AsNavFor)</h2> | ||
| <h4>First Slider</h4> | ||
| <Slider | ||
| asNavFor={this.state.nav2} | ||
| ref={slider => (this.slider1 = slider)} | ||
| > | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| <div> | ||
| <h3>2</h3> | ||
| </div> | ||
| <div> | ||
| <h3>3</h3> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| <h4>Second Slider</h4> | ||
| <Slider | ||
| asNavFor={this.state.nav1} | ||
| ref={slider => (this.slider2 = slider)} | ||
| slidesToShow={3} | ||
| swipeToSlide={true} | ||
| focusOnSelect={true} | ||
| > | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| <div> | ||
| <h3>2</h3> | ||
| </div> | ||
| <div> | ||
| <h3>3</h3> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| </div> | ||
| ); | ||
| } | ||
| useEffect(() => { | ||
| setNav1(sliderRef1); | ||
| setNav2(sliderRef2); | ||
| }, []); | ||
| return ( | ||
| <div> | ||
| <h2>Slider Syncing (AsNavFor)</h2> | ||
| <h4>First Slider</h4> | ||
| <Slider asNavFor={nav2} ref={slider => (sliderRef1 = slider)}> | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| <div> | ||
| <h3>2</h3> | ||
| </div> | ||
| <div> | ||
| <h3>3</h3> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| <h4>Second Slider</h4> | ||
| <Slider | ||
| asNavFor={nav1} | ||
| ref={slider => (sliderRef2 = slider)} | ||
| slidesToShow={3} | ||
| swipeToSlide={true} | ||
| focusOnSelect={true} | ||
| > | ||
| <div> | ||
| <h3>1</h3> | ||
| </div> | ||
| <div> | ||
| <h3>2</h3> | ||
| </div> | ||
| <div> | ||
| <h3>3</h3> | ||
| </div> | ||
| <div> | ||
| <h3>4</h3> | ||
| </div> | ||
| <div> | ||
| <h3>5</h3> | ||
| </div> | ||
| <div> | ||
| <h3>6</h3> | ||
| </div> | ||
| </Slider> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default AsNavFor; |
Oops, something went wrong.