I want to create an image slider in react js which works like a banner advertisement that has images and something is written in it. But have no idea how is it done. I have the following code
rrr.jsx
import React from 'react'
import img44 from '../../Assets/pic46.png'
import img45 from '../../Assets/pic47.png'
import img46 from '../../Assets/pic48.png'
const rrr = () => {
return (
<div>
<div className="banner" >
<img src={img44} alt="banner" />
<img src={img45} alt="banner" />
<img src={img46} alt="banner" />
</div>
</div>
)
}
export default rrr
Also, the picture for what I wanted is :
In this way, I would like to slide up to three pictures but don't have an idea how we do it. So, it would be good if someone would teach me.
For now, I have only the image and nothing written in it like . So, it would be good if someone would teach me how to make an image slider with banner advertisement.
With react you can use framer-motion
A production-ready motion library for React
In the docs It has a great example of building slide components uses AnimatePresence exit animations
I would like to slide up
The above example slide to the left, right. If you want to slide you can modify the variants from x to y.
Related
So I want to use a Swiper library for react. I have multiple movie elements, and I want to swipe through them. I import it like this:
import Swiper from 'react-id-swiper';
And I use it that way:
<div className="carousel-container">
<Swiper>
{movies.map(movie =>
<MovieItem movie={movie} key={movie.title}/>
)}
</Swiper>
</div>
So it should make a horizontal slider with movie items, but on the page it looks like this:
So it's like I just put all the movies inside of a common div, although when I open the code in the browser, all movies are inside of swiper div with all the classes, so I'm not sure why it doesn't work the way it should. Maybe the problem is because I use .tsx file?
The issue is lack of css/styling.
The documentation on react-id-swiper is old. According to the documentation on the main module it uses (swiperjs) you need to add the styling/css like so:
import "swiper/css";
I've created a sandbox for you to see it working here
When you try to import any type of images inside React using the classical HTML it didn't work this is a big issue. So how to solve this problem?
<img src='./Image/Checked.png' height=50px width=50px/>
I spent a little bit of time researching this and I found 3 methods to solve this problem. This is why I made this Q&A style question. Hope to help other people like me out there to save some time.
Generally in HTML you will use this code
<img src='./Image/Checked.png' height=50px width=50px/>
But in React when you try to import assets like images you need a require tag. In the old versions it was enough to rewrite the code this way:
<img src={require('./Image/Checked.png')} height={50} width={50} />
The problem is that after a few updates the syntax changed a little bit and now for the images you need to use the default property to make it work. So with the new versions you actually have to use this code:
<img src={require('./Image/Checked.png').default} height={50} width={50} />
Another way to do the same think is to import the image and then use it this way:
import Image from './Image/Checked.png'
<img src={Image} height={50} width={50}/>
To finish in only case of svg images you can import them as React Component and use them this way:
import { ReactComponent as Image } from './Image/Checked.svg'
<Image />
I'm trying to add lazy loading to my react application as I have over 200 images that I don't need on the initial load. If I lazy load the images, does this mean, they won't be loaded until they're needed on the screen?
I'm currently importing 4 groups of about 50 images into .js files and then adding them to objects so they can be dynamically used in my components. It looks like this...
// SportImages.js file
import Football from './images/football.png
import Cricket from './images/cricket.png
import Soccer from './images/soccer.png
... // another 50 or so imports
export default {
Football,
Cricket,
Soccer,
... // another 50 or so files
}
// and then in my component
cards.map(x => {
return (
<img src={SportImages[x.image_ref]} />
)
})
So my question is, should I be using lazy loading in the component file or in the main images file if I want to lazy load every image?
You can add the loading attribute to your image element to lazy-load the images. A complete explainer guide on this attribute can be found on web.dev.
In your case it would probably look as follows:
cards.map(card => (
<img src={SportImages[card.image_ref]} loading="lazy" />
))
You should also make sure to specify the width and height attributes so the browser can place the element on the page with the correct dimensions.
You can use this library called react-lazy-load-image-component
Import the LazyLoadImage component then use it the render you images
cards.map(card => (
<LazyLoadImage src={SportImages[card.image_ref]} {...props}/>
))
You can also add an effect when lazy loading the images. You can check the documentation of the library here
https://www.npmjs.com/package/react-lazy-load-image-component
loading='lazy' attribute Safari not supported
<img loading=lazy src="image.jpg" />
Try this package:
npm i react-lazy-load-image-component
Example:
import React from 'react';
import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component';
const Gallery = ({ images, scrollPosition }) => (
<div>
{images.map((image) =>
<LazyLoadImage scrollPosition={scrollPosition}
width="100%"
height="auto"
src={image.url} />
)}
</div>
);
export default trackWindowScroll(Gallery);
I am creating a gatsby website that uses the flickity-react-component to display a slider with product images. I believe that I should use the gatsby image to make it load faster, but when I try it, the Image does not display (it is 0x0 pixels).
This is the code I am trying to run:
const ThirdPage = ({ data }) => {
...
function Carousel() {
return (
<Flickity
className={'carousel'} // default ''
elementType={'div'} // default 'div'
options={flickityOptions} // takes flickity options {}
disableImagesLoaded={false} // default false
reloadOnUpdate // default false
static // default false
>
<Img fluid={data.imgPrincipal.childImageSharp.fluid} alt="Mulher a lavar o cabelo com o chuveiro ecológico" />
<img src="https://placeimg.com/640/480/nature" />
<img src="https://placeimg.com/640/480/nature" />
<img src="https://placeimg.com/640/480/architecture" />
</Flickity>
);
}
The "Img" is the one using the gatsby image, the others are what I had before.
This is the result
I don't get an error when running this, I believe this might be because gatsby-image creates a div.
Can someone help me make this work? I am a beginner, so if it's something very advanced, I would appreciate an alternative ... Thank you.
Indeed, gatsby-image is not only a simple image. It creates a wrapper with a few nested div HTML structure inside to make the blur effect and the rest of the improvements.
Take a look at gatsby-image docs:
Note: gatsby-image is not a drop-in replacement for <img />. It’s
optimized for fixed width/height images and images that stretch the
full-width of a container. Some ways you can use <img /> won’t work
with gatsby-image.
It may not work with all sliders.
I've used it with other sliders that accept a nested structure inside, not only a single <img> tag such as Swiper or Slick.
Up until a few days ago, my implementation of LazyLoad was working perfectly, but now I can't seem to get it to work.
This is my component:
import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';
const Image = image => (
<LazyLoad height={200} offset={100} once>
<div
className="image-container"
orientation={image.orientation}>
<img
className="image"
src={image.url}
alt={image.alt}
/>
{'caption' in image &&
<div className="meta">
<p className="caption">{image.caption}</p>
<p className="order">{image.currentNumber}/{image.maxNumber}</p>
</div>
}
</div>
</LazyLoad>
)
export default Image
And in App.js it is called like this:
render() {
return (
<div className="wrapper">
<GalleryTop details={this.state.gallery_top} />
{this.state.images.map((image, index) => <Image key={index} {...image} /> )}
</div>
)
}
But it won't work! Here's the demo environment:
https://gifted-kare-1c0eba.netlify.com/
(Check Network tab in Inspector to see that images are all requested from initial load)
There's also a video here
Any idea about what I am doing wrong?
Thanks in advance,
Morten
I ran into similar issues with the npm package react-lazyload. For one, this package only allows one child per LazyLoad component, so you would have to rearrange your hierarchy to make it work. Secondly, I found some strange behaviors when loading images that were already set within the viewport. The documentation does list import {forceCheck} from 'react-lazyload'; combined with forceCheck(); as a means of manually checking the elements, but I found this inconvenient and insufficient for components that aren't rerendering.
I was able to obtain the exact same functionalities with an easier implementation from the alternative package react-lazy-load. Mind the hyphen. This package also requires node>0.14. More or less, it does the same thing. You can read their documentation here: react-lazy-load