all_in_one
/
frondend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated course images silder

This commit is contained in:
philipcheung 2025-01-21 19:56:36 +08:00
parent 8c95f5cb9d
commit 356eec8350
1 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/Course/CourseImagesSilder.tsx
View File

@ -40,9 +40,9 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
const settings = { const settings = {
arrows: false, arrows: false,
className: "center", className: "center",
centerMode: true, //centerMode: true,
infinite: true, infinite: true,
centerPadding: "30px", // centerPadding: "30px",
dots: true, dots: true,
speed: 500, speed: 500,
slidesToShow: 1, slidesToShow: 1,
@ -67,7 +67,7 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
const settings2 = { const settings2 = {
fade: true, fade: true,
centerMode: true, //centerMode: true,
infinite: true, infinite: true,
dots: true, dots: true,
speed: 500, speed: 500,
@ -93,23 +93,18 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
dotsClass: 'dots_custom' dotsClass: 'dots_custom'
}; };
return ( return (
<div className='w-full h-auto my-20'> <div className='w-full h-auto my-20'>
<div className='relative mx-[15vw] hidden lg:flex '>
<div className='relative mx-[15vw] justify-between items-center hidden lg:flex'>
{courseData.images.length > 0 && ( {courseData.images.length > 0 && (
<div className="w-full "> <div className="w-full h-[40vw]">
<Slider className="w-full h-[40vw]" {...settings2}> <Slider className="w-full h-[40vw]" {...settings2}>
{courseData.images.map((image, index) => ( {courseData.images.map((image, index) => (
<div key={index} className="relative w-full h-[35vw] transition-all justify-items-center mb-28 "> <div key={index} className=" w-full h-[35vw] p-0 m-0 ">
<img <img
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`} src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
alt={`Course Image ${index + 1}`} alt={`Course Image ${index + 1}`}
className="w-full h-full object-cover object-center rounded-xl " className="w-full h-full object-scale-down block"
/> />
</div> </div>
))} ))}
@ -125,21 +120,12 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
{courseData.images.map((image, index) => { {courseData.images.map((image, index) => {
return ( return (
<div key={index} className="px-4"> <div key={index} className="px-4">
<div key={index} className="relative h-[38vw] transition-all justify-items-center mb-16"> <div key={index} className="relative h-[38vw] transition-all justify-items-center mb-16 overflow-hidden">
<img <img
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`} src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
alt={`Course Image ${index + 1}`} alt={`Course Image ${index + 1}`}
className="w-full h-full object-cover object-center rounded-xl" className="w-full h-full object-scale-down block "
/> />
{index !== currentSlide && (
<div
className="absolute inset-0 bg-white bg-opacity-50 transition-opacity duration-300 rounded-xl"
style={{
objectFit: 'cover',
objectPosition: 'center'
}}
></div>
)}
</div> </div>
</div> </div>
) )