I have a dummy testimonials.I want to display it as a slider.
I am using React-Bootstrap but I am not able to get the desired result.
Here is the code.
const testimonial: [
{
content:
'Over all though it was a great experience and we have had lots of great feedback. We already started promoting our next event and I have been approached by 4 other companies who want to know more about it as they want to use it for their own events.',
author: 'Sarah M., Director of Events',
},
{
content:
'I cannot tell you how much we loved using this silent auction software. Everything was seamless…from set up, to bidding, to payment. We will absolutely use MyEvent next year.',
author: 'Sarah M., CCHS Foundation',
},
{
content:
"I tried MyEvent instead of typical paper raffle tickets. The system was easy to set up online and people who couldn't attend the event were still able to enter the raffle, which was HUGE bump in revenue.",
author: 'Alexander B., Pan-Mass Challenge',
},
{
content:
'MyEvent is a great way to bring in money for your Fund A Need. The 24/7 tech support allows you to feel confident, and the platform makes your Fund a Need so much easier to run. Well definitely be using MyEvent again.',
author: 'Amy C., One Less Orphan Fund',
},
]
testimonial.map((item, index) => (
<div key={index}>
{ item.content && (
<div className="aceele-infos" key={index}>
<Carousel>
<Carousel.Item>
<Carousel.Caption>
<span className="signup-infos">{`"${item.content}"`}</span>
<div className="awnor-infos">
<span className="signup-infos">
{`-`}
{item.author}
</span>
</div>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
But I am not getting the result how I want.
Here is an image how I want.
You need to map over your Carousel Items and not the entire div because you only want the carousel items to repeat inside the carousel and not the entire carousel.
Your return statement would look something like this:
<div>
<Carousel interval={1000}>
{testimonial.map((c, index) => {
return (
<Carousel.Item interval={5000}>
<div style={{ height: 500, background: "black", color: "white" }}>
<p>{c.content}</p>
</div>
<Carousel.Caption>
<p>{c.author}</p>
</Carousel.Caption>
</Carousel.Item>
);
})}
</Carousel>
</div>
I also have a working example for you in codesandbox below
https://codesandbox.io/s/interesting-aryabhata-qsb9g?file=/src/App.js:1332-1796
Related
Im looking for a solution to build a Template website in React which displays a Carousel with 3 different Images on the Left Part and a Informational Part on the Right with A Title, some Attributes and a Description. I dont want to Copy and Paste the Website all the Time to rewrite every element and Change the Pictures. The Barebone of my Page is done, i just need the Solution to probably make an Array and depended on the Image which is clicked, youre getting to the mentioned DescriptionPage filled with the Information based on the clicked Image.
const DescriptionPage = () => {
return (
<>
<div className='CardDescriptionContainer'>
<Carousel>
<CarouselItem><img alt="Fool" className='image-carousel' src={Fool} draggable="false"/></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={ThothFool} draggable="false"/></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={JDFool} draggable="false"/></CarouselItem>
</Carousel>
<div className='CardDescription '>
<div className='Title'>
<h1>The Fool</h1>
</div>
<div className='Element'>
<h2>Element</h2>
<p>Air</p>
</div>
<div className='Zodiac'>
<h3>Zodiac / Planet</h3>
<p>Uranus</p>
</div>
<div className='Qualities'>
<h3>Qualities</h3>
<p>Freedom <br/>
Lust for Life<br/>
Beginnings<br/>
Adventure</p>
</div>
<div className='Symbols'>
<h3>Symbols</h3>
<p> White Rose <br/>
Small Bundle<br/>
Small Animal<br/>
Precipice</p>
</div>
<div className='ShortDescription'>
<h2>Description</h2>
<p>Into the Unkown.... this is placeholder Text for the Fool as he is, a Placeholder, the nothing before there is with all the Options to go anywhere and be anyone he'd like to. Pure AIR!</p>
</div>
</div>
</div>
</>
)
}
export default DescriptionPage
I was trying to find the Correct Syntax and was thinking about Mapping over an Array containing the Data but i dont know how to choose the correct Array or Dataset based on the clicked Image. Would i use useState to change the State of the Page itself or is it the best approach to "load" the Description Page with the Data stored in a different file?
You can write like this, if I understand you correctly
const INTIAL_VALUES = [
{
className: "Title",
heading: "The Fool",
paragraph: ""
},
{
className: "Element",
heading: "Element",
paragraph: "Air"
}, {
className: "Zodiac",
heading: "Zodiac / Planet",
paragraph: "Uranus"
}, {
className: "Qualities",
heading: "Qualities",
paragraph: "Freedom Lust for Life Beginnings Adventure"
}]
const DescriptionPage = () => {
const [state, setState] = useState(INTIAL_VALUES)
return (
<>
<div className='CardDescriptionContainer'>
<Carousel>
<CarouselItem><img alt="Fool" className='image-carousel' src={Fool} draggable="false" /></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={ThothFool} draggable="false" /></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={JDFool} draggable="false" /></CarouselItem>
</Carousel>
<div className='CardDescription '>
{state.map((element, key) => (<div key={key} className={element.className}>
<h3>{element.heading}</h3>
<p>{element.paragraph}</p>
</div>))}
</div>
</div>
</>
)
}
export default DescriptionPage
I'd like to create the desired results as seen here.
Please view in Desktop widescreen. AirBnb results.
As you can see with the AirBnb results, the Map on the Righthand side sticks perfectly into place while allowing the user to scroll down to view the results on the Lefthand side.
I've been trying to figure out how they have achieved this but am reaching some road blocks. I found some luck with implementing this bit of code but there is still a slight amount of vertical scrolling before the bottom of the map snaps into place. I believe it has to do with the h-screen class making the map height: 100vh
<main className="flex">
{/* Results & Filters section - Left side */}
<section className='flex-grow'>
<div className='lg:inline-flex mt-5 mb-5 space-x-3 text-gray-800 whitespace-no-wrap'>
<p className='custom-button'>Cancellation Flexibility</p>
<p className='custom-button'>Type of Place</p>
<p className='custom-button'>Price</p>
<p className='custom-button'>Rooms and Beds</p>
<p className='custom-button'>More Filters</p>
</div>
<div className="flex flex-col">
{/* Search results */}
{searchResults.map(
({ img, location, title, description, star, price, total }) => (
<InfoCard
key={img}
img={img}
location={location}
title={title}
description={description}
star={star}
price={price}
total={total}
/>
))}
</div>
</section>
{/* Map section - Right side */}
<aside className="hidden h-screen w-[50%] sticky xl:inline-flex l:min-w-[600px] top-0">
<Map searchResults={searchResults} />
</aside>
</main>
Some help would be greatly appreciated. I've started a codesandbox to make it easier to see what I'm experiencing. Please view in Desktop widescreen
https://codesandbox.io/s/determined-bartik-2tftc?file=/pages/index.js
[Edit] : I just noticed the left side is hidden by the map now since the map is out of the flex flow. I'll keep the answer as an idea. If you can manipulate the architecture of the page, it's easy to fix.
Looks like applying :
position: fixed;
right: 0;
justify-content: end;
to the aside tag that contains the map and removing its top-0 class fix your problem. I see that you are using an external library to display the map so I don't know if there is a way to apply css to it since I can't edit the codesandbox sorry. You could just wrap it in a span with a class and target it with .my-class > aside in your css. But first check the documentation, they are probably exposing some classes for you to apply styles.
So I seemed to have solved this. Took a bit of work but I achieved the result I was looking for.
I added some root css here in globals.css file
:root {
--navigation-bar-offset: 90px;
--gp-placement-max-height: calc(100vh - var(--navigation-bar-offset, 80px));
}
I utilized these root class names to be used in index.js on the component parent div
<div className="w-full
sticky
top-[var(--navigation-bar-offset,80px)]
h-[var(--gp-placement-max-height,auto)]">
<MapBox searchResults={searchResults} />
</div>
I also found, that Mapbox was overriding my height from it's setViewport callback in Map.js. So I overrode Mapbox by adding this code in Map.js in the onViewportChange.
onViewportChange={nextViewport => setViewPort({ ...nextViewport, width: "100%", height: "100%" })}
I updated the Codesandbox to reflect these changes.
Also, if you resize the browser, it maintains height and width.
So I am trying to animate a container with an background image and some text. I have set a config of duration and opacity of 0 to an opacity of 1 but the component loads normally. I do have the component as part of a private route. Its the page that displays after loggin in.
to= {{opacity:1, marginTop:0 }}
config = {{delay:4000, duration:4000}}>
{(props) => (
<div style={props}>
<div style={{ backgroundImage: `url(${cancer})`}} className="container-img">
<h2> What is Cancer?</h2>
<p className="paragraph">
The dogmatic view of cancer has been around for a long time.
This view is called the Somatic Mutation Theory. This Theory is
believed that cancer arises from damaged DNA in the cells that
causes out of ccontrol growth.
</p>
<p className="paragraph">
New Evidence shows that Cancer is caused by the damage to the
mitochondria causing the cells to fall back on ancient pathways
of fermentation. Cancer cells ferment Glucose and/or Glutamine
for energy or ATP.
</p>
<p className="paragraph">
If Cancer is a genetic disease, then why when they did a
scientic experiment in the 1960's where they took the
mitochondria of a cancer cell and put it in a normal cell the
cell turned cancerous. This theory is called the Metabolic
Theory of Cancer.
</p>
</div>
</div>
)}
</Spring>
</>
);
};
You're passing SpringValues to a regular dom element:
<div style={props}>
What you want to be doing is passing them to an animated element:
// import { animated } from 'react-spring'
<animated.div style={props}>
As described in the docs
Basically this is the same question as this one, but for the React Bootstrap Carousel component.
So I have a working carousel but I want a text to be on top of it, that doesn't move while the images change.
This is my working Carousel code snippet - as you can see I added my overlay text at the bottom of the loop. It does stay on top, just like I want, but it also adds an additional empty carousel item, which I don't want. (I tried making this work in js-fiddle and codesandbox.io but I'm not smart enough...)
import React from "react";
import Carousel from "react-bootstrap/Carousel";
import "./styles.css";
export default function App() {
let carouselImgs = [
{
title: "Test1",
img: "https://images.app.goo.gl/FrGs95rzsNfc6YkW8"
},
{
title: "Test2",
img: "https://images.app.goo.gl/tPkFSMH796PmV3pq9"
}
];
return (
<Carousel className="App" interval={3000}>
{carouselImgs.map(carouselImg => (
<Carousel.Item
key={carouselImg.title}
className="oneness-container mb-2"
>
<img src={carouselImg.img} className="img-fluid rounded-lg" alt="" />
<Carousel.Caption>
<div className="bottom-center">
<h3 className="rounded px-2 py-1 d-inline">
{carouselImg.title}
</h3>
</div>
</Carousel.Caption>
</Carousel.Item>
))}
{<h1 className="overlay">Overlay title</h1>}
</Carousel>
);
}
CSS of .overlay:
.overlay {
position: absolute;
top: 0;
width: 100%;
}
I like the comment on that answer - that says to this:
<div id="carousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" >
<!-- items -->
</div>
</div>
...place [the overlay div] inside the carousel-inner, but still in a div separate from your "item" divs...
But unfortunately I don't know how to get inside the carousel-inner since the React Bootstrap component doesn't show it like that.
I am trying to create a scrolling carousel, similar to bootstrap's carousel, using pure React and inline styles.
I'm having a lot of trouble figuring out how state should be.
Here is the relevant code:
Parent component:
customers.jsx
<button style={{zIndex: 100}} onClick={() => this.renderPrev()}>Prev</button>
<ReactTransitionGroup transitionName="example">
{_.map(customers, (customer, i) => {
if (this.state.selected === i){
return <Customer
key={customer.name}
customer={customer}
selected={this.state.selected}
idx={i}
moving={this.state.moving}
toggle={()=>this.toggle()}
/>
} else {
return null
}
})
}
</ReactTransitionGroup>
<button style={{zIndex: 100}} onClick={() => this.renderNext()}>Next</button>
renderPrev/renderNext are simply functions that checks to see if the current selected customer is the first or last one, and if it is, then loop around.
Child component
customer.jsx
render() {
<div style={_.assign({},styles.root, position)}>
<div style={{verticalAlign: 'middle'}} >
<img style={styles.image} className="img-circle img-responsive" width="200px" src={this.props.customer.image}/>
<img style={styles.logo} className="img-responsive" src={this.props.customer.logo}/>
<h3 style={{color: '#F05A28', margin: 0,}}>{this.props.customer.name}</h3>
<h4 style={{fontWeight: 200, margin: 0,}}>{this.props.customer.title}</h4>
<p style={{fontSize: 16}}>{this.props.customer.description}</p>
</div>
<button onClick={()=>this.props.toggle()}>Click</button>
</div>
}
I'm able to get carousel to work, but it's static. Ideally, I want the customers to slide left/right depending on if it's going to the next or previous customer.
My attempted solution was to try to send new props into the current customer when the next button is pressed, but the current customer never receives those new props because it's not even rendered due to the conditional.
I think the main problem is that only one customer is rendering at a time due to the condition within the map, and that customer does not get the index of the next customer.
Can someone guide me in the right direction?
I know there's React Slick Carousel but I wasn't able to get it to work, so I wanted to try my hand at doing it myself.