https://github.com/yashi-singh-1/da-19-slider-with-radio-buttons

Why use JavaScript when you can use CSS? This challenge demonstrates how to create an interactive slider using only CSS selectors, showcasing the versatility and power of CSS.
https://github.com/yashi-singh-1/da-19-slider-with-radio-buttons

coding-challenge codingchallenge css css-slider cssslider day-19 front-end front-end-challenge frontend frontend-challenge frontendchallanges html html5 radio-buttons

Last synced: 3 months ago
JSON representation

Why use JavaScript when you can use CSS? This challenge demonstrates how to create an interactive slider using only CSS selectors, showcasing the versatility and power of CSS.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/da-19-slider-with-radio-buttons
• Owner: Yashi-Singh-1
• Created: 2024-06-28T17:28:09.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-06-28T17:50:41.000Z (11 months ago)
• Last Synced: 2024-11-10T11:15:11.064Z (7 months ago)
• Topics: coding-challenge, codingchallenge, css, css-slider, cssslider, day-19, front-end, front-end-challenge, frontend, frontend-challenge, frontendchallanges, html, html5, radio-buttons
• Language: CSS
• Homepage:
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Slider with Radio Buttons


Challenge Description


Why use JavaScript when you can use CSS? This challenge demonstrates how to create an interactive slider using only CSS selectors, showcasing the versatility and power of CSS.


Introduction


This challenge is part of the 100 Days CSS Challenge. The goal is to create a functional and interactive slider using only CSS, without any JavaScript. This exercise highlights the capabilities of CSS selectors and animations.


Purpose


The purpose of this challenge is to demonstrate how CSS alone can be used to create dynamic and interactive web components. By completing this challenge, you will improve your understanding of CSS selectors and animations.


Features




  
Interactive slider

  
Pure CSS implementation

  
No JavaScript required

  
Responsive design



Prerequisites


You will need a web browser to view the project. No additional installations are required.


File Structure



Slider-with-Radio-Buttons/

├── index.html

├── style.css

└── README.md



Tools




  
Visual Studio Code (VS Code)

  
Any Web Browser



Preview


Check out the live demo here.




Usage




  
Use the radio buttons to navigate through the slider.

  
Customize the slider by editing the CSS in the style.css file.



Contributing


Contributions are welcome! Here's how you can contribute:




  
Fork the repository.

  
Create a new branch: git checkout -b feature/my-feature.

  
Make your changes.

  
Commit your changes: git commit -am 'Add my feature'.

  
Push to the branch: git push origin feature/my-feature.

  
Submit a pull request.



Credits


This challenge was inspired by the 100 Days CSS Challenge.


Author


Yashi Singh