Fade Slider with Custom Buttons
The slider shown below is a tcSlider virtually identical to the sliders on the Simple Sliders page. The difference is that this slider is controlled by three custom buttons (links) that when clicked cause a new slide to fade in.
I'll walk you through the extra code so you can see how easy it is to make a simple tcSlider into a much more interesting slider.
There are three pieces of code necessary for implemented the slider: HTML for the custom buttons/links, CSS, and a little bit of Javascript. The HTML looks like this:
<div id="icecontrols" style="display:none">
<a id="iceslide1" href="#?tc-slide=iceslide1" class="tc-slider-link tc-slider-link-ice"><img src="/index.php/download_file/-/view_inline/61/" /></a>
<a id="iceslide2" href="#?tc-slide=iceslide2" class="tc-slider-link tc-slider-link-ice"><img src="/index.php/download_file/-/view_inline/63/" /></a>
<a id="iceslide3" href="#?tc-slide=iceslide3" class="tc-slider-link tc-slider-link-ice"><img src="/index.php/download_file/-/view_inline/65/" /></a>
</div>
There's not much to the HTML. It's just a container div to tie all of the buttons together and three links that drive the slider. The important part of this code is the tc-slide query argument and the tc-slider-link and tc-slider-link-ice classes. The classes are used by the tcSlider javascript to identify custom links that can be used to drive the slider ('tc-slider-link') and to identify which slider the links control ('tc-slider-link-ice'). The tc-slide argument tells tcSlider which slide should be loaded. An additional 'tc-transition' argument can be used to tell tcSlider how to transition in the new slide; since the code doesn't identify a transition, tcSlider will use the values configured for the block - in this case a fade.
The second piece of code is the CSS. There's only one thing going on here that's interesting with respect to tcSlider. You'll note that there is a tc-active class being used to switch the button background image. tcSlider automatically adds the tc-active class to slider links when the slide the link controls is the currently active slide. The rest of styling just sets up the buttons so that they can be positioned over the slider and handles switching the button background image shown when a button is hovered over:
.tc-slide-container-ice { position: relative; }
#icecontrols { bottom: 34px; left: 24px; position: absolute; }
#iceslide1, #iceslide2, #iceslide3 { background: transparent url(/index.php/download_file/-/view_inline/61/) no-repeat center center; height: 32px; left: 0px; position: absolute; width:
32px; }
#iceslide1 img, #iceslide2 img, #iceslide3 img { display: none; }
#iceslide1.tc-active, #iceslide1:hover { background-image: url(/index.php/download_file/-/view_inline/60/); }
#iceslide2 { background-image: url(/index.php/download_file/-/view_inline/63/); left: 40px }
#iceslide2.tc-active, #iceslide2:hover { background-image: url(/index.php/download_file/-/view_inline/62/); }
#iceslide3 { background-image: url(/index.php/download_file/-/view_inline/65/); left: 80px }
#iceslide3.tc-active, #iceslide3:hover { background-image: url(/index.php/download_file/-/view_inline/64/); }
The final piece of code required to implement the slider is the javascript. You might think that there's a lot that needs to be done, but there isn't. tcSlider handles all of the heavy lifting. The only javascript here is some code to reposition the custom buttons over the top of the slider. Depending on how you implement your styling and handle the placement of your buttons you may well not need any additional javascript. Here's the javascript used on this page:
$(function(){
$('#icecontrols').remove().appendTo('#tc-slider-ice .tc-slide-container-wrap');
$('#icecontrols').show();
});
For more information about using custom links to drive a tcSlider, please refer to the readme.txt file that is included with the add-on.