Unit08 Responsive Hero Slider

Overview

The purpose of this assignment is to have you build a responsive hero slider using the Swiper.js library

Tools

• Use the Swiper.js Mobile Touch Slider

Objectives

At the end of this module, you should be able to...

• Create a new page on your WordPress site
• Create a set of 4 responsive hero images
• Connect to the Slider.js resources using CDN links
• Adapt the provided HTML to your slider needs
• Modify the provided CSS to include text over images
• Write an initialization script with custom properties

Tasks

• Build a set of 4 responsive hero images
• Link to swiper from a CDN
• Add Swiper HTML Layout
• Starter Swiper CSS Styles/Size
• Modify their Initialize Swiper script
• Adjust the speed of the slide
• Try the Coverflow Effect
• Try the Cards Effect
• Try the Cube Effect
• Try the Flip effect
• Try the Sliding Effect

Watch

• Kultra
• 4610 08a- Hero Slider Overview
• 4610 08b- Upload Slider Images
• 4610 08c- CDN Links for Swiper
• 4610 08d- Swiper HTML
• 4610 08e- Swiper CSS
• 4610 08f- Initialize the Slider in JavaScript
• 4610 08g- Responsive Images
• 4610 08h- Text Overlay
• 4610 08i- Fixing Problems

Reflection Questions

After reading the following article, write me a short 1-2 paragraph summary and submit it in Canvas.

• Please submit a 1-2 paragraph summary on Designing Friction For A Better User Experience by Zoltan Kollin

Assignment Example

• View the small screen layout
• View the medium screen layout
• View the large screen layout

Assignment Checklist

Unit08 Responsive Hero Slider (10 pts)

Responsive Images

• Build a set of four large images that are 1400px wide by a similar height
• Build a smaller set of the same 4 images that are 800px wide
• Save them as webp at 60% quality

HTML

• Modify the provided HTML to include a picture tag and two responsive images
• Add text element to overlay the photo

CSS

• The images need to scale with the page
• The overlay text need to fit on small and large screens
• The overlay text needs to be visible on light and dark images

Swiper Initialization

• Use a transition effect that is NOT fross-fade

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail