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 = {
arrows: false,
className: "center",
centerMode: true,
//centerMode: true,
infinite: true,
centerPadding: "30px",
// centerPadding: "30px",
dots: true,
speed: 500,
slidesToShow: 1,
@ -67,7 +67,7 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
const settings2 = {
fade: true,
centerMode: true,
//centerMode: true,
infinite: true,
dots: true,
speed: 500,
@ -93,23 +93,18 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
dotsClass: 'dots_custom'
};
return (
<div className='w-full h-auto my-20'>
<div className='relative mx-[15vw] justify-between items-center hidden lg:flex'>
<div className='relative mx-[15vw] hidden lg:flex '>
{courseData.images.length > 0 && (
<div className="w-full ">
<div className="w-full h-[40vw]">
<Slider className="w-full h-[40vw]" {...settings2}>
{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
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
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>
))}
@ -125,21 +120,12 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
{courseData.images.map((image, index) => {
return (
<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
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
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>
)