Content Slider
Grid PanelsIn addition to showing image info the content slider can be used for displaying product info or as a section navigation menu on large websites
Image InfoContent Slideshow
Container
StylesThe responsive container is centered with a maximum width setting.
The image and article are showing the optional border and bottom box shadow.
Layout
GridThe slide has a two column grid layout with the text in one column and the image in another. The positions can be switched if required.
Pro Widgets
Content
ItemsThe text is in an HTML5 <article> element and has a heading, optional span, text and a CTA(call to action) style link to open internal or external pages.
More WidgetsContent Slideshow
This slideshow was custom designed to show both an image with alt text and a content block with information. This arrangement will have much better search engine indexing.
The slidshow stage has a two column grid layout above the breakpoint. Below the break the content area moves to row two below the image.
The relative column widths can be adjusted and the layout switched.
The slider is navigated by the arrow icon action tabs and grab and drag on computers and can be swiped on touch devices.
The arrows can removed at any selected breakpoint for tablets or mobile phones.
Each slide has …
- Image with alt text
- Images lazy loaded by default
- Content heading
- Optional styled span with text size and color controls
- A paragraph for descriptive text
- An optional link to open internal or external pages
Autoplay
Autoplay is irritating and takes control away from the visitor but may be required in some applications.
The autpplay option has a control to allow it to run and stop at the last slide to save running down the battery on a mobile device.
Remember that autoplay is happening even when you can't see it !