HTML and CSS Reference
In-Depth Information
For simplicity's sake, we've added the mark-up to the HTML source. Appending it to the
jQuery is often a better approach, to ensure that the controls appear only when they are
usable.
Let's style these arrows with CSS:
#slideshow-prev, #slideshow-next
{
display
:
block
;
position
:
absolute
;
top
:
190px
;
width
:
0
;
height
:
0
;
border-style
:
solid
;
border-width
:
28px 21px
;
border-color
:
transparent
;
outline
:
none
;
}
#slideshow-prev:hover, #slideshow-next:hover
{
opacity
:
.5
;
filter
:
alpha(opacity=50)
;
-ms-filter
:
"
progid
:
DXImageTransform.Microsoft.Alpha(Opacity=50)"
;
}
#slideshow-prev
{
left
:
0
;
border-right-color
:
#fff
;
}
#slideshow-next
{
right
:
0
;
border-left-color
:
#fff
;
}
We've positioned the arrows absolutely within the slideshow frame and added an opacity
change on hover. In our example, we've used a
CSS triangle trick
to style the arrows with
27
straight CSS, but feel free to use an image if you want richer graphics.
