Javascript Image Slider / Posts /

How to start random slide ?

139
On every page load I want to start a random slide instead of displaying sliders in an order.

I am using this: http://www.menucool.com/video-slider (Demo 6)

Please HELP
Lee  11 years ago   viewed: 29424    

7 Answers

3
Since version v2013.11.22, you can set the startSlide option as "shuffle", "random" or any index number in the js-image-slider.js. Now everything is managed by the build-in function.
Milo   10 years ago
1
Hi Milo,

Thanks for the reply, the doctype is as you have stated and the slider works correctly on its own, this is my code,
<div id="sliderFrame">
<div id="slider">
<img src="Assets/Images/Hero Images/800x300_Test.jpg" alt="Test1"/>
<img src="Assets/Images/Hero Images/800x300_Test2.jpg" alt="Test2"/>
<img src="Assets/Images/Hero Images/800x300_Test3.jpg" alt="Test3"/>
</div>
</div>
<p>How can we help you?</p>
</div>
Im working on an internal website so i cant give you access i'm afraid, i think i'm probably applying it incorrectly, can you give me some pointers at to where it should go?
Joe Wells   10 years ago
2
Can you create a simple testing page (with only the slider and related files) and zip it to me (johnwcb1@gmail.com)?
Milo   10 years ago
-2
Hi Milo,
I've emailed you over a stripped down version of my page, 
Thank you for your help, i really appreciate it
Joe Wells   10 years ago
-2
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>


Milo   11 years ago
0

Is there any chance you can expand on this answer a little bit, im having trouble getting it to work, i guess im just using it wrong.

 

In IE i get  a script error, it complains about the line : var slider = xmlDoc.getElementById("slider");

Error Message:

Object doesn't support this property or method

im using method 2 and have pased the script directly in to the body underneith where i have placed the slider, is this correct?

Joe Wells   10 years ago
0
Have you declared <!DOCTYPE html> at the top of your page? IE will get errors without it.
If you have, you can post your page URL here so that I can take a look.
Milo   10 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: