Lien vers balise div Slider jQuery

**Jarod51** · 01/04/2014, 18h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 02/04/2014, 19h04

Bonjour,
afin de ne pas avoir à reconstituer un exemple, une page test en ligne serait la bien venue!

Lien vers balise div Slider jQuery

HTML

Discussions similaires

Partager

Partager