Skip to content

Commit 7d5fdca

Browse files
shree404shree404
committed
updated partners section
1 parent aa8f148 commit 7d5fdca

File tree

2 files changed

+119
-73
lines changed

2 files changed

+119
-73
lines changed

‎src/Components/landingpage/partners.jsx‎

Lines changed: 63 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,75 @@
11
import Title from "./title";
22
import img1 from "../../assets/LandingPage/pr-1.jpg";
3-
import React from "react";
43
import { Container, Carousel, Row, Col } from "react-bootstrap";
54
import img2 from "../../assets/LandingPage/about.jpg";
5+
import React, { useState, useEffect } from "react";
66

7-
const images = [img1, img1, img2, img1, img2, img2, img2];
8-
9-
const generateInfiniteCarouselItems = (images, numItems) => {
10-
const totalImages = images.length;
11-
const sequence = [];
12-
13-
for (let i = 0; i < numItems; i++) {
14-
const startIndex = i % totalImages;
15-
const itemIndices = [
16-
(startIndex + 0) % totalImages,
17-
(startIndex + 1) % totalImages,
18-
(startIndex + 2) % totalImages,
19-
(startIndex + 3) % totalImages,
20-
];
21-
sequence.push(itemIndices);
7+
function Partners() {
8+
const images = [img1, img1, img2, img1, img2, img2, img2];
9+
const [currentIndex, setCurrentIndex] = useState(0);
10+
const [itemsToShow, setItemsToShow] = useState(5);
11+
12+
useEffect(() => {
13+
const handleResize = () => {
14+
const screenWidth = window.innerWidth;
15+
if (screenWidth < 576) {
16+
setItemsToShow(1);
17+
} else if (screenWidth < 992) {
18+
setItemsToShow(2);
19+
} else if (screenWidth < 1280) {
20+
setItemsToShow(3);
21+
} else {
22+
setItemsToShow(5);
23+
}
24+
};
25+
26+
handleResize();
27+
window.addEventListener('resize', handleResize);
28+
29+
return () => window.removeEventListener('resize', handleResize);
30+
}, []);
31+
32+
const itemsToDisplay = [];
33+
const totalItems = images.length;
34+
35+
for (let i = 0; i < Math.ceil(totalItems / itemsToShow); i++) {
36+
const start = (i * itemsToShow + currentIndex) % totalItems;
37+
const group = [];
38+
39+
for (let j = 0; j < itemsToShow; j++) {
40+
group.push(images[(start + j) % totalItems]);
41+
}
42+
43+
itemsToDisplay.push(group);
2244
}
2345

24-
return sequence;
25-
};
46+
const handleSelect = (selectedIndex) => {
47+
setCurrentIndex(selectedIndex * itemsToShow);
48+
};
2649

27-
function Partners() {
28-
const carouselItems = generateInfiniteCarouselItems(
29-
images,
30-
images.length * 2
31-
);
3250
return (
33-
<> <Title title={"PARTNERS"} head={"Our Partners "} />
34-
<div className="Partners">
35-
<Container >
36-
<Carousel>
37-
{carouselItems.map((seq, index) => (
38-
<Carousel.Item key={index}>
39-
<Row >
40-
{seq.map((imgIndex, i) => (
41-
<Col key={i} className="Partners-col">
42-
<img
43-
src={images[imgIndex]}
44-
alt={`Slide ${imgIndex + 1}`}
45-
className="Partners-col__image"
46-
/>
47-
</Col>
48-
))}
49-
</Row>
50-
</Carousel.Item>
51-
))}
52-
</Carousel>
53-
</Container>
51+
<>
52+
<Title title={"PARTNERS"} head={"Our Partners "} />
53+
<div className="Partners">
54+
<Container>
55+
<Carousel activeIndex={Math.floor(currentIndex / itemsToShow)} onSelect={handleSelect}>
56+
{itemsToDisplay.map((itemImages, index) => (
57+
<Carousel.Item key={index}>
58+
<Row>
59+
{itemImages.map((image, imgIndex) => (
60+
<Col key={imgIndex} className="Partners-col">
61+
<img
62+
src={image}
63+
alt={`Slide ${index * itemsToShow + imgIndex + 1}`}
64+
className="Partners-col__image"
65+
/>
66+
</Col>
67+
))}
68+
</Row>
69+
</Carousel.Item>
70+
))}
71+
</Carousel>
72+
</Container>
5473
</div>
5574
</>
5675
);

‎src/Components/landingpage/pastevent.jsx‎

Lines changed: 56 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,53 +19,80 @@ function PastEvent() {
1919
{ title: "event title 8", image: eventimg },
2020
];
2121

22+
23+
2224
const [currentIndex, setCurrentIndex] = useState(0);
23-
const itemsToShow = 4;
25+
const [itemsToShow, setItemsToShow] = useState(4);
2426

25-
const getVisibleItems = () => {
26-
return Array.from({ length: itemsToShow }, (_, i) => {
27-
const index = (currentIndex + i) % PastEventArray.length;
28-
return PastEventArray[index];
29-
});
30-
};
27+
const totalItems = PastEventArray.length;
28+
29+
30+
useEffect(() => {
31+
const handleResize = () => {
32+
const screenWidth = window.innerWidth;
33+
if (screenWidth < 576) {
34+
setItemsToShow(1);
35+
} else if (screenWidth < 992) {
36+
setItemsToShow(2);
37+
}else if (screenWidth < 1280) {
38+
setItemsToShow(3);
39+
}
40+
else {
41+
setItemsToShow(4);
42+
}
43+
};
3144

32-
const handleNavigation = (direction) => {
33-
setCurrentIndex((prevIndex) => {
34-
const newIndex = (prevIndex + direction + PastEventArray.length) % PastEventArray.length;
35-
return newIndex;
36-
});
45+
handleResize();
46+
window.addEventListener('resize', handleResize);
47+
48+
return () => window.removeEventListener('resize', handleResize);
49+
}, []);
50+
51+
const nextItem = () => {
52+
setCurrentIndex((prevIndex) => (prevIndex + itemsToShow) % totalItems);
3753
};
3854

39-
40-
const visibleItems = getVisibleItems();
55+
const prevItem = () => {
56+
setCurrentIndex((prevIndex) => (prevIndex - itemsToShow + totalItems) % totalItems);
57+
};
4158

42-
const prevItem = () => handleNavigation(-itemsToShow);
43-
const nextItem = () => handleNavigation(itemsToShow);
59+
const itemsToDisplay = [];
60+
for (let i = 0; i < itemsToShow; i++) {
61+
itemsToDisplay.push(PastEventArray[(currentIndex + i) % totalItems]);
62+
}
4463

4564
return (
46-
<div style={{ display: 'flex', alignItems: 'center', padding:'0rem 1rem' }}>
47-
<button onClick={prevItem} className="herobutton" disabled={currentIndex === 0}>
48-
<ChevronLeft />
49-
</button>
50-
<Container>
51-
<Title title={"GALLERY"} head={"Sneak Peek From Past Events"} />
65+
<>
66+
<Container className="Announcement">
67+
<Title title={"ANNOUNCEMENTS"} head={"Our Upcoming Events"} />
5268
<Row>
53-
{visibleItems.map((item, index) => (
54-
<Col md={3} key={index} className="Announcement-individual">
69+
{itemsToDisplay.map((item, index) => (
70+
<Col key={index} className="Announcement-individual">
5571
<img src={item.image} className="Announcement-individual__image" alt={`image of ${item.title}`} />
56-
<div style={{ padding: '1rem 0rem' }}>
57-
<h2 className="Announcement-individual__title">{item.title}</h2>
72+
<div style={{padding:'1rem 0rem'}}>
73+
<h2 className="Announcement-individual__title">{item.title}</h2>
5874
</div>
5975
<Button buttontext={"View More"} buttonclass={"eventbutton"} />
6076
</Col>
6177
))}
6278
</Row>
63-
</Container>
64-
<button onClick={nextItem} className="herobutton" disabled={currentIndex + itemsToShow >= PastEventArray.length}>
79+
<Row>
80+
<div className="Announcement-row2">
81+
<button onClick={prevItem} className="Announcement-row2__button">
82+
<ChevronLeft />
83+
</button>
84+
<button onClick={nextItem} className="Announcement-row2__button" >
6585
<ChevronRight />
6686
</button>
67-
</div>
87+
</div>
88+
</Row>
89+
</Container>
90+
</>
6891
);
6992
}
7093

94+
7195
export default PastEvent;
96+
97+
98+

0 commit comments

Comments
 (0)