I'm adding a series of ResponsiveSlides to my portfolio site, and I'd like them to randomize their transition speed, so they each slide fades to the next at different intervals. I can change the speed to any fixed interval, but I don't know how to randomize it. Here's the site: jcwebandgraphic.com
And here's my code:
SCRIPT
<script>
// Slider Functions
$(function() {
$('.rslides').responsiveSlides({
speed: 1000,
timeout: 3000
});
})
</script>
HTML
<div id='slider'>
<ul class='rslides'>
<li><a href='audioinformationradio.com'><img src='images/air.jpg' alt='Professional Project: Audio Information Radio'></a></li>
<li><a href='danachapmanmassage.com'><img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/zavaah/'><img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/howto/'><img src='images/crash.jpg' alt='Student Project: A Crash Course in Chemistry'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/tools-for-ethical-decision-making/'><img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/placestory/'><img src='images/placestory.jpg' alt='Student Project: This is Me'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/blackbird/'><img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'></a></li>
</ul>
</div>
<div id='slider'>
<ul class='rslides'>
<li><a href='danachapmanmassage.com'><img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/zavaah/'><img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'></a>
</li>
<li><a href='http://dtc-wsuv.org/jcohen/howto/'><img src='images/crash.jpg' alt='Student Project: A Crash Course in Chemistry'></a>
</li>
<li><a href='http://dtc-wsuv.org/jcohen/tools-for-ethical-decision-making/'><img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/placestory/'><img src='images/placestory.jpg' alt='Student Project: This is Me'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/blackbird/'><img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'></a>
</li>
<li><a href='audioinformationradio.com'><img src='images/air.jpg' alt='Professional Project: Audio Information Radio'></a></li>
</ul>
</div>
<div id='slider'>
<ul class='rslides'>
<li><a href='http://dtc-wsuv.org/jcohen/zavaah/'><img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'></a>
</li>
<li><a href='http://dtc-wsuv.org/jcohen/howto/'><img src='images/crash.jpg' alt='Student Project: A Crash Course in Chemistry'></a>
</li>
<li><a href='http://dtc-wsuv.org/jcohen/tools-for-ethical-decision-making/'><img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/placestory/'><img src='images/placestory.jpg' alt='Student Project: This is Me'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/blackbird/'><img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'></a></li>
<li><a href='audioinformationradio.com'><img src='images/air.jpg' alt='Professional Project: Audio Information Radio'></a></li>
<li><a href='danachapmanmassage.com'><img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'></a></li>
</ul>
</div>
<div id='slider'>
<ul class='rslides'>
<li><a href='http://dtc-wsuv.org/jcohen/howto/'><img src='images/crash.jpg' alt='Student Project: A Crash Course in Chemistry'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/tools-for-ethical-decision-making/'><img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/placestory/'><img src='images/placestory.jpg' alt='Student Project: This is Me'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/blackbird/'><img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'></a></li>
<li><a href='audioinformationradio.com'><img src='images/air.jpg' alt='Professional Project: Audio Information Radio'></a></li>
<li><a href='danachapmanmassage.com'><img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/zavaah/'><img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'></a>
</li>
</ul>
<img id='frame' src='images/logo-1000.png'>
</div>
CSS
#slider {
width: 50%;
float: left;
}
.rslides {
width: 100%;
list-style: none;
overflow: hidden;
z-index: 5;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
left: 0;
top: 0;
list-style-type: none;
}
.rslides img {
width: 100%;
display: block;
float: left;
z-index: 1;
}
#frame {
width: 30%;
margin: 10% 35%;
position: absolute;
top: 0;
left: 0;
z-index: 50;
}
#frame img {
width: 100%;
}
