EverWeb Widgetbox

Accordion Slider

Accordion Slider Heading Caption Alt Link

This accordion style horizontal slider can run in auto mode with pause on hover or manual with three transition effects supported by the jQuery Easing plugin.

Each slide header can contain both the slide number and a heading and each slide can have a caption and be a hyperlink if required. This makes it suitable for both a banner/slider and an illustrated navigation menu.

These are variables which can be set in the Widget inspector...

Color of the slider border

(The color of the border can be made the same as the page background to slim the slider down a little if required.)

Color of the slider background

Color of the slide headers

Font family, size and color of the headings and slide numbers

Active color of the slide number & heading text

Show/hide the slide numbers

Font family, size and color of the slide captions

Transition: The slider uses the jQuery Easing plugin and has a choice of easeOutBounce, easeInOutQuart or easeOutElastic for the transition type

Autoplay: True or false with pause on hover

Speed: The duration of each slide in seconds in autoplay mode

  1. Heading [1]

    To create a line break in the caption,
    use the HTML line break tag
    Image 1 Alt Text
  2. Heading [2]

    This Image is a Hyperlink
    Image [2] Alt Text
  3. Heading [3]

    Image [3] Caption
    Image [2] Alt Text
  4. Heading [4]

    Image [4] Caption
    Image [4] Alt Text
  5. Heading [5]

    Image [5] Caption
    Image [5] Alt Text
Heading Caption Alt Text Hyperlink
Accordion Slideshow

Slider Size

Set the slider width using a drag handle or the Metrics inspector.

Adjust the slider height using a drag handle until a small portion of the white background is seen at the bottom of the image.

Fine tune the height to remove this using the height up/down arrows in the Mettrics inspector.

Headings, Captions, Alt Text & Hyperlinks

Get The Widget

Note: This widget requires EverWeb V1.4