jquery - pure css slider

Jquery - pure css slider

Creating a pure CSS slider using jQuery involves leveraging CSS for animations and transitions, while jQuery is used for controlling the slider behavior such as navigation or autoplay. Here's a basic example of how you can create a simple image slider with pure CSS for styling and jQuery for handling slide transitions:

HTML Structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure CSS Slider with jQuery Controls</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="slider"> <div class="slides"> <div class="slide"><img src="slide1.jpg" alt="Slide 1"></div> <div class="slide"><img src="slide2.jpg" alt="Slide 2"></div> <div class="slide"><img src="slide3.jpg" alt="Slide 3"></div> </div> </div> <button class="prev">Previous</button> <button class="next">Next</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </body> </html>

CSS (styles.css)

body { font-family: Arial, sans-serif; text-align: center; } .slider { width: 80%; margin: auto; overflow: hidden; position: relative; } .slides { display: flex; transition: transform 0.5s ease; } .slide { min-width: 100%; } .slide img { width: 100%; height: auto; } button { margin-top: 10px; padding: 10px 20px; cursor: pointer; }

JavaScript (script.js)

$(document).ready(function() { var slideWidth = $('.slide').width(); var slideIndex = 0; // Next slide $('.next').click(function() { slideIndex++; $('.slides').css('transform', 'translateX(' + (-slideIndex * slideWidth) + 'px)'); }); // Previous slide $('.prev').click(function() { slideIndex--; $('.slides').css('transform', 'translateX(' + (-slideIndex * slideWidth) + 'px)'); }); });

Explanation

  1. HTML Structure:

    • The .slider container holds .slides, which are individual .slide elements. Each slide contains an image (<img>).
    • Navigation buttons (Previous and Next) are placed outside the slider container for easy access.

  2. CSS (styles.css):

    • The .slider container has overflow: hidden to hide overflowing content (slides).
    • .slides is a flex container to horizontally align slides.
    • Each .slide takes up min-width: 100%, ensuring they fill the slider horizontally.
    • The transition property on .slides enables smooth slide transitions.

  3. JavaScript (script.js):

    • On document ready, initialize variables for slide width (slideWidth) and current slide index (slideIndex).
    • Use jQuery to handle click events on .next and .prev buttons to increment or decrement slideIndex.
    • Update the .slides container's transform property to slide the images left or right based on slideIndex.

Notes

  • This example assumes the images (slide1.jpg, slide2.jpg, slide3.jpg) are in the same directory as your HTML file.
  • Adjust CSS styles and JavaScript logic as needed for more complex slide animations, autoplay, or other features.

This setup provides a foundation for a basic pure CSS slider controlled by jQuery for navigation.

Examples

  1. jquery - pure css slider with auto-play

    • Description: Create a pure CSS slider that automatically transitions between slides.
    • Code:
      <style> .slider { position: relative; width: 100%; max-width: 600px; margin: auto; overflow: hidden; } .slides { display: flex; transition: transform 0.5s ease-in-out; animation: slide-animation 10s infinite; } .slides img { width: 100%; border: none; } @keyframes slide-animation { 0% { transform: translateX(0); } 25% { transform: translateX(-100%); } 50% { transform: translateX(-200%); } 75% { transform: translateX(-300%); } 100% { transform: translateX(0); } } </style> <div class="slider"> <div class="slides"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> </div>

  2. jquery - pure css slider with navigation buttons

    • Description: Implement navigation buttons to manually change slides in a pure CSS slider.
    • Code:
      <style> .slider { position: relative; width: 100%; max-width: 600px; margin: auto; overflow: hidden; } .slides { display: flex; transition: transform 0.5s ease-in-out; } .slides img { width: 100%; border: none; } .navigation { position: absolute; width: 100%; top: 50%; display: flex; justify-content: space-between; } .prev, .next { background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; cursor: pointer; } </style> <div class="slider"> <div class="slides" id="slides"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> <div class="navigation"> <span class="prev" onclick="moveSlide(-1)">&#10094;</span> <span class="next" onclick="moveSlide(1)">&#10095;</span> </div> </div> <script> let currentSlide = 0; function moveSlide(n) { const slides = document.getElementById('slides'); const totalSlides = slides.children.length; currentSlide = (currentSlide + n + totalSlides) % totalSlides; slides.style.transform = `translateX(-${currentSlide * 100}%)`; } </script>

  3. jquery - pure css slider with dots navigation

    • Description: Add dot indicators to navigate between slides in a pure CSS slider.
    • Code:
      <style> .slider { position: relative; width: 100%; max-width: 600px; margin: auto; overflow: hidden; } .slides { display: flex; transition: transform 0.5s ease-in-out; } .slides img { width: 100%; border: none; } .dots { text-align: center; position: absolute; width: 100%; bottom: 10px; } .dot { height: 15px; width: 15px; margin: 0 5px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; display: inline-block; cursor: pointer; } </style> <div class="slider"> <div class="slides" id="slides"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> <div class="dots"> <span class="dot" onclick="currentSlide(0)"></span> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </div> <script> function currentSlide(n) { const slides = document.getElementById('slides'); slides.style.transform = `translateX(-${n * 100}%)`; } </script>

  4. jquery - pure css slider responsive design

    • Description: Create a responsive pure CSS slider that adjusts to different screen sizes.
    • Code:
      <style> .slider { position: relative; width: 100%; max-width: 600px; margin: auto; overflow: hidden; } .slides { display: flex; transition: transform 0.5s ease-in-out; } .slides img { width: 100%; border: none; } @media (max-width: 600px) { .slides img { width: 100%; } } </style> <div class="slider"> <div class="slides"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> </div>

  5. jquery - pure css slider with fade effect

    • Description: Implement a fade effect for transitioning slides in a pure CSS slider.
    • Code:
      <style> .slider { position: relative; width: 100%; max-width: 600px; margin: auto; overflow: hidden; } .slides { position: relative; } .slides img { position: absolute; width: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slides img.active { opacity: 1; } </style> <div class="slider"> <div class="slides" id="slides"> <img src="image1.jpg" alt="Image 1" class="active"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> </div> <script> let currentIndex = 0; const slides = document.querySelectorAll('.slides img'); setInterval(() => { slides[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].classList.add('active'); }, 3000); </script>

More Tags

camera-calibration show-hide webpack-loader nuget-package django-userena whitespace public-key-encryption connector cronexpression pydicom

More Programming Questions

More Chemical reactions Calculators

More Mixtures and solutions Calculators

More General chemistry Calculators

More Animal pregnancy Calculators