https://github.com/myashavanth/togglehead
This project demonstrates a responsive webpage featuring several dynamic sections implemented using Swiper.js. Swiper.js is a powerful and flexible JavaScript library for creating modern, mobile-friendly carousels and sliders.
https://github.com/myashavanth/togglehead
chakra-ui css3 html5 javascript reactjs swiper-js
Last synced: about 2 months ago
JSON representation
This project demonstrates a responsive webpage featuring several dynamic sections implemented using Swiper.js. Swiper.js is a powerful and flexible JavaScript library for creating modern, mobile-friendly carousels and sliders.
- Host: GitHub
- URL: https://github.com/myashavanth/togglehead
- Owner: mYashavanth
- Created: 2023-12-29T11:47:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-02T16:06:10.000Z (over 2 years ago)
- Last Synced: 2025-07-07T05:47:10.321Z (11 months ago)
- Topics: chakra-ui, css3, html5, javascript, reactjs, swiper-js
- Language: JavaScript
- Homepage: https://togglehead-alpha.vercel.app
- Size: 355 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Togglehead
## Description
This project showcases a responsive webpage with various sections using Swiper.js to implement carousel functionality, including a top carousel section with navigation dots and autoplay, a card slider supporting mouse and touch gestures, a statistics section with counting animations, and an FAQ section with expandable answers.
## Features
+ Top Carousel Section:
Navigation dots for seamless interaction
Auto play feature for engagement
+ Card Slider:
Supports smooth dragging using mouse and touch gestures
+ Statistics Section:
Counting or ticker animation for numbers to animate from 0 to desired values
## Technologies Used
+ HTML
+ CSS
+ JavaScript
+ React.js
+ Swiper.js
+ Chakra UI
## Installation
1. Clone the Resitory:
git clone https://github.com/mYashavanth/Togglehead.git
2. Open the project Directory:
cd project-name
3. Run ```npm run dev``` in your terminal to start the server
## Usage
1. Navigate through different sections using the provided navigation elements.
2. Interact with the carousels by clicking the navigation dots or dragging the sliders.
3. Observe the statistics section for the counting animations.
4. Access the FAQ section and click the plus icon to view the answers.