3 svar · 1 444 visningar · startad av silfver
Jag har googlat sönder efter någon form av slider tutorial. Se bild vad jag är ute efter.
Jag ska göra en liten steg-guide. När man fyllt i lite uppgifter i steg 1 så ska man gå vidare till steg två. Och då vill jag bara byta aktiv div, kanske med animate() eller liknande. Så att div 2 ersätter 1 med nån övergång.
Förstår ni vad jag menar? Nån som vet en bra och enkel tutorial man kan följa?
Här är en tutorial för en slider/bildspel men man borde kunna fylla den med vad som helst. Just den här är automatisk med timer men det borde inte vara svårt att göra om till en click event.
http://net.tutsplus.com/articles/news/how-to-build-a-simple-content-slider-jquery-plugin/
Mja. Lite väl knepigt för mig kanske. Hittade en fransk ihopsnickrad variant men det är svårt med de här egenkodade varianterna där man ska behöva ändra precis allt.
En kollega löste det snyggt åt mig.
<script type="text/javascript">
$(document).ready(function() {
$('div.btn1')
.click(function() {
$('div.slidingdiv').animate({
left: '0px'
}, 500, function() {
// klar
});
});
$('div.btn2')
.click(function() {
$('div.slidingdiv').animate({
left: '-200px'
}, 500, function() {
// klar
});
});
$('div.btn3')
.click(function() {
$('div.slidingdiv').animate({
left: '-400px'
}, 500, function() {
// klar
});
});
});
</script>
<div>
<div class="btn1" style="float: left; margin-right:10px;">
Steg 1</div>
<div class="btn2" style="float: left; margin-right:10px;">
Steg 2</div>
<div class="btn3" style="float: left; margin-right:10px;">
Steg 3</div>
</div
<div style="overflow: hidden; height: 50px; width: 200px;">
<div class="slidingdiv" style="position: relative; width: 600px;">
<div id="div1" style="height: 50px; width: 200px; float: left; background-color:Aqua;">
<p>Div 1</p>
<div class="btn2" style="float: right;margin-right:10px;">Gå till steg 2</div>
</div>
<div id="div2" style="height: 50px; width: 200px; float: left; background-color:Fuchsia;">
<p>Div 2</p>
<div class="btn1" style="float: left;margin-right:10px;">Gå till steg 1</div>
<div class="btn3" style="float: right;margin-right:10px;">Gå till steg 3</div>
</div>
<div id="div3" style="height: 50px; width: 200px; float: left; background-color:Lime">
<p>Div 3</p>
<div class="btn2" style="float: left;margin-right:10px;">Gå till steg 2</div>
</div>
</div>
</div>