LEARN@IGP
23
Widgets: Panel Sliding
Slides one image at a time inside a panel Updated: 2014-07-18
Overview
The sliding panel is a fixed size block that can be inserted into a reflowable or fixed layout ePub3 and contains multiple image panels that can be accessed by the user by sliding horizontally or vertically, depending on the options set.
The purpose of the sliding panel is to allow the exploration or revealing of a number of images prepared to match the Panel dimensions. In tablets and mobile devices this can increase content density when appropriate.
Usage Information
A sliding panel contains a single unordered list within a slider block. The list can contain any number of list items each of which act as independent frames.
The slider panel must be sized to match the frames in terms of width and height. The height is the same as the panel height. The width is the panel width multiplied by the number of panels.
Images ideally fill the list item panels.
It is the users responsibilty each of which must be manipulated to the correct size for the panel.
It can also be presented
The sliding panel is specifically targeted at presenting a list of images which may optionally have a caption. However because the sliding element is an <li> it can contain any valid content.
It is your responsibility to ensure all content is
Sliding Direction - Horizontal
-
New Zealand
-
Australia
-
Germany
-
Philippines
-
India
Basic Tagging Pattern horizontal sliding
The default behaviour is horizontal sliding.
<div class="widgets-rw panel-sliding-rw" id="psi1" title="Panel Sliding"> <div class="slider-rw"> <ul> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 1</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 2</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 3</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 4</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 5</p> </li> </ul> </div> </div>
Default Example CSS for Horizontal Panels
In this sample CSS the panel is 600px X 400px. This can be customized to your specific project requirements.
In this example there are five frames of 600px for a total slider width of 3000px.
Note that in the general CSS over-rides all divs are set to box-sizing: border-box;
/* Panel Sliding */
.panel-sliding-rw {
width: 600px;
height:400px;
background-color: gray;
overflow: hidden;
position: relative;
}
.panel-sliding-rw .slider-rw {
width: 3000px;
height:400px;
position: absolute;
border-radius: 0;
}
.panel-sliding-rw.slide-vertical-rw .slider-rw {
width: auto;
height: auto;
}
.panel-sliding-rw .slider-rw ul {
margin: 0;
padding: 0;
}
.panel-sliding-rw .slider-rw li {
list-style: none;
width: 600px;
height: 400px;
float: left;
position: relative;
margin: 0;
padding: 0;
}
.panel-sliding-rw .frame-rw li img {
width: 600px;
height: 400px;
}
.panel-sliding-rw .caption-rw {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.4);
color: white;
}
Sliding Direction - Vertical
-
New Zealand
-
Australia
-
Germany
-
Philippines
-
India
Tagging Pattern for Vertical Sliding Panel
<div class="widgets-rw panel-sliding-rw slide-vertical-rw exclude-auto-rw" id="psi1" title="Panel Sliding"> <div class="frame-rw"> <ul> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 1</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 2</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 3</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 4</p> </li> <li><img alt="" src="default-graphic.png" /> <p class="caption-rw">Caption: Image 5</p> </li> </ul> </div> </div>