Check out CodaSlider.
I've removed the UL and opted for div's to control it but i'm running into a problem. I want to add a triangle signifying which panel its currently displaying. At the moment, I'm thinking of adding the triangle to the actual slide.jpg, but this is quite bad if someone wants to add another slide.
How would you go about adding a triangle to the current panel dynamically?
Like: https://i.sstatic.net/m5gCB.jpg (It's added on the image)
My CSS:
#control {
width: 938px;
height: 65px;
border-right: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background: #fff url(sliderbg.jpg) repeat;
}
.button { float: left; width: 220px; height: 65px;
margin-right: 15px; border-right: 1px dotted #d1d1d1; }
.buttonInside { padding: 8px; }
.buttonLast { margin-right: 0; margin-left: 2px; border-right: 0px;}
Solution:
Include
ul.navigation a.selected {
background: url(../img/arrow.png) no-repeat top center;
position: relative;
top: -13px;
padding-top: 23px;
}
Set floating element as inline elements can't be given widths and heights
ul.navigation li {
float: left;
margin-right: 12px;
width: 220px;
height: 65px;
border-right: 1px dotted #ddd;
}
I would use a pseudoelement and CSS to add an arrow without an image: http://jsfiddle.net/blineberry/fqKHK/
The CSS with the stock CodaSlider would look like:
ul.navigation a.selected {
position: relative;
background: blue;
color: #FFF;
}
ul.navigation a.selected:before {
content: '';
position: absolute;
height: 0;
width: 0;
bottom: -9px;
left: 50%;
margin-left: -9px;
z-index: 1;
border: 10px solid transparent;
border-top: 10px solid blue;
border-bottom: none;
}
Browser support is modern browsers and IE8+. For IE 7 and lower, I would use an image as @Marco advises or just plain not worry about it.
UPDATE:
I had some time, so I played a bit more with your specific implementation.
Just to clarify, you need help getting the javascript to work with your changes in markup in addition to getting a "current slide" arrow.
Take a look at the code here: http://jsfiddle.net/blineberry/SfJzv/
Make note of these changes:
In the HTML, I added the .navigation class to your #control element. This will help keep your markup working with the CodaSlider script.
In the javascript: on line 34 of the script (referencing this script: http://jqueryfordesigners.com/demo/coda-slider.js), changed .parents('ul:first') to .parents('.navigation:first'), and on line 53 changed $('ul.navigation a:first').click(); to $('div.navigation a:first').click();.
In the CSS I made some style declarations to override some of the stock CodaSlider CSS to work with your dimensions. You may or may not need this depending on your implementation.
Here's a full screen demo: http://jsfiddle.net/blineberry/SfJzv/embedded/result/