Good question!
You can take the demo 7 from the downloaded package, and make the following changes to the script code within the head section in page demo7.html.
There are two approaches to declare the slider's HTML markup.
1. If you declare the markup from an external file, say slider.xml with the following text:
<?xml version="1.0" encoding="utf-8" ?>
<div id="slider">
<a href="http://www.menucool.com/">
<img src="images/image-slider-1.jpg" />
</a>
<img src="images/image-slider-2.jpg" />
<img src="images/image-slider-3.jpg" alt="Pure Javascript." />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
Then you can update the script in page demo7.html as follows:
<script type="text/javascript">
var sliderMarkup = '';
function populateSlider() {
setSliderMarkup();
imageSlider.reload();
}
function setSliderMarkup() {
var sliderFrame = document.getElementById("sliderFrame");
sliderFrame.innerHTML = "";
sliderFrame.appendChild(getRandomizedSlider());
sliderFrame.innerHTML = sliderFrame.innerHTML;
}
function loadXMLString(txt) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "slider.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
return xmlDoc;
}
function getRandomizedSlider() {
var xmlDoc = loadXMLString(sliderMarkup);
var slider = xmlDoc.getElementById("slider");
var slides = slider.childNodes;
var arr = [];
for (var i = 0; i < slides.length; i++) {
arr.push(slides[i]);
}
var randomArr = shuffle(arr);
slider.innerHTML = "";
for (var i = 0; i < randomArr.length; i++) {
slider.appendChild(randomArr[i]);
}
return slider;
}
function shuffle(arr) {// Shuffle an array
for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i),
x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
populateSlider();
</script>
2. The second approach. If you specify the slider markup in a variable, then the script should be:
<script type="text/javascript">
var sliderMarkup = '<div id="slider"><a href="http://www.menucool.com/">'+
'<img src="images/image-slider-1.jpg" /></a>'+
'<img src="images/image-slider-2.jpg" />'+
'<img src="images/image-slider-3.jpg" alt="Pure JavaScript." />' +
'<img src="images/image-slider-4.jpg" alt="#htmlcaption" />'+
'<img src="images/image-slider-5.jpg" /></div>';
function populateSlider() {
setSliderMarkup();
imageSlider.reload();
}
function setSliderMarkup() {
var sliderFrame = document.getElementById("sliderFrame");
sliderFrame.innerHTML = "";
sliderFrame.appendChild(getRandomizedSlider());
sliderFrame.innerHTML = sliderFrame.innerHTML;
}
function loadXMLString(txt) {
if (window.DOMParser) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt, "text/xml");
}
else
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(txt);
}
return xmlDoc;
}
function getRandomizedSlider() {
var xmlDoc = loadXMLString(sliderMarkup);
var slider = xmlDoc.getElementById("slider");
var slides = slider.childNodes;
var arr = [];
for (var i = 0; i < slides.length; i++) {
arr.push(slides[i]);
}
var randomArr = shuffle(arr);
slider.innerHTML = "";
for (var i = 0; i < randomArr.length; i++) {
slider.appendChild(randomArr[i]);
}
return slider;
}
function shuffle(arr) {// Shuffle an array
for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i),
x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
populateSlider()
</script>