I first time build carousel with tailwind css and react slick.
Post component has own height calc(100vh - 65px). after I use flexbox like this:
data.map((i, index) => (
<div
key={index}
className="min-h-screen h-direct w-full mb-5 flex flex-col items-center p-2 md:px-6"
ref={index === data.length - 1 ? lastBookElementRef : null}
>
<Post
index={index}
item={i}
isModal={false}
t={t}
user={user}
/>
</div>
))
on Post page:
/* eslint-disable jsx-a11y/media-has-caption */
/* eslint-disable jsx-a11y/img-redundant-alt */
/* eslint-disable react/jsx-props-no-multi-spaces */
/* eslint-disable no-unused-expressions */
import { ArrowLeftOutlined, ArrowRightOutlined, DeleteOutlined, FileSyncOutlined, HeartFilled, HeartOutlined, LikeOutlined, UserOutlined } from '@ant-design/icons';
import axios from 'axios';
import Link from 'next/link';
import React, { useEffect, useRef, useState } from 'react';
import ReactPlayer from 'react-player';
import Slider from 'react-slick';
import { BallTriangle } from 'react-loader-spinner';
import calculateTime from '../calculateTime';
import { useSocket } from '../context/socket';
import Modal from './Modal';
const Post = ({ item, isModal, user, t }) => {
const [myLikes, setMyLikes] = useState(item.likes);
const [isOpen, setIsOpen] = useState(false);
const socket = useSocket();
const parentRef = useRef(null);
const scrollRef = useRef(null);
const [imageLoading, setImageLoading] = useState(item.files);
const imageLoaded = (id) => {
setImageLoading((prev) => prev.filter((t) => t.path !== id));
};
const [currentItem, setCurrentItem] = useState(0);
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 0,
swipeToSlide: true,
autoplay: false,
arrows: false,
lazyLoad: true,
};
const slide = useRef();
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
const addOrRemoveLike = async (postId) => {
const isLike = myLikes.filter((like) => like.user._id === user._id).length > 0;
try {
await axios({
method: 'PUT',
url: `${process.env.SERVER}/posts/${isLike ? 'unliked' : 'liked'}/${postId}`,
withCredentials: true,
});
if (!isLike) {
const users = [item.user._id];
if (item.user._id !== user._id) socket.emit('newnotification', { users });
}
isLike ? setMyLikes((prev) => prev.filter((p) => p.user._id !== user._id)) : setMyLikes((prev) => ([{ user }, ...prev]));
} catch (error) {
console.error(error);
}
};
const handleScroll = (direction) => {
const { current } = scrollRef;
setCurrentItem((prev) => (prev + 1) % (item.files.length));
const scrollAmount = current.offsetWidth ? current.offsetWidth : 100;
if (direction === 'left') {
current.scrollLeft -= scrollAmount;
} else {
current.scrollLeft += scrollAmount;
}
};
return (
<div className={`flex-1 w-[60%] border-b gap-3
md:w-full ${isModal ? 'flex-row' : 'flex-col'} flex items-center justify-start`}
>
{/* Top */}
<div className=" flex w-full flex-row items-center gap-3 ">
<div className="border overflow-hidden rounded-full w-14 h-14 sm:w-10 sm:h-10 flex items-center justify-center bg-nft-gray-2 dark:bg-nft-gray-3">
{
item.user.logo.length > 0
? <img src={`${process.env.SERVER}/${item.user.logo}`} className="w-full h-full object-cover" />
: <UserOutlined className="text-2xl sm:text-xl" />
}
</div>
<div className="flex-1 flex flex-row items-center justify-between gap-2">
<div className="flex-1 flex flex-col justify-start ">
<Link href={`user/${item.user.username}`}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="text-blue-600 dark:text-blue-500 font-medium"> {item.user.username} </a>
</Link>
<div className="w-10/12">
<h1 className="text-xs font-thin">
{item.location}
</h1>
<h1 className="text-xs font-thin">
<span className="font-medium">posted: </span>
{calculateTime(item.date, t)}
</h1>
</div>
</div>
{
user._id === item.user._id && (
<div>
<DeleteOutlined className="transition-all duration-500 text-xl cursor-pointer hover:text-nft-black-1 dark:hover:text-nft-gray-1" />
</div>
)
}
</div>
</div>
{/* Bottom */}
<div className="flex-1 w-full flex flex-col gap-1">
{/* FIles */}
<div
className="flex-2 w-full border bg-nft-gray-1 dark:bg-nft-black-1
relative
"
>
<ArrowLeftOutlined
className="absolute top-1/2 -translate-y-1/2 left-0 -translate-x-1/2
bg-nft-black-1 text-white text-xl flex justify-center items-center p-1 rounded-full cursor-pointer
hover:text-2xl transition-all duration-500
dark:bg-nft-gray-3 z-[5]
"
onClick={() => slide.current.slickPrev()}
/>
<ArrowRightOutlined
className="absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2
bg-nft-black-1 text-white text-xl flex justify-center items-center p-1 rounded-full cursor-pointer
hover:text-2xl transition-all duration-500
dark:bg-nft-gray-3 z-[5]
"
onClick={() => slide.current.slickNext()}
/>
<div className="h-[70%] w-full border bg-nft-gray-1 dark:bg-nft-black-1">
<div className="relative h-full">
<Slider {...settings} ref={slide}>
{
item.files.map((i, item) => (
<div key={item} className="w-full h-full flex justify-center items-center ">
{
i.type.startsWith('image')
? (
<img
onLoad={() => imageLoaded(i.path)}
src={`${process.env.SERVER}/${i.path}`}
className={` object-cover
${imageLoading.filter((t) => t.path === i.path).length > 0 && 'hidden'}
`}
alt="image"
/>
)
: (
<video
src={`${process.env.SERVER}/${i.path}`}
className="object-contain"
controls
controlsList="nodownload"
/>
)
}
</div>
))
}
</Slider>
</div>
</div>
</div>
{/* Statistics */}
<div className="flex-1 flex flex-col gap-2">
<div className="flex w-full flex-row justify-between items-center">
<div className=" flex flex-row gap-3 transition-all duration-500 items-center justify-start relative">
{
myLikes.filter((like) => like.user._id === user._id).length > 0
? (
<HeartFilled
className={`text-2xl text-red-500 dark:text-red-600 ${user.id === item.user._id && 'cursor-pointer'}`}
onClick={() => addOrRemoveLike(item._id)}
/>
)
: (
<HeartOutlined
className="text-2xl"
onClick={() => addOrRemoveLike(item._id)}
/>
)
}
{
myLikes.length > 0 && (
<div
className={`text-sm font-medium ${user._id === item.user._id && 'cursor-pointer '}`}
onClick={() => { setIsOpen(user._id === item.user._id); }}
>
{numberWithCommas(myLikes.length).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} likes
</div>
)
}
</div>
<div className="text-sm relative before:content-[''] before:absolute before:block before:w-full before:h-[2px]
before:bottom-0 before:left-0 before:bg-blue-500 dark:before:bg-blue-600
before:hover:scale-x-100 before:scale-x-0 before:origin-top-left
before:transition-all before:ease-in-out before:duration-300
cursor-pointer text-blue-500 dark:text-blue-600
"
>Go to this post
</div>
</div>
<div className="flex flex-row gap-2 flex-wrap">
{item.tags.map((i) => (
<div key={i} className="flex flex-row items-center bg-blue-500 px-1 text-white dark:bg-blue-600 transition-all duration-500">
<p className="text-sm ">#{i}</p>
</div>
))}
</div>
<div className="flex flex-row">
<p className="text-sm truncate whitespace-nowrap overflow-hidden">{item.description}</p>
</div>
</div>
</div>
{
isOpen && (
<Modal
setClose={setIsOpen}
header="Likes"
>
{
myLikes.map((i, index) => (
<div
key={index}
className={` ${index !== myLikes.length - 1 && 'mb-2'} flex flex-row justify-center items-center cursor-pointer`}
>
<div className="w-full flex-1 p-2 shadow dark:bg-nft-black-2 flex flex-row items-center justify-between">
<div className="flex flex-row gap-5 flex-1 items-center">
<div className="h-10 w-10 rounded-full flex justify-center items-center bg-nft-gray-1 dark:bg-nft-black-1 overflow-hidden">
{
i.user.logo.length > 0
? (
<img
src={`${process.env.SERVER}/${i.user.logo}`}
className="w-full h-full object-cover"
/>
)
: <UserOutlined />
}
</div>
<div className="flex flex-col items-start justify-between">
<p>{i.user.username}</p>
{((i.user.firstName.length > 0) || (i.user.lastName.length > 0))
&& (
<h1
className="font-medium text-sm"
>{`${i.user.firstName} ${i.user.lastName}`}
</h1>
)}
</div>
</div>
</div>
</div>
))
}
</Modal>
)
}
</div>
);
};
export default Post;
I use react-slick for carousel. But height dont get. I parent div heigth h-[70%]. When I see without images everything good but after add react slick carousel images height increased. How do this?
