---
title: "jQuery ersätta div med en slide"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/185859-jquery-ersätta-div-med-en-slide"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "silfver"
published: "2011-01-20T10:28:02.000Z"
updated: "2011-01-20T13:01:22.000Z"
replies: 3
views: 1448
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/185859-jquery-ersätta-div-med-en-slide"
---

# jQuery ersätta div med en slide

## #1 — silfver, 2011-01-20T10:28Z

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?

Bilagor:

- [slider.png](https://www.webforum.nu/a/22364.png)

Permalänk: https://www.webforum.nu/p/185859

## #2 — Nate.A, 2011-01-20T10:43Z

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/>

Permalänk: https://www.webforum.nu/p/2266624

## #3 — silfver, 2011-01-20T12:00Z

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.

Permalänk: https://www.webforum.nu/p/2266631

## #4 — silfver, 2011-01-20T13:01Z

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>
```

Permalänk: https://www.webforum.nu/p/2266633

---

Tråden på webben: https://www.webforum.nu/amne/javascript/185859-jquery-ersätta-div-med-en-slide