I'm developing a reactjs project with ant-design (antd). I'm using Carousel component with auto scrolling through some photos. I also want to add some arrows to change photos manually.
I found a way to make small buttons to the left and to the right of my Carousel. But I don't get how to make them bigger (with the same height as the photos for example), move on the photos or make visible any time (now they stay hidden until the mouse cursor is exactly on them).
Here's some code:
const RightArrow = () => {
return (
<Button icon={<RightCircleOutlined/>} size="middle"/>
)
}
const LeftArrow = () => {
return (
<Button icon={<LeftCircleOutlined/>} size="middle"/>
)
}
const SSOverview = () => {
return (
<Content style={{width: "100%", padding: '0 30px', fontSize: 16}}>
<Col><Title level={1}> My Title </Title></Col>
<Carousel autoplay autoplaySpeed={7000}
draggable={true} arrows={true}
prevArrow={LeftArrow()}
nextArrow={RightArrow()}>
<div><img src={Slide2} style={{width: '100%'}} alt="Photo 1"/></div>
<div><img src={Slide1} style={{width: '100%'}} alt="Photo 2"/></div>
<div><img src={Slide3} style={{width: '100%'}} alt="Photo 3"/></div>
<div><img src={Slide4} style={{width: '100%'}} alt="Photo 4"/></div>
<div><img src={Slide5} style={{width: '100%'}} alt="Photo 5"/></div>
</Carousel>
//the rest of the page
</Content>
)
};
You can override antd default styling with custom CSS styling. To make the buttons bigger, just add style property (or add className property and style inside CSS file). For example, you could do something like this:
<Button
style={{padding: "1rem", height: "auto", width: "auto"}}
icon={<RightCircleOutlined style={{fontSize: 60}} />}
/>
Here's a pen:
https://codepen.io/jaycodist/pen/mdPyqNW
Related
Forgetting that this defeats the purpose of bootstrap, is it possible to fix rows so that components are not moved to the next row when windows are resized smaller? This will make sure that components all stay on the same row, and if the contents of the row exceed the width of the screen then a scroll bar on the browser will appear. I'd like to achieve this behavior without having to use a fixed px width.
Some test code:
App.js
import './App.css';
import { Image } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<div className="Test1">
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
</div>
<div className="Test2">
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
</div>
</div>
);
}
export default App;
App.css
.Test1 {
background-color: blue;
width: 1500px;
}
.Test2 {
background-color: red;
width: "100%";
}
The goal is to get the behavior of <div className="Test2"> to match the layout and behavior of <div className="Test1"> without using a fixed px width.
I have not provided all the runnable code, just the important code. Result:
This image shows the result of the code above. Note that the first row is fixed. To see the entire row, you'll have to scroll in the browser horizontally. The second row adapts to the size of the window.
There is, frankly, no need for ANY custom CSS. Bootstrap can handle it all for you. Just use its d-flex class:
function App() {
return (
<div className="App">
<div className="d-flex">
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
</div>
<div className="d-flex">
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
</div>
</div>
);
}
Sandbox: https://codesandbox.io/s/crazy-snyder-lp0lc?file=/src/App.js:180-186
You can set min-width on the particular container that you do not want to rearrange. You can also use flex or grid to achieve the same effect.
I am using this package https://www.npmjs.com/package/react-responsive-carousel .In demo
http://react-responsive-carousel.js.org/
user able to go to next slide after Dragging .it working fine.but when I used same package I am not able to drag to next slide .
can you please suggest me where I am doing wrong ?
https://codesandbox.io/s/beautiful-carson-otvj0?file=/src/App.js
<Carousel
autoPlay={true}
infiniteLoop={true}
showArrows={false}
showThumbs={false}
showStatus={false}
>
<div style={{ height: "200px", color: "#fff" }}>this is slide 1</div>
<div style={{ height: "200px", color: "#fff" }}>this is slide 2</div>
<div style={{ height: "200px", color: "#fff" }}>this is slide 3</div>
<div style={{ height: "200px", color: "#fff" }}>this is slide 4</div>
</Carousel>
I've tried using it myself and couldn't figure out why the draggable wasn't working.
However, I can offer you alternative Carousel package - siema. It is a great, lightweight carousel that is made with JS. There are also other packages built on top of this purely made for React.
In your case, I would offer to try out react-siema.
With it, you can simply use the carousel like that and it will be draggable by default. Plus, no need to load any css.
import React from "react";
import ReactSiema from "react-siema";
const Slide = (props) => <img src="https://picsum.photos/200" alt="slide" />;
const App = () => (
<ReactSiema>
<Slide src="#" />
<Slide src="#" />
<Slide src="#" />
</ReactSiema>
);
export default App;
Link to the codesandbox with this example: click here.
Link to the react-siema: click here.
Link to the original siema: click here.
I've been using siema myself and would recommend it for nice and simple carousels.
The demo you are using doesn't show the full code that is required to achieve what is being shown.
To enable swiping/ dragging, you need to add the following props to the Carousel component.
swipeable={true}
emulateTouch={true}
Below is an example of the code you referenced that will enable the functionality you want.
<Carousel
autoPlay={true}
infiniteLoop={true}
showArrows={false}
showThumbs={false}
showStatus={false}
swipeable={true}
emulateTouch={true}
>
<div style={{ height: "200px", color: "#fff" }}>this is slide 1</div>
<div style={{ height: "200px", color: "#fff" }}>this is slide 2</div>
<div style={{ height: "200px", color: "#fff" }}>this is slide 3</div>
<div style={{ height: "200px", color: "#fff" }}>this is slide 4</div>
</Carousel>
For more detail on the implementation use this link http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic--base. You can view the demo code by viewing the story tab in the side navbar
I admit I am very new to React and still getting my head around things, but I am using the react-lightbox-component to display images in a grid and that works just fine but the onClick event doesn't do anything then it calls the toggleLightBox function.
I know the onClick is working as I tested it against a simple console.log, what am I missing to be able to display the image in a lightbox when clicked?
const App = ({ compile }) => (
<div style={{margin: 20}}>
<header style={{textAlign: "center"}}>
<h1><Words animate>Art</Words></h1>
</header>
<body>
<h3>Android</h3>
</body>
<Lightbox
images={androidimages}
renderImageFunc={(idx, image, toggleLightbox, width, height) => {
return (
<img
key={idx}
src={image.src}
style={{width: '150px', height: '200px', margin: '20px'}}
onClick={
toggleLightbox.bind(null, idx)
}
/>
)
}
}
/>
</div>
);
I am using https://www.npmjs.com/package/react-multi-carousel in one of my react project and I have implemented it and it works fine.
I am now in the need to implement the text (legend) over the carousel exactly like https://codesandbox.io/s/lp602ljjj7 which uses another package but I need that scenario and not that package because my need is different (Using nextjs so multi-carousel supports ssr and hence using it).
My only need is need to know how to implement the legend text over the carousel image using react-multi-carousel.
My code example: https://codesandbox.io/s/react-multi-carousel-playground-bt3v7
Change the structure of the return statement to the following structure.
Then you can store the value of the legend in the image array and pass the value to the p tag
const Simple = ({ deviceType }) => {
return (
<Carousel
ssr
partialVisbile
deviceType={deviceType}
itemClass="image-item"
responsive={responsive}
>
{images.slice(0, 5).map((image, index) => {
return (
<div key={index} style={{ position: "relative" }}>
<img
draggable={false}
alt="text"
style={{ width: "100%", height: "100%" }}
src={image}
/>
<p
style={{
position: "absolute",
left: "50%",
bottom: 0,
color: "white",
transform: " translateX(-50%)"
}}
>
Legend:{index}.
</p>
</div>
);
})}
</Carousel>
);
};
export default Simple;
Live demo
You should change array structure like below.
const images = [
{
image: "https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
text: "First image",
}
];
Then inside loop just add text and style it our way!
const Simple = ({ deviceType }) => {
return (
<Carousel
ssr
partialVisbile
deviceType={deviceType}
itemClass="image-item"
responsive={responsive}
>
{images.map(image => {
return (
<div>
<img
draggable={false}
alt="text"
style={{ width: "100%", height: "100%" }}
src={image.image}
/>
{/* Have to style so this should see over the image */}
<span>{image.text}</span>
</div>
);
})}
</Carousel>
);
};
I am trying to grab the maxresdefault of multiple YouTube thumbnails. Some YouTube videos simply don't have a high res thumbnail photo so I want to catch that with an onError prop on an img element. For some reason my function is not triggering when I get the 404 img error. Any ideas? Thanks in advance.
class FeaturedVideo extends Component<Props> {
addDefaultSrc = (e) => {
e.target.src = this.props.background.replace("maxresdefault", "hqdefault")
}
renderVideo = (props) => (
<div
style={{
width: "100%",
height: "100%",
backgroundSize: "contain",
}}
className="featured-community-video"
>
<img onError={this.addDefaultSrc} src={props.background} alt="" />
<div className="featured-community-video-title">
<h2 style={{ fontSize: "0.8em" }}>WATCH</h2>
<h1 style={{ fontSize: props.titleFontSize }}>{props.title}</h1>
</div>
</div>
)
render() {
return (
<div
key={this.props.postId}
style={{
width: this.props.width,
height: "50%",
}}
className="featured-community-video-container"
>
<Link to={routeCodes.POST_DETAILS(this.props.postId)}>
{this.renderVideo(this.props)}
</Link>
</div>
)
}
}
To achieve this, I would suggest rendering the <img /> based on the state of your <FeatureVideo/> component.
You could for instance, create an Image object, attempt to load the background image and by this, reliably determine if the image fails to load. On the images success or failure to load, you would then setState() on your <FeaturedVideo/> component with the appropriate background value which would instead be used to rendering you actual <img/> element:
class FeaturedVideo extends Component<Props> {
componentDidMount() {
if(this.props.background) {
// When component mounts, create an image object and attempt to load background
fetch(this.props.background).then(response => {
if(response.ok) {
// On success, set the background state from background
// prop
this.setState({ background : this.props.background })
} else {
// On failure to load, set the "default" background state
this.setState({ background : this.props.background.replace("maxresdefault", "hqdefault") })
}
});
}
}
// Update the function signature to be class method to make state access eaiser
renderVideo(props) {
return <div
style={{
width: "100%",
height: "100%",
backgroundSize: "contain",
}}
className="featured-community-video">
{/* Update image src to come from state */}
<img src={this.state.background} alt="" />
<div className="featured-community-video-title">
<h2 style={{ fontSize: "0.8em" }}>WATCH</h2>
<h1 style={{ fontSize: props.titleFontSize }}>{props.title}</h1>
</div>
</div>
}
render() {
return (
<div
key={this.props.postId}
style={{
width: this.props.width,
height: "50%",
}}
className="featured-community-video-container"
>
<Link to={routeCodes.POST_DETAILS(this.props.postId)}>
{this.renderVideo(this.props)}
</Link>
</div>
)
}
}
Hope that helps!