Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed #16: Improved slider logic and added more features #31

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixed #16: Improved slider logic and added more features #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
389aea4
fiexed #16: used slick carousel for better animation and added more f…
shreyansh1410 Oct 13, 2024
4517e9f
fixed #16: improved sldier logic and added more features
shreyansh1410 Oct 13, 2024
e773e7a
Merge branch 'main' of https://github.com/shreyansh1410/Ayurveda-GPT
shreyansh1410 Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions ayurveda/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions ayurveda/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"react-slick": "^0.30.2",
"react-spring": "^9.7.3",
"slick-carousel": "^1.8.1",
"swiper": "^11.1.14",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
71 changes: 23 additions & 48 deletions ayurveda/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { useState } from "react";
import React from "react";
import { Link } from "react-router-dom";
import Header from "../components/Header";
import Footer from "../components/Footer";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import styles from "../styles/App.module.css";
import AyurvedaBooks from "../components/AyurvedaBooks";

const Home = () => {
const [currentSlide, setCurrentSlide] = useState(0);

const features = [
{
title: "Personalized Guidance",
Expand All @@ -26,53 +26,31 @@ const Home = () => {
},
];

const nextSlide = () => {
setCurrentSlide((prevSlide) => (prevSlide + 1) % features.length);
};

const prevSlide = () => {
setCurrentSlide(
(prevSlide) => (prevSlide - 1 + features.length) % features.length
);
const settings = {
dots: true, // Show navigation dots
infinite: true, // Infinite looping of slides
speed: 500, // Transition speed
slidesToShow: 1, // Number of slides to show at a time
slidesToScroll: 1, // Number of slides to scroll per click
autoplay: true, // Enable autoplay
autoplaySpeed: 3000, // Autoplay interval in milliseconds (3 seconds)
arrows: true, // Show next/prev arrows
};

return (
<div className={styles.app}>
<Header />

<section className={styles.features}>
<h2 className={styles.featuresHeading}>Features</h2>{" "}
{/* Features Heading */}
<div className={styles.carousel}>
{/* Left button */}
<button
className={`${styles.carouselBtn} ${styles.left}`}
onClick={prevSlide}
>
&#60;
</button>

{/* Carousel content */}
<div
className={styles.carouselInner}
style={{ transform: `translateX(-${currentSlide * 100}%)` }}
>
{features.map((feature, index) => (
<div className={styles.carouselItem} key={index}>
<h3>{feature.title}</h3>
<p>{feature.description}</p>
</div>
))}
</div>

{/* Right button */}
<button
className={`${styles.carouselBtn} ${styles.right}`}
onClick={nextSlide}
>
&#62;
</button>
</div>
<h2 className={styles.featuresHeading}>Features</h2>
<Slider {...settings}>
{features.map((feature, index) => (
<div className={styles.carouselItem} key={index}>
<h3>{feature.title}</h3>
<p>{feature.description}</p>
</div>
))}
</Slider>
</section>

<section className={styles.cta}>
Expand All @@ -82,10 +60,7 @@ const Home = () => {
Get Started
</Link>
</section>
<section className={styles.books}>
<h2>Explore Ayurvedic Books </h2>
<AyurvedaBooks />
</section>

<Footer />
</div>
);
Expand Down