Bonjour à tous,
Tout nouveau sur le forum alsacreations, j'ai décidé de poster un problème en espérant avoir un peu d'aide
. Je suis en train de découvrir le jquery slider parallax. J'ai choisi de travailler avec le sequencejs, je ne sais pas si c'est le meilleur mais les transitions sont sympas . (http://www.sequencejs.com/ )
Dans le modèle proposé, j'ai voulu rajouter un menu qui amène soit au slide1 soit au slide2 en fonction du lien où l'on clique depuis le menu. 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 depuis que j'ai rajouté ces balises div id="slider". Avez vous une idée de comment je dois m'y prendre ?
Je mets le code source ci-dessous je pense que ça serra plus parlant.
Tout nouveau sur le forum alsacreations, j'ai décidé de poster un problème en espérant avoir un peu d'aide
. Je suis en train de découvrir le jquery slider parallax. J'ai choisi de travailler avec le sequencejs, je ne sais pas si c'est le meilleur mais les transitions sont sympas . (http://www.sequencejs.com/ )Dans le modèle proposé, j'ai voulu rajouter un menu qui amène soit au slide1 soit au slide2 en fonction du lien où l'on clique depuis le menu. 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 depuis que j'ai rajouté ces balises div id="slider". Avez vous une idée de comment je dois m'y prendre ?
Je mets le code source ci-dessous je pense que ça serra plus parlant.
<!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">slide3</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>