SP26 Web Midterm SP24-BCS-B

April 6, 2026 Class Quiz Web Technologies Course

Transform your static “Products” section into an interactive, touch-responsive Carousel (Slider) using your existing styled product cards.

  1. Library or Custom Implementation: You may use a lightweight jQuery plugin (like Slick or Owl Carousel) via CDN, or write a custom Vanilla JS/jQuery slider.
  2. Configuration: The carousel must meet these specific requirements:
    • Infinite Loop: The slider should not stop at the last card.
    • Responsive Breakpoints: Show 3 cards on desktop, 2 cards on tablets, and 1 card on mobile devices.
  3. Dynamic Controls: * Create “Previous” and “Next” buttons. Use jQuery to make these buttons functional.
    • Implement a “Slide Counter” (e.g., “Showing 1 of 10”) that updates every time the user moves to a different card.
  4. The “AI-Enhanced” Feature: Use AI to generate a script that auto-plays the slider every 5 seconds, but pauses the auto-play whenever the user’s mouse hovers over a product card.