Lien vers balise div Slider jQuery

Bonjour à tous,

Je suis en train de découvrir le jquery slider parallax. J'ai choisi de travailler avec le http://www.sequencejs.com/

Dans le modèle, j'ai voulu rajouter un menu qui amène soit au slide1 soit au slide2 en fonction du lien où l'on clique. J'ai donc rajouté une balise <nav> pour délimiter mon menu avec les href puis les balises div id entre les différents slides. Mon problème c'est que: les liens du menu ne marchent pas et les transitions ne marchent plus non plus dès lors que je rajoute les balises div entre les slides. Avez vous une idée de comment je dois m'y prendre :(?

Je mets le code source ci-dessous ça sera plus parlant ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <title>Sequence Theme Demo - Sliding Horizontal Parallax</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs-theme.sliding-horizontal-parallax.css" />
    <link href="http://fonts.googleapis.com/css?family=Play:400,700" rel="stylesheet" type="text/css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        if(typeof jQuery == 'undefined'){
            document.write(unescape('%3Cscript src="../../scripts/jquery-min.js" %3E%3C/script%3E'));
        }
    </script>
    <script src="../../scripts/jquery.sequence-min.js"></script>
    <script src="sequencejs-options.sliding-horizontal-parallax.js"></script>
</head>
<body>
    <!--test menu-->
    <nav>
        <ul>
            <li><a href="#slide1">slide1</a></li>
            <li><a href="#slide2">slide2</a></li>
            <li><a href="#slide3">slide2</a></li>
            <!--<li><a href="#slide4">slide4</a></li>-->
        </ul>
    </nav>
    <!--fin test-->
    <div id="sequence">
        <img class="sequence-prev" src="images/bt-prev.png" alt="Previous" />
        <img class="sequence-next" src="images/bt-next.png" alt="Next" />
        <ul class="sequence-canvas">
            <li class="animate-in">
                <div id="slide1">
                    <div class="info">
                        <h2>Built using Sequence.js</h2>
 
                        <p>The Responsive Slider with Advanced CSS3 Transitions</p>
                    </div>
                    <img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
                    <img class="balloon" src="images/balloon.png" alt="Balloon" />
                </div>
            </li>
            <li>
                <div id="slide2">
                    <div class="info">
                        <h2>Creative Control</h2>
 
                        <p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
                    </div>
                    <img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
                    <img class="aeroplane" src="images/aeroplane.png" alt="Aeroplane" />
                </div>
            </li>
            <li>
                <div id="slide3">
                    <div class="info">
                        <h2>Cutting Edge</h2>
 
                        <p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
                    </div>
                    <img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
                    <img class="kite" src="images/kite.png" alt="Kite" />
                </div>
            </li>
        </ul>
    </div>
</body>
</html>