HEY!
Cool thing I’m having trouble implementing and have no idea on how to approach this so ideas appreciated.
I’m using Pure React Carousel to add a swipeable carousel of “testimonials” of guests for a property management website.
Here is the branch that’s deployed. As you can see, my testimonials component is on the very bottom: https://guestrealty-o0bjkqfx6.vercel.app/
Here is the branch its deployed to: Github Repo
In the Carousel documentation, to implement it seems all you have to do is the following:
import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';
export default class extends React.Component {
render() {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
totalSlides={3}
>
<Slider>
<Slide index={0}>I am the first Slide.</Slide>
<Slide index={1}>I am the second Slide.</Slide>
<Slide index={2}>I am the third Slide.</Slide>
</Slider>
</CarouselProvider>
);
}
}
So my thinking was to use a preprocessor to format the div’s of blockquote Gutenberg blog to format like a div above, then pull it into my testimonials component using HTML to react. I know that’s probably not the right way of doing it, but what I’m trying to achieve is the above code with how I implemented it below:
my Testimonials component:
import React from "react";
import { connect, styled } from "frontity"
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';
const Testimonial = ({ state, libraries }) => {
const data = state.source.get("/testimonials");
const quotes = state.source.page[data.id];
const Html2React = libraries.html2react.Component;
return (
<ContactContainer>
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
totalSlides={4}
>
<Slider>
<Html2React html={quotes.content.rendered} />
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
</ContactContainer>
);
};
export default connect(Testimonial);
const ContactContainer = styled.div`
padding: 5px;
`
my quotes preprocessor:
import React from 'react';
import { styled } from "frontity";
const Quote = ({ quote, author}) => {
console.log('Quote')
console.log({ quote, author})
return (
<Container>
<Blockquote>
<h3>" {quote} "</h3>
<h4>- {author} </h4>
</Blockquote>
</Container>
)
}
const quote = {
name: 'quote',
priority: 20,
test: ({ component, props }) => component === "blockquote" && props.className === "wp-block-quote",
processor: ({ node }) => {
const quote = node.children[0].children[0].content
const author = node.children[1].children[0].content
return{
component: Quote,
props: { quote, author}
}
},
}
export default quote;
const Container = styled.div`
background: #f6f2ec;
`
const Blockquote = styled.div`
background: #153211;
border: 2px solid #ccb25c;
border-radius: 25px;
padding: 10px;
margin: 10px;
h3{
color: #ccb25c;
font-weight: 800;
font-style: italic;
font-size: 2rem;
}
h4{
color: #f6f2ec;
}
`
How can I break up the HTML into separate divs that are rendered in HTML to react to become separate divs to make this carousel usable?
Currently, it seems that when I render the HTML, it renders the 4 divs generated from my quotes preprocessor as one giant div (which is why my slider only thinks there is only one slide?). I’m trying to make each blockquote in the green boxes as its own slide.
