mirror of
https://github.com/kingomarnajjar/innovationdrive.git
synced 2026-07-25 22:27:27 +10:00
fixed carousel responsiveness
This commit is contained in:
YOUR NAME
parent
dfbbb147f7
commit
efb6968b93
1 changed files with 110 additions and 80 deletions
|
|
@ -1,96 +1,126 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
Carousel,
|
||||
CarouselItem,
|
||||
CarouselControl,
|
||||
CarouselIndicators,
|
||||
CarouselCaption
|
||||
} from 'reactstrap';
|
||||
// import React, { Component } from 'react';
|
||||
// import {
|
||||
// Carousel,
|
||||
// CarouselItem,
|
||||
// CarouselControl,
|
||||
// CarouselIndicators,
|
||||
// CarouselCaption
|
||||
// } from 'reactstrap';
|
||||
|
||||
// const items = [
|
||||
// {
|
||||
// // src: 'https://cdn.instructables.com/F8N/0W0Z/J1WW8DEP/F8N0W0ZJ1WW8DEP.LARGE.jpg',
|
||||
// src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
// altText: 'Product Design',
|
||||
// caption: 'Product Design'
|
||||
// },
|
||||
// {
|
||||
// src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
// altText: 'Slide 2',
|
||||
// caption: 'Slide 2'
|
||||
// },
|
||||
// {
|
||||
// src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
// altText: 'Slide 3',
|
||||
// caption: 'Slide 3'
|
||||
// }
|
||||
// ];
|
||||
|
||||
// class ClientStories extends Component {
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
// this.state = { activeIndex: 0 };
|
||||
// this.next = this.next.bind(this);
|
||||
// this.previous = this.previous.bind(this);
|
||||
// this.goToIndex = this.goToIndex.bind(this);
|
||||
// this.onExiting = this.onExiting.bind(this);
|
||||
// this.onExited = this.onExited.bind(this);
|
||||
// }
|
||||
|
||||
// onExiting() {
|
||||
// this.animating = true;
|
||||
// }
|
||||
|
||||
// onExited() {
|
||||
// this.animating = false;
|
||||
// }
|
||||
|
||||
// next() {
|
||||
// if (this.animating) return;
|
||||
// const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
|
||||
// this.setState({ activeIndex: nextIndex });
|
||||
// }
|
||||
|
||||
// previous() {
|
||||
// if (this.animating) return;
|
||||
// const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
|
||||
// this.setState({ activeIndex: nextIndex });
|
||||
// }
|
||||
|
||||
// goToIndex(newIndex) {
|
||||
// if (this.animating) return;
|
||||
// this.setState({ activeIndex: newIndex });
|
||||
// }
|
||||
|
||||
// render() {
|
||||
// const { activeIndex } = this.state;
|
||||
|
||||
// const slides = items.map((item) => {
|
||||
// return (
|
||||
// <CarouselItem
|
||||
// onExiting={this.onExiting}
|
||||
// onExited={this.onExited}
|
||||
// key={item.src}
|
||||
// >
|
||||
// <img src={item.src} alt={item.altText} />
|
||||
// <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
|
||||
// </CarouselItem>
|
||||
// );
|
||||
// });
|
||||
|
||||
// return (
|
||||
// <Carousel
|
||||
// activeIndex={activeIndex}
|
||||
// next={this.next}
|
||||
// previous={this.previous}
|
||||
// >
|
||||
// <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
|
||||
// {slides}
|
||||
// <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
|
||||
// <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
|
||||
// </Carousel>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// export default ClientStories;
|
||||
|
||||
|
||||
import React from 'react';
|
||||
import { UncontrolledCarousel } from 'reactstrap';
|
||||
|
||||
const items = [
|
||||
{
|
||||
src: 'https://cdn.instructables.com/F8N/0W0Z/J1WW8DEP/F8N0W0ZJ1WW8DEP.LARGE.jpg',
|
||||
altText: 'Product Design',
|
||||
caption: 'Product Design'
|
||||
altText: 'Slide 1',
|
||||
// caption: 'Slide 1',
|
||||
// header: 'Slide 1 Header'
|
||||
},
|
||||
{
|
||||
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
altText: 'Slide 2',
|
||||
caption: 'Slide 2'
|
||||
caption: 'Slide 2',
|
||||
header: 'Slide 2 Header'
|
||||
},
|
||||
{
|
||||
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
altText: 'Slide 3',
|
||||
caption: 'Slide 3'
|
||||
caption: 'Slide 3',
|
||||
header: 'Slide 3 Header'
|
||||
}
|
||||
];
|
||||
|
||||
class ClientStories extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { activeIndex: 0 };
|
||||
this.next = this.next.bind(this);
|
||||
this.previous = this.previous.bind(this);
|
||||
this.goToIndex = this.goToIndex.bind(this);
|
||||
this.onExiting = this.onExiting.bind(this);
|
||||
this.onExited = this.onExited.bind(this);
|
||||
}
|
||||
const Example = () => <UncontrolledCarousel items={items} />;
|
||||
|
||||
onExiting() {
|
||||
this.animating = true;
|
||||
}
|
||||
|
||||
onExited() {
|
||||
this.animating = false;
|
||||
}
|
||||
|
||||
next() {
|
||||
if (this.animating) return;
|
||||
const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
|
||||
this.setState({ activeIndex: nextIndex });
|
||||
}
|
||||
|
||||
previous() {
|
||||
if (this.animating) return;
|
||||
const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
|
||||
this.setState({ activeIndex: nextIndex });
|
||||
}
|
||||
|
||||
goToIndex(newIndex) {
|
||||
if (this.animating) return;
|
||||
this.setState({ activeIndex: newIndex });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { activeIndex } = this.state;
|
||||
|
||||
const slides = items.map((item) => {
|
||||
return (
|
||||
<CarouselItem
|
||||
onExiting={this.onExiting}
|
||||
onExited={this.onExited}
|
||||
key={item.src}
|
||||
>
|
||||
<img src={item.src} alt={item.altText} />
|
||||
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
|
||||
</CarouselItem>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Carousel
|
||||
activeIndex={activeIndex}
|
||||
next={this.next}
|
||||
previous={this.previous}
|
||||
>
|
||||
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
|
||||
{slides}
|
||||
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
|
||||
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
|
||||
</Carousel>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default ClientStories;
|
||||
export default Example;
|
||||
Loading…
Add table
Reference in a new issue