Skip to content

Commit

Permalink
Merge pull request #2244 from akiran/function-component-examples
Browse files Browse the repository at this point in the history 
Function component examples
  • Loading branch information
@akiran
akiran authored Jun 5, 2023
2 parents 0d30a59 + 45e92f0 commit 5558419
Show file tree
Hide file tree
Showing 32 changed files with 1,293 additions and 1,316 deletions.
79 changes: 39 additions & 40 deletions examples/AdaptiveHeight.js
View file
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;
111 changes: 55 additions & 56 deletions examples/AppendDots.js
View file
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;
139 changes: 65 additions & 74 deletions examples/AsNavFor.js
View file
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;
Loading

0 comments on commit 5558419

Please sign in to comment.