Main Content
Using WC Slideplayer
WC Slide Player Options
WC Slide Player has several options out of the box. You can customize:
- the default grey or the black color schemes,
- the placement of the navigation buttons at the top or bottom of the player, and
- whether or not to include Play All and Pause buttons.
More options may become available as template requests are made and advanced users of CSS may find other ways to customize this player beyond these options.
Color Schemes
The default style of the slide player is grey, but it can also be black:
<!-- navigation buttons -->
<div class="navbuttons slidesB black">
<!-- end navigation buttons -->
<!-- slide collection -->
<div id="slidesB" class="wcslideplayer black">
return to top
<div class="navbuttons slidesB black">
<div class="navbutton firstslide">|<∓lt;</div></div>
<div class="navbutton prevslide"><</div>
<div class="navbutton lastslide">>>|</div>
<div class="navbutton nextslide">></div>
<!-- end navigation buttons -->
<!-- slide collection -->
<div id="slidesB" class="wcslideplayer black">
<!-- a slide --></div><!-- end slide collection -->
<div class="slide" id="slideB01">[INSERT SLIDE #1 HTML HERE]</div>
<!-- end slide -->
<div class="slide" id="slideB02">[INSERT SLIDE #2 HTML HERE]</div>
<!-- end slide -->
Navigation Button Placement
The navigation can be placed above or below the slideplayer, based on where you place the navbuttons div in relation to the slide collection div.
Navigation Below the Player
<!-- slide collection -->
<div id="slidesD" class="wcslideplayer">
<!-- navigation buttons -->
<div class="navbuttons slidesD">
<!-- end navigation buttons -->
return to top
<div id="slidesD" class="wcslideplayer">
<!-- a slide --></div><!-- end slide collection -->
<div class="slide" id="slideD01">[INSERT SLIDE #1 HTML HERE]</div>
<!-- end slide -->
<div class="slide" id="slideD02">[INSERT SLIDE #2 HTML HERE]</div>
<!-- end slide -->
<!-- navigation buttons -->
<div class="navbuttons slidesD">
<div class="navbutton firstslide">|<∓lt;</div></div>
<div class="navbutton prevslide"><</div>
<div class="navbutton lastslide">>>|</div>
<div class="navbutton nextslide">></div>
<!-- end navigation buttons -->
Play All and Pause Buttons
The Slideplayer can be use with or without Play All and Pause buttons. Just add the following two buttons between the prevslide and lastslide button divs:
<div class="navbutton playall">Play All</div>
<div class="navbutton pause">Pause</div>
<div class="navbutton pause">Pause</div>
<!-- slide collection -->
<div id="slidesE" class="wcslideplayer black">
<!-- navigation buttons -->
<div class="slidesE navbuttons black">
<!-- end navigation buttons -->
return to top
<div id="slidesE" class="wcslideplayer black">
<!-- a slide --></div><!-- end slide collection -->
<div class="slide" id="slideE01">[INSERT SLIDE #1 HTML HERE]</div>
<!-- end slide -->
<div class="slide" id="slideE02">[INSERT SLIDE #2 HTML HERE]</div>
<!-- end slide -->
<!-- navigation buttons -->
<div class="slidesE navbuttons black">
<div class="navbutton firstslide">|<∓lt;</div></div>
<div class="navbutton prevslide"><</div>
<div class="navbutton playall">Play All</div>
<div class="navbutton pause">Pause</div>
<div class="navbutton lastslide">>>|</div>
<div class="navbutton nextslide">></div>
<!-- end navigation buttons -->