EverWeb Codebox logo

EverWeb Widgetbox 3

Text & Image Slideshow

Text Image Slider Widget
image text heading slider

HTML Heading

This is a paragraph inside the same div as the image with alt text.
The image is floated left and its percentage width can be adjusted.
The navigation arrows are only seen on hover and the previous and next arrows can have different colors.
The shadows are optional.

Text & Image slideshow

Paddle Steamer Waverley

This is the Waverley - the world's last seagoing paddle steamer.
The ship is powered by a 2100 horsepower, triple expansion reciprocating steam engine.
Built 1947 by A. & J. Inglis Ltd. at Pointhouse, Glasgow Fit out 1947 by A&J Inglis at Glasgow.

Shadow & Drop Shadow Options

Clyde Arc

The Clyde Arc, is a road bridge spanning the River Clyde in Glasgow, in west central Scotland.
The bridge connects Finnieston Street on the north bank of the river to Govan Road on the southern bank.
The bridge takes four lanes of traffic.

Text Image Sideshow Widget
Text Image Sider Widget

Info Slider

Each slide consists of an image with alt text, an HTML heading and a paragraph.
The image is floated left and its percentage width is adjustable.
The previous and next navigation arrows can have different colors so that they can be set for the best visibilty.
These arrows are only visible on hover. The slideshow can actually be navigated by clicking or tapping anywhere within the container since each control covers 50% of the area. This makes it easy to navigate when viewed on touch devices.
The example on this page has the optional box shadow and drop shadow added. These can be removed to integrate the slider content with the rest of the page content.

Widget Settings

The widget settings are shown to the right and should need no explanation for those who have created a slideshow in EverWeb!
As would be expected, the text is entered as HTML so the usual rules apply as far as adding line breaks, hyperlinks and special characters goes.
The image's percentage width can be adjusted in relation to the text and the separation can be adjusted using the value for "Margin Right".
The text isn't restricted to the area to the right of the image. If more text is added it will float to the left of the container to wrap the image.

This widget is included in the Sliders widget pack.