I have built a website fully with the swiperJs in react.js web app and when i am using it on the mobile i need to slice the slides in 3 parts and slide them vertically and the collection of images should be in the horizontal stacked slides, and i need to update the url when i am on the sliced slides each has the different url and should redirect to the exact slides in the page, i am passing the images through the data.jsx file.
return (
<>
{item.map(
({ id, title, description, collection_images }, idx) => (
<div key={`${idx}`}>
<TitleSlide
title={t(title)}
description={t(description)}
/>
<Swiper {...swiperProps} spaceBetween={0} ref={swiperRef}>
{collection_images.length > 0 &&
collection_images.map(({ id, url, alt }, idx) => (
<SwiperSlide key={`${id}`}>
<figure>
<img
src={url}
alt={alt}
className="img-fluid"
/>
</figure>
</SwiperSlide>
))}
</Swiper>
</div>
),
)}
</>
);
Related
This package can return the base64 string with prop renderThumbnailHtml={false}
<VideoImageThumbnail
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
thumbnailHandler={(thumbnail) => console.log(thumbnail)}
width={120}
height={80}
alt="my test video"
/>
but when I place it into img
<img src={`${(
<VideoImageThumbnail
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
thumbnailHandler={(thumbnail) => console.log(thumbnail)}
renderThumbnailHtml={false}
width={120}
height={80}
alt="my test video"
/>
)}`}
alt="test"
/>
it just return [Object object] instead of the base64 string.
I stuck on this 3 days already...and don't know what keyword I can google for these kind of issue.
here is the codeSandBox showing the issue:
https://codesandbox.io/s/vigilant-joliot-2yqvv6?file=/src/App.js
Thanks a lot
You can use the state variable for your thumbnail and update it when the VideoImageThumbnail is rendered. Something like this.
const [thumbnail, setThumbnail] = useState("");
return (
<div className="App">
<h2>DirectOutput</h2>
<VideoImageThumbnail
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
thumbnailHandler={(t) => {
setThumbnail(t);
}}
width={120}
height={80}
alt="my test video"
/>
<h2>Use as an img src</h2>
<img src={thumbnail} alt="test" />
</div>
);
I'm making a Netflix clone site. I want the trailers of the movies to play when the mouse is hovered over the movie posters. I did this for the big trailer section at the top. But when you hover over any of the posters arranged side by side at the bottom, all the movies in that series play the same trailer instead of a single movie. The reason is because I made that array with the map method. How can I do this like on Netflix? Code and pictures are below.
this row
{movies.map((movie) => (
<>
{trailerUrl && (
<div className="trailer-content">
<Youtube
className="trailer"
videoId={trailerUrl}
opts={opts}
/>
</div>
)}
{!trailerUrl && (
<div key={movie.id} className="all-hover">
{
<img
onMouseLeave={() => setTrailerUrl("")}
onMouseEnter={() => handleEnter(movie)}
className={`row-poster ${
isLargeRow && "row-poster-large"
}`}
src={`${photo_base_URL}${
isLargeRow ? movie.poster_path : movie.backdrop_path
}`}
alt={movie.name}
/>
}......
this picture
issue
i have an api "xyz.com/products/" and i have made an route xyz.com/products/1. This will give me an product with the id 1 . And it will render product page Component with that product details...But now on that particular product page i have an gallery of related product with their own individual "Link" to open in same product page . but when i click on any one of them ....the url changes like this "xyz.com/product/1/23" but i want only to change path like "xyz.com/products/1" --> "xyz.com/products/23"
here is my code snippets
// ///// route and link both are on App Component/////////////////
// this is the route that i have that matches xyz.com/product/1
<Route
path="/product/:id"
render={() => (
<Fragment>
<ProductContext.Provider value={{ productState, productStateDispatch }}>
<Product />
<div className={`overlay ${productState.packageSidebar}`}></div>
</ProductContext.Provider>
</Fragment>
)}
/>;
these are links will go on product page
<Row title="Our best seller">
{homeState.bestSellerProducts.map((product, index) => (
<Link
to={{
pathname: `/product/${product.id}`,
search: `type=${product.type}`,
}}
className="product-link"
key={index}
>
{" "}
<Card {...product} />
</Link>
))}
</Row>
//////////////////////////////
// this is in my product component where i have used one more component called imageGallery inside it. in which we have links////////////
{images.map((imgObj, index) => {
console.log(imgObj);
return (
<div className="item" key={index}>
<Link to={`/${imgObj.id}`} className="product-link">
<div className="img">
<img
height={100}
width={100}
src={imgObj.product_image}
alt="product-img"
/>
</div>
</Link>
</div>
);
})}
// i know i messing in routing i hope will get solution.... i just want that when i click on any link in this imageGallery component .it should be open inside same product page in which i m already present.. thats it
Including exact keyword in the Route component might solve your problem, try out!, demo example:
<Route exact to='/' component={home} />
I´m rendering an array, every element of the array is showed with component "Post", but the elements are in the same line, I tried with
return (
<div style={{ height: 'calc(100vh - 65px)' }} className="d-flex justify-content-center align-items-center">
{posts.map((post) => {
return <Post key={post._id} post={post} />
})}
</div>
);
The component "Post" is the next:
I´m using Boostrap por the css styles
return (
{usuario.nombre}
Special title treatment
{texto}
Go somewhere
2 days ago
);
My result (All the elements are in horizontal position and I need them in vertical position):
The father component is root.
If I delete the css classes of the component "Post", teh problem remains.
Have you tried this.
return (
<div>
{posts.map((post) => {
return <><Post key={post._id} post={post} /><br /></>
})}
</div>
);
I only changed the class of div where I put the .map ;| adn the problem was solved.
className="container" instead className="d-flex justify-content-center align-items-center">
Hi i try to animate 2 routes form opacity 1 to 0 on exit. But for some reason on <Link> click the routes will change(ex. '/' => '/chat?name=bob&room=here') but the page content stay the same and it wont render the component of that specific route. Also the animation is working great once i use the "Go back button" from browser.
Anyone have idea why is not working on button click?
App.js
return (
<div>
<Router>
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.key}>
<Route path="/" exact component={Login}></Route>
<Route path="/chat" component={ChatRoom}></Route>
</Switch>
</AnimatePresence>
</Router>
</div>
);
Login.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="Login-Container"
>
//same code
<Link
onClick={(event) => (!name || !room ? event.preventDefault() : null)}
to={`/chat?name=${name}&room=${room}`}
>
<button
type="submit"
className="Login-Button"
>
Sign In
</button>
</Link>
</motion.div>
);
ChatRoom.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="ChatRoom-Container"
>
<div className="ChatRoom-NavBar">
<NavLink to="/">
<div
className="ChatRoom-BackButton"
style={{ backgroundImage: `url(${arrow})` }}
></div>
</NavLink>
</div>
</motion.div>
);
};
Your initial and exit prop on motion.div seem to be using the same key i.e "out" try giving the exit prop a different key. Dont forget to adjust your variants as well when you make the change.