I'm creating a flat listview for a React website.
This is a picture of my mockup:
I succed to obtain this:
Next, I would like to limit the size of the flat list and display the overflow-x-scroll.
The problem is, when I put a size, my first image have a wrong display...
This is my code (I use tailwind):
import React from "react";
export type CarrouselProps = {
images: string[],
size: number
}
const Carrousel: React.FC <CarrouselProps> = ({images, size}) => {
return(
<div>
<div className="flex flex-row overflow-x-scroll w-[700px]">
{images.map(url =>
<input className={`w-[${size}px] h-[${size}px] mr-4 object-cover rounded-md`} type="image" src={url} />
)}
</div>
<div className="h-1 mt-3 bg-white w-[700px]"/>
</div>
);
}
export default Carrousel;
Could you help me to fix this wrong display on the first image ?
I specify that only the first image have portrait display
Thanks in advance, for your help
Related
I have a terms and conditions table in the database, so far I have successfully mapped the conditions but for some reason the icons aren't showing
<Layout>
<div className='container bg-white mx-auto border rounded p-4 lg:w-1/2'>
{data.map((term) => {
const {condition, icon} = term;
return (
<div key={term.id} className='p-2 flex flex-row text-md'>
<div className='w-4 h-4'>
{console.log(icon)}
<FontAwesomeIcon icon={icon} />
</div>
<h3 className='mx-2'>{condition}</h3>
</div>
);
})}
</div>
</Layout>
And also if you're wondering if the icon variable is valid here is a picture of the console log
Console log of data
You see when I manually type faUser the shows, but now its not showing anything at all..
I tried to map icons from database expecting them to show, but ended up with white spaces instead.
I am using react-zoom-pan-pinch library for zoomIn and zoomOut. The problem I’m having is when grabbing and pulling the image, it goes out of bounds. I read docs, and it seems I need to use limitToBounds={true} which helps, but then it won’t help 100% because the image still goes out of bounds. It should be stuck to bounds , so my question is how to make the image stuck to bounds/borders, you should not be able to pull it out of bounds(all functionalities should work, just image stuck to bounds/borders).
try it here: https://codesandbox.io/s/nice-bash-bzvrwf?file=/src/App.tsx
Image of my problem:
import React from "react";
import "./styles.css";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
export default function App() {
return (
<div className="App">
<div className="element">
<TransformWrapper limitToBounds={true}>
{({ zoomIn, zoomOut, resetTransform }: any) => (
<React.Fragment>
<div style={{ border: "1px solid black" }}>
<div className="tools">
<button onClick={zoomIn}>+</button>
<button onClick={zoomOut}>-</button>
<button onClick={resetTransform}>x</button>
</div>
<TransformComponent>
<img
width="100%"
src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
alt="test 2"
/>
</TransformComponent>
</div>
</React.Fragment>
)}
</TransformWrapper>
</div>
</div>
);
}
you need to add these props inside the TransformWrapper component:
alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
your example:
codesandboxexample
hope that help :)
I am trying to Make a clone of the Book My show Application. I'm building the Cast and crew slider. I tried reducing the size of the image but the spacing between the image does not seem to reduce.
This is my js file containing the src, settings for the slider:
import React from "react";
import Slider from "react-slick";
import CastPoster from "../MovieCast/movieCast.component";
const Cast = (props) => {
const settings = {
infinite: true,
autoplay: false,
speed: 1500,
slidesToShow: 4,
slidesToScroll: 2,
InitialSlide: 0,
}
const CastImages = [
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/simu-liu-2006167-13-05-2021-04-13-21.jpg",
name:"Simu Liu",
role:"as Shang-Chi"
},
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/awkwafina-1093500-20-06-2018-12-05-44.jpg",
name:"Awkwafina",
role:"as Katy"
},
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/tony-leung-iein105711-02-04-2018-13-07-58.jpg",
name:"Tony Leung Chiu-wai",
role:"as Wenwu / The Mandarin"
},
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/michelle-yeoh-1473-24-03-2017-17-32-23.jpg",
name:"Michelle Yeoh",
role:"as Jiang Nan"
}
];
return (
<>
<div className="">
<Slider {...settings}>
{
CastImages.map((data) => (
<CastPoster {...data} />
))
}
</Slider>
</div>
</>
)
};
export default Cast;
This is the js file containing the rendering of the slider:
import React from "react";
const CastPoster = (props) => {
return (
<>
<div className="">
<img className="rounded-full w-32 h-32 " src={props.src} atl={props.name} />
<div>
<h3> {props.name} </h3>
<p> {props.role} </p>
</div>
</div>
</>
);
};
export default CastPoster;
And I have added it as a component in a page:
import React from "react";
import Cast from "../components/Cast/Cast.component";
import MovieHero from "../components/MovieHero/MovieHero.component";
import offerIcon from "./offericon.png";
const MoviePage = () => {
return (
<>
<MovieHero />
<div className="my-12 container px-4 lg:w-3/4 lg:ml-20">
<div className="flex flex-col items-start gap-3">
<h2 className="text-gray-800 font-bold text-2xl"> About the movie </h2>
<p> Shang-Chi and The Legend of The Ten Rings features Simu Liu as Shang-Chi, who must confront the past he thought he left behind when he is drawn into the web of the mysterious Ten Rings organization. The film is directed by Destin Daniel Cretton and produced by Kevin Feige and Jonathan Schwartz.</p>
</div>
<div className="my-8">
<hr />
</div>
<div>
<h1 className="text-gray-800 font-bold text-2xl pb-4"> Applicable Offers </h1>
<div className="flex items-start gap-2 bg-yellow-100 border-yellow-400 border-2 border-dashed rounded-md p-3 w-96">
<img className="h-6" src={offerIcon}/>
<div className="flex flex-col items-start">
<h3 className="relative -top-1 text-gray-900 text-md font-semibold"> Filmy Pass </h3>
<p className="text-gray-600 -top-1 text-sm"> Get Rs.75* off on 3 movies you buy/rent on Stream. Buy Filmy Pass #Rs.99 </p>
</div>
</div>
</div>
<div className="my-8">
<hr />
</div>
<div>
<h3> Cast </h3>
<div>
<Cast />
</div>
</div>
</div>
</>
)
};
export default MoviePage;
The result:
This is the result of the code
I want to reduce the spacing between the images. Thank you.
The space between your images is determined by the amount of slides you want to show and the width of the slider div. To decrease the space between the images reduce the width of the slider or show more images.
Your Cast component could look like this
<div className="w-full">
<Slider {...settings} className="w-1/2">
{
CastImages.map((data) => (
<CastPoster {...data} />
))
}
</Slider>
</div>
Right now all the cards are aligned in a row but my goal is to create a small space between them.
I'm trying to create a fake Skateboarding eCommerce website. I started with the bearings (the part that goes inside the skateboard wheel to help it rotate). I successfully added all the cards to the page but find manipulating margin on the card with "m-1" using bootstrap adds a margin to the right side of the page for some reason and takes away some of the space that should be used up by the card.
enter code here
import React from 'react';
import { Button, Card } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import bearingsData from './Product/bearingsData';
const Bearings = () => {
return (
<div className="main">
<div className="title">
<h1>Bearings</h1>
</div>
<div className="container " >
<div className="row">
{ bearingsData.map(product => {
return (
<Card className="col-xs-12 col-sm-6 col-md-4 col-lg-3 p-4 " key={ product.id }>
<Card.Img src={ product.image }/>
<Card.Body>
<Card.Title>
{ product.brand }
</Card.Title>
<Card.Text>
{ product.name }
</Card.Text>
<Button> Add to Shopping Cart</Button>
</Card.Body>
</Card>
);
})}
</div>
</div>
</div>
)
}
export default Bearings;
I am trying to access the dynamically image from the public directory and using inline style to pass in the props in the Card.js and call it in CardComponent.js. I am very new to react. I don't know what I am doing wrong here. Can you help me with this? Thanks!
Here is the card I am trying to render:
Here is the directory of image I am trying to access : public/assets/img/talent.jpg
Card.js Code:
import React from "react";
import "../styles/Card.css";
function Card(props) {
return (
<div>
<div
className="img-item"
style={{
backgroundImage: `url(require("/assets/img/"${props.image}))`,
}}
>
<div className="text-center centered">
<h3 className="reset-mp text-left mb-2">{props.cardTitle}</h3>
<p className="reset-mp">{props.cardDescription}</p>
</div>
</div>
</div>
);
}
export default Card;
CardComponent.js code:
import React from "react";
import Card from "./Card";
import "../styles/CardComponent.css";
function CardComponent() {
return (
<div className="cards">
<Card
cardTitle="A Talent"
cardDescription="Looking for a job"
image="talent.jpg"
/>
</div>
);
}
export default CardComponent;
Everything inside the public folder is a static file, it will be copied exactly as it is during build in root.
Here a better explanation
So, in your case, you should be able to view you image on:
http://127.0.0.1:3000/assets/img/talent.jpg
So, you can just use:
<div style={{ backgroundImage: `url(/assets/img/${props.image})` }}>
try to change this line /assets/img/ to this ./assets/img/