ThemeKit Hero Scroller
The ThemeKit M1 Hero Scroller is a mauch more vianle option if a hero image slider is required. It uses CSS scroll snap so there is no to Javascript to download and drain mobile device batteries.
Snapping
On desktop and laptop computers the sliding is achieved by lightly horizontal scrolling on the mouse or track pad or by dragging the scrollbar on ancient devices.
The scrollbar can be styled for webkit browsers like Chrome and Safari with controls for height, color and track color. The scrollbar is hidden below the break point and appear as the default scrollbar on iOS devices.
Images
As with any responsive item showing full or content width iamges the image files are inserted in three sizes. The demo images are 1200 x 720px, 720 x 480px and a 9:16 aspect ratio image at 375 x 667px for phones in portrait mode.
Lazy Load
An group of images or slideshow on a responsive website really needs the images to have some method of lazy loading. This is particularly important when the site is viewed on mobile phones. If the web pages doesn't download fast, potential visitors will leave. Too many and/or oversized images ise the main reason for web pages having poor performance.
Info
Each slide is contained in an HTML5 <figure> element. The <figcaption> has a caption, optional span, text and an optional CTA style link.
Call To Action
The CTA is used in web design to entice the visitor into taking action to go to another page which has an irresistible offer or incentive.
While the design, relevence and quality of the hero item gets visitor to stay on the site, the CTA is the most important element for getting visitors to click through to other pages.