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
Related
I have a table with a custom right side control, where the user can set the columns visibility as well as reorder them. Upon clicking a button, the control expands and the user can now make changes. The basic functionality is there. I am now trying to make the transition a smoother and that is where I am failing.
Here is the minimal markup that is rendered:
<div
style={{
display: "flex",
justifyContent: "flex-start"
}}
>
<div style={{ flex: "auto" }}>
<Table columns={columns} dataSource={data} pagination={"false"} />
</div>
<div
style={{
flex: hasExpandedControls ? "2 1 1" : "0 0 1",
transition: "all 500ms ease-in-out"
}}
>
<div
style={{
display: "flex"
}}
>
<div>
{hasExpandedControls ? (
<Tree
checkable
draggable
treeData={columnsTree}
checkedKeys={visibleColumns.map((col) => col.key)}
onCheck={handleCheck}
onDrop={handleDrop}
style={{ marginRight: "0.5em" }}
/>
) : null}
</div>
<div>
<div style={{ padding: "50% 0", height: 0, width: "40px" }}>
<Button
onClick={() => setHasExpandedControls((prev) => !prev)}
style={{
marginLeft: ".5em",
display: "block",
transformOrigin: "top left",
// transform: 'rotate(-90deg) translate(-100%)',
transform: "rotate(90deg) translate(0, -100%)",
marginTop: "-50%"
}}
>
Spalten
</Button>
</div>
</div>
</div>
</div>
Clicking the button triggers a state change, which causes the Tree to be rendered and in this instance the div 'snaps' to its full width. I am failing to accomplish my goal using css transitions, so I was wondering if there was an easier way to accomplish my goal.
I've tried setting the transition on various wrapping elements and all elements, but the 'snap' into existence remains.
Codepen to reproduce: https://codesandbox.io/s/basic-usage-antd-4-17-3-forked-yq2u7?file=/index.jshttps://codesandbox.io/s/gu4hs
I am new to react and I am trying to slide down my div element using react-spring. However, the slide-down effect is not working. I saw this in a tutorial and tried to implement it however it's not working.
Here is my code:
<Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}>
{props => (
<div style={props}>
<div style={{ display: cost ? 'block' : 'none' }}>
<Card className="calculation shadow">
<CardBody>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
<Row style={{ float: 'right', marginBottom: '1rem' }}>
<span style={{ float: 'right' }}>
<FontAwesomeIcon icon={faClipboardList} onClick={this.handler} />
</span>
</Row>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
</CardBody>
</Card>
</div>
</div>
)}
</Spring>
How do I make it work so that the div component slides down when clicking a button? Please help
You're not passing the animated styles to an animated.div. Which means the props from the spring will not animate your component.
Also since you're trigger the animation on a click. I would set the animated values – opacity & marginTop as state variables. Then you on the onClick handler you can update the state triggering a change in the animation.
See the Spring docs here
And for more information, here's a codesandbox
I found the solution everything is fine no animated div required I had to just change the version of react- spring to npm i react-spring#8.0.20 and it works
Description
I'm trying to implement some parallax animation using react-spring, but I'm not able to find a way to space the containers in a responsive / uniform way.
Reproducible snippet
Here I made a snippet which contains a basic parallax effect animating some divs on scroll:
<Parallax pages={5}>
<ParallaxLayer offset={0} speed={0.4} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={0.9} speed={0.6} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={1.1} speed={0.8} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={1.9} speed={1} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={2} speed={1.2} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
</Parallax>
Problem
Having the layers with heights based on their content make them not responsive, as each layer is specifically starting from the specified offset position.
Conclusion
I would guess that works if the layers are being set with a specified viewport height, but is that really the only way?
Or am I perhaps misinterpreting the usage of this component?
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
I am creating an image grid for a website Im making using React and I wanted to add a modal functionality to view each image as a modal pop-up. For this I need to use some Vanilla JS in combination with CSS and HTML. This is the js I want to use:
// Select the modal
var modal = document.getElementById('myModal');
// Get the image inside the modal
var img = document.getElementsByClassName('image');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Select the close button
var span = document.getElementsByClassName("close");
// Close Button
span.onclick = function() {
modal.style.display = "none";
}
How can I integrate it with the rest of the app?
EDIT:
This is the component I am working on:
import React from "react";
import "../stylesheets/Photos.scss";
const Photos = () => {
return (
<div className="photos_container">
<h1 className="photos_title">PHOTO GALLERY</h1>
<div className="row">
<div className="column">
<img className='image'src="../assets/photos_page/photo2.jpg"/>
<img className='image' src="../assets/photos_page/photo3.jpg"/>
</div>
<div className="column">
<img className='image' src="../assets/photos_page/photo4.jpg"/>
<img className='image' src="../assets/photos_page/photo5.jpg"/>
<img className='image' src="../assets/photos_page/photo6.jpg"/>
</div>
<div className="column">
<img className='image' src="../assets/photos_page/photo7.jpg"/>
<img className='image' src="../assets/photos_page/photo8.png"/>
<img className='image' src="../assets/photos_page/photo9.jpg"/>
</div>
<div className="column">
<img className='image' src="../assets/photos_page/photo10.png"/>
<img className='image' src="../assets/photos_page/photo11.jpg"/>
</div>
</div>
{/* modal */}
<div id='mymodal' className='modal'>
<span className='close'>×</span>
<img className='modal-content' id="img01"/>
<div id='caption'></div>
</div>
</div>
);
};
export default Photos;
Someone beat me to it, but I will still leave my version of the answer here in case you find it helpful. I would not select document elements in the mentioned way, because there is simpler and more declarative way. What you want to do is change this component into a stateful one, which contains a state property like "showmodal". When it is true, the modal should be shown. Then you can toggle the state and set the image which was clicked on by using this.setState({ showmodal: true, slectedImage: yourImage }) in your onClick function. A simple absolutely positioned container should do the trick for the modal container.
Here is an example of what such a component would look like.
const images = [
{
uri:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTm3CuNzOrmWhos3MXI0v_KkyO_xrZ5Y8hFxSYGj_6OtUygZUUX"
},
{
uri:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR_Fg_lMrPjMa1duHXnvFnZOtsn883LGLD7c2-CwKdfFXAoveQnQ"
}
];
class App extends React.Component {
state = {
showmodal: false,
selectedImage: undefined
};
render() {
//
return (
<div style={{ height: "100vh"}}>
{images.map(i => (
<img
key={i.uri}
src={i.uri}
style={{ margin: 5 }}
onClick={() => this.setState({ showmodal: true, selectedImage: i })}
/>
))}
{this.state.showmodal &&
<div
onClick={() => this.setState({ showmodal: false })}
style={{
display: 'flex',
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,0.5)",
justifyContent: 'center', alignItems: 'center'
}}
>
<div style={{ height: 300, width: 500, backgroundColor: '#fff' }}>
<img src={this.state.selectedImage.uri} style={{ flex: 1}} />
<h3>Place any content here</h3>
</div>
</div>}
</div>
);
}
}
React.render(<App />, document.getElementById("app"));
I did not refactor out the styles so you can see what each div is doing as a super basic example which you can check out in codepen. Also, I agree with viz above in trying to refactor you columns so that you can render them the exact same way, and reduce duplication.
Hope it helps!
Everything in react is javascript, so
<div style={{display: this.state.showModal ? 'block' : 'none' }}>
<span onClick={() => {this.state.showModal = false;}}>×</span>
<img src={this.state.currentImage}/>
<div>{this.state.currentCaption}</div>
</div>
and then set respective currentImage and currentCaption with setState upon the image click.
You should also consider programmatically composing the column & images' jsx so that it can be concise.