From efb6968b933b0c52a0b8f6f5f470b9e594fa4785 Mon Sep 17 00:00:00 2001 From: YOUR NAME Date: Sun, 8 Jul 2018 21:24:11 +1000 Subject: [PATCH] fixed carousel responsiveness --- src/components/clientStories.js | 190 ++++++++++++++++++-------------- 1 file changed, 110 insertions(+), 80 deletions(-) diff --git a/src/components/clientStories.js b/src/components/clientStories.js index 7c30a62..6a1e671 100644 --- a/src/components/clientStories.js +++ b/src/components/clientStories.js @@ -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 ( +// +// {item.altText} +// +// +// ); +// }); + +// return ( +// +// +// {slides} +// +// +// +// ); +// } +// } + + +// 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 = () => ; - 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 ( - - {item.altText} - - - ); - }); - - return ( - - - {slides} - - - - ); - } -} - - -export default ClientStories; \ No newline at end of file +export default Example; \ No newline at end of file