I'm using swiper version 6 and using lazy loading. Therefore, trying to use swiper lazy preloader and it disapper before image fully loaded.
Can someone help me?
Thanks for read this question.
<RefSwiper
ref={gallerySwiperRef}
onSlideChange={e => handleSlideChange(e.activeIndex)}
controller={{ control: secondSwiper }}
lazy={true}
loadPrevNext={true}
preloadImages={false}
onSwiper={setFirstSwiper}
>
<Main>
{data.map((e, index) => (
<SwiperSlide key={`${e}_${index}`}>
<ImageContainer isDesktop={isDesktop} isTab={isTab}>
<Image
src={`${process.env.NEXT_PUBLIC_WEB_HOST}/${e.attachments_path}/${e.attachments_name}`}
onClick={handleTab}
alt='image'
layout='fill'
className='swiper-lazy'
/>
</ImageContainer>
<div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</SwiperSlide>
))}
</Main>
</RefSwiper>
If you need more code, let me know.
Related
I am trying to implement Cookiebot on my NextJs Website.
The docs (Link to docs) mention to insert the script for the cookie declaration inside the HTML of the specific page, for me it is an own subpage only for the cookie declaration.
If I use the HTML element <script ... /> as mentioned in the docs, the text does not load when I switch to the page, but only after a refresh once I'm on the page.
If I use the NextJs Script component Link to docs by switching the <script ..> to and import it from next/script, the cookie declaration loads instantly as expected, but it is placed below everything else of the page, even under the footer (even though i wrap the pages inside a layout with footer).
My code for the layout looks like following:
`
function BasePage(props: IBasePageProps) {
return (
<div>
<Navbar />
<main>{props.children}</main>
<Footer />
</div>
);
}
This works for every page and everything - the pages are all between the Navbar and Footer. However if I use following code for the page of the screenshot, the <Script .../> text is loaded below the footer.
export default function CookieRichtlinie() {
return (
<>
<h1 className="pb-8 mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl">
Cookie Richtlinie
</h1>
<div id="CookiePolicyText">
<Script
id="CookieDeclaration"
src="https://consent.cookiebot.com/12345/cd.js"
type="text/javascript"
async
/>
</div>
</>
);
`
After googling for two days I couldn't find any issue or thread close to this problem. Someone experienced this or know what I could try?
<Script ...> below everything else
Placed <Script ...> tag of next/script anywhere possible to get the loaded text inside the page. Expected to have the result of the script in the placed component, however it is always at the bottom of the page.
Did some global searches in Github and found an useEffect workaround, made some modifications and this worked in my case.
useEffect(() => {
const cookieBotWrapper = document.getElementById("CookiebotDeclaration")
if (cookieBotWrapper) {
const script = document.createElement("script")
script.id = "CookieDeclaration"
script.type = "text/javascript"
script.async = true
script.src = `https://consent.cookiebot.com/${process.env.NEXT_PUBLIC_COOKIEBOT_DOMAIN_GROUP_ID}/cd.js`
cookieBotWrapper.appendChild(script)
}
}, [])
return (
<main>
{process.env.NODE_ENV !== "development" && (
<div id="CookiebotDeclaration" />
)}
</main>
)
Now i want to remove the previous and next and also I want to style the slider which is shown as if it is very old , it's not modern
Acutally i want it to look something like how the react-bootstrap claims their carousel looks like :
Like this:
My code snippet is as follows
<Carousel pause="hover">
{product.images &&
product.images.map((image) => (
<Carousel.Item key={image.public_id}>
<img
className="d-block w-100"
src={image.url}
alt={product.title}
/>
</Carousel.Item>
))}
</Carousel>
I think the problem comes from your css. Did you put the bootstrap one ?
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
and I suggest "antd" instead of bootstrap (https://ant.design/components/carousel/)
Nextjs Image component wont load my images, I've tried everything I've come across still nothing.
<div>
{output?.map((item) => (
<div>
{console.log(`${apiUrl}${item.localImage}`)}
<Image
loader={(item) => {
return `${apiUrl}${item.localImage}`;
}}
alt={item.title}
src={`${apiUrl}${item.localImage}`}
layout="fill"
objectFit="contain"
// height={98}
// width={77}
/>
</div>
))}
</div>
The console.log shows the correct image location.
http://localhost:3030/images/b/Painting-with-Both-Hands--Sophie-Walbeoffe.jpg
http://localhost:3030/images/b/DK-The-History-Book.jpg
http://localhost:3030/images/b/Cradle-to-Cradle--(Patterns-of-Life).jpg
http://localhost:3030/images/b/Upstarts.jpg
I have added localhost to next.config.js with the port and without. I think its something to do with the loader.
So what is missing?
I think you can change the code for the loader to:
loader={() => {
return `${apiUrl}${item.localImage}`;
}}
I'm trying to animate the list of cards when it gets re-rendered with a different values (i.e , Popular movies to Searched movies)
I followed the documentation of framer-motion and gave the parent div and the child div the Layout property yet nothing seems to change or happen.
If there's a different way of animating this I would love to hear
I've added the code here below :
the parent div :
<motion.div Layout className='movie-container'>
{movie.map((moviee) => (
<MoviePreview
moviee={moviee}
setFavorites={setFavorites}
favorites={favorites}
setTrailer={setTrailer}
setTrailerWindow={setTrailerWindow}
/>
))}
</motion.div>
the child div :
<motion.div Layout className='movie-card-container'>
<article className='movie-card'>
<h3>{moviee.title} </h3>
<div className='trailer-favorite'>
<button onClick={(e) => onHandleTrailer(moviee.id)} className='trailer-btn'>
Watch Trailer
</button>
<button onClick={() => addFavorite(moviee)} className='heart'>
💗
</button>
</div>
<img src={`https://image.tmdb.org/t/p/w500/${moviee.poster_path}`}></img>
<div className='movie-overview'>
<p>{!moviee.overview ? 'No description available.' : moviee.overview}</p>
</div>
</article>
</motion.div>
Thanks for any kind of help!
My NextJS 12 App is stuck loading when the image provided doesn't exist, there is a way to solve that?
import Image from "next/image";
export default function Home() {
return (
<div>
<Image
src="/image_dont_exist"
alt="Image don't exist"
width={400}
height={400}
objectFit="cover"
/>
</div>
);
}
The page just keep loading forever