antho07,
il y a 12 ans
Bonsoir,
possible css ou un lien si le site est visible en ligne??
Donc le sujet ne change je realise mon carrousel JQuery grace a ce tuto
Je suis arriver a la fin du tuto donc et le script est executer sans problemes. Le problemes viens plutot de petit bugs (2)
- A l'arriver sur la page le slide n'est pas afficher il faut cliquer d'abord sur 2 puis sur 1 pour l'afficher et a partir de la seconde "boucle", seul le 4 peut-etre afficher
- a chaque changement d'image pour une raison obscure le temps de defilement est "raccourci" et est tres rapidement tellement faible qu'on passe du 1 au 4 instantanement
Voici mon code
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta lang="fr-FR"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carrousel.js"></script>
<title>Cabillaud94 | Webmaster</title>
</head>
<body>
<div id="page-sup">
<!--NAME-->
<div id="name-sup">
<a href="index.php" title="Name">
- Cabillaud94 -
</a>
</div>
<!--MENU-->
<div id="menu-sup">
<ul>
<li title="Home"><a href="index.php">? Home ?</a></li>
<li title="Team"><a href="team.php">? Team ?</a></li>
<li title="Work"><a href="work.php">? Work ?</a></li>
<li title="Shop"><a href="shop.php">? Shop ?</a></li>
<li title="Contact"><a href="contact.php"> ? Contact ? </a></li>
</ul>
</div>
</div>
<div id="page-cen">
<div id="carrousel-cen">
<div id="slide1-cen" class="slide-cen">
<div class="visuel">
<img src="img/slide1.jpg"/>
</div>
<div class="titlecarrousel-cen">
Cabillaud94.com
</div>
</div>
<div id="slide2-cen" class="slide-cen">
<div class="visuel">
<img src="img/slide2.jpg"/>
</div>
<div class="titlecarrousel-cen">
Slide
</div>
</div>
<div id="slide3-cen" class="slide-cen">
<div class="visuel">
<img src="img/slide3.jpg"/>
</div>
<div class="titlecarrousel-cen">
Slide
</div>
</div>
<div id="slide4-cen" class="slide-cen">
<div class"visuel">
<img src="img/slide4.jpg"/>
</div>
<div class="titlecarrousel-cen">
Slide
</div>
</div>
<!--<div class="nav-cen">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>-->
</div>
</div>
<div id="page-bot"></div>
<div id="do-bot">
? I DO WEBSITE ?
</div>
<div id="whatido-bot">
<ul>
<li title="Design"><div class="whatidospace-bot"><a href="work.php">z</a></div><br/></li>
<li title="Technology"><div class="whatidospace-bot"><a href="work.php">H</a></div><br/></li>
<li title="Ergonomics"><div class="whatidospace-bot"><a href="work.php">-</a></div><br/></li>
<li title="Price"><div class="whatidospace-bot"><a href="work.php">:</a></div><br/></li>
<li title="Documentation"><div class="whatidospace-bot"><a href="work.php"></a></div><br/></li>
</ul>
</div>
<div id="whatidotext-bot">
<ul>
<li>- Design -<br/><p>All my sites are strictly unique, everyone has the latest fashion.</p></li>
<li>- Technology -<br/><p>I use the latest technology in website design.<br/>(HTML5/CSS3/PHP5)</p></li>
<li>- Erogonomics -<br/><p>All my sites are designed to be easy to be use for everyone.</p></li>
<li>- Price -<br/><p>I offer different packages to suit me every budget.<br/>Let's check in the Shop.</p></li>
<li>- Documentation -<br/><p>All my sites are provided with full documentation and quality</p></li>
</ul>
</div>
<div id="sceau-bot">
<a href="#" title="Cabillau94 Website">
MADE BY CABILLAUD94
</a>
</div>
</body>
</html>JS:
var carrousel = {
nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,
init : function(elem){
this.nbSlide = elem.find(".slide-cen").length;
//pagination
elem.append('<div class="nav-cen"></div>')
for(var i=1;i<=this.nbSlide;i++){
elem.find(".nav-cen").append("<ul><li>"+i+"</li></ul>")
}
elem.find(".nav-cen ul li").click(function(){ carrousel.gotoSlide($(this).text()); })
//init system carrousel
this.elem=elem;
elem.find(".slide-cen").hide();
elem.find(".slide-cen:first").show();
this.elemCurrent = elem.find(".slide-cen:first");
this.elem.find(".nav-cen ul li:first").addClass("active");
//init timer
carrousel.play();
//detect hover
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);
},
gotoSlide : function(num){
if(num==this.nbCurrent){window.clearInterval(carrousel.timer); return false;}
/*animation fadein/fadeout
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num+"-cen").fadeIn();*/
/*animation slide
var sens = 1;
if(num<this.nbCurrent){ sens = -1;}
var cssDeb = {"left" : sens*this.elem.width()};
var cssFin = {"left" : -sens*this.elem.width()};
this.elem.find("#slide"+num+"-cen").show().css(cssDeb);
this.elem.find("#slide"+num+"-cen").animate({"top":0,"left":0},500);
this.elemCurrent.animate(cssFin,500);
*/
/*animation*/
this.elemCurrent.find(".visuel").fadeOut();
this.elem.find("#slide"+num+"-cen").show();
this.elem.find("#slide"+num+"-cen .visuel").hide().fadeIn();
var titleheight = this.elemCurrent.find(".titlecarrousel-cen").height();
this.elemCurrent.find(".titlecarrousel-cen").animate({"bottom": -titleheight},500);
this.elem.find("#slide"+num+"-cen .titlecarrousel-cen").css("bottom",-titleheight).animate({"bottom": 0},500);
this.elem.find(".nav-cen ul li.active").removeClass("active");
this.elem.find(".nav-cen ul li:eq("+(num-1)+")").addClass("active");
this.nbCurrent = num;
this.elemCurrent = this.elem.find("#slide"+num+"-cen");
},
next : function(){
var num = this.nbCurrent+1;
if(num > this.nbSlide){
num = 1 ;
}
this.gotoSlide(num);
},
prev : function(){
var num = this.nbCurrent;
num--;
if(num < 1){
num = this.nbSlide;
}
this.gotoSlide(num);
},
stop : function(){
window.clearInterval(carrousel.timer);
},
play : function(){
window.clearInterval(carrousel.timer);
this.timer = window.setInterval("carrousel.next()",5000);
},
}
$(function(){
carrousel.init($("#carrousel-cen"));
});Merci de votre reponse
Si une autre source est necesaire n'hesitez pas
Cabillaud
6 réponses
Cabillaud,
il y a 12 ans
non le css est bon (je voit pas pourquoi le css fait buger le carrousel LOL)
antho07,
il y a 12 ans
Bonjour,
on s'est mal compris.
Je demandais le css pour voir en local ce qu'il se passe et debogguer, pour avoir un affichage identique au tiens, voir visuellement le soucis et investiguer.
antho07,
il y a 12 ans
Imaginer le script tourné pour essayer de comprendre de tête ce qu'il peut se passer prendra enormement de temps et risque en plus de faire des aller retours sur le forum inutiles parce que je pourrai pas tester dans ta situation ce que jaurais imaginer sans tester.
Cabillaud,
il y a 12 ans
Alors tiens
@font-face{
font-family: 'BebasNeue';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family:'Lobster';
src: url('fonts/Lobster_1_3.otf'),
url('fonts/Lobster_1.3.svg#webfont') format('svg');
}
@font-face{
font-family:'SketchIcons';
src: url('fonts/SketchIcons.ttf'),
url('fonts/SketchIcons.svg#webfont') format('svg');
}
body{
background-color: white;
padding: 0px;
margin: 0px;
font-family: sans-serif;
font-size: 22px;
text-indent: 0px;
}
/*PAGE SUP*/
#page-sup{
background-color: #E73E01;
height: 75px;
width: 100%;
position: absolute;
top: 0%;
}
/*NAME*/
#name-sup a{
text-decoration: none;
text-align: left;
font-size: 26px;
font-family: 'Lobster';
color: #fff;
position: absolute;
top:25%;
left: 3%;
}
/*MENU*/
#menu-sup{
padding: 0;
height: 48px;
width: 590px;
position: absolute;
right: 0%;
bottom:50%;
}
#menu-sup ul li{
list-style: none;
float: left;
}
#menu-sup ul li a{
height:50px;
width: 89px;
display: block;
text-decoration: none;
text-align: center;
font-size: 22px;
font-family: 'BebasNeue';
color: #FFF;
line-height: 50px;
background-color: #E73E01;
}
#menu-sup ul li a:hover{
background-color: #7A1F01;
text-decoration: underline;
}
/*PAGE CENTER*/
#page-cen{
background-color: #fff;
height: 430px;
width: 100%;
position: absolute;
top:75px;
}
/*CARROUSEL JS*/
#carrousel-cen{
position: relative;
left: 28%;
top:15%;
height: 264px;
width: 712px;
border: 5px #E73E01 solid;
overflow: hidden;
}
.slide-cen{
position: absolute;
top: 0;
left: 0;
height: 264px;
width: 712px;
}
.titlecarrousel-cen{
height: 30px;
width: 722px;
position: absolute;
bottom:-45px;
left:-5px;
background-color: #E73E01;
text-align: center;
font-family: 'BebasNeue';
font-size: 25px;
line-height: 30px;
color:#fff;
}
.nav-cen{
position: absolute;
bottom:0px;
margin-left: 0;
margin-right: 0;
height: 30px;
width: 200px;
}
.nav-cen ul li{
position: relative;
bottom:20px;
left: -40px;
list-style: none;
float: left;
height: 30px;
width: 25px;
display: block;
text-align: center;
font-size: 22px;
font-family: 'BebasNeue';
color: #FFF;
line-height: 30px;
background-color: #E73E01;
}
.nav-cen ul li:hover, .nav-cen ul li.active{
background-color: #7A1F01;
text-decoration: underline;
cursor: pointer;
}
/*PAGE BOTTOM*/
#page-bot{
background-color: #E73E01;
height: 375px;
width: 100%;
position: absolute;
bottom:0%;
padding: 0;
}
/*WHAT I DO*/
#do-bot{
position: absolute;
bottom: 32.5%;
height: 64px;
width: 100%;
text-align: center;
text-decoration: underline;
font-size: 65px;
font-family:'BebasNeue';
color:#FFF;
}
/*I DO IMAGE*/
#whatido-bot{
position: absolute;
bottom: 15%;
left:23.5%;
padding: 0;
height: 150px;
width: 925px;
}
#whatido-bot ul li{
list-style: none;
float: left;
}
#whatido-bot ul li .whatidospace-bot{
height: 150px;
width: 175px;
}
#whatido-bot ul li a{
height: 100px;
width: 100px;
background-color: #fff;
border-radius: 50 50 50 50px;
display: block;
text-align: center;
text-decoration: none;
font-size: 85px;
font-family: 'SketchIcons';
color: #E73E01;
line-height: 100px;
}
/*I DO TEXT*/
#whatidotext-bot{
position: absolute;
bottom: 12.5%;
left:21%;
padding: 0;
height: 64px;
width: 925px;
}
#whatidotext-bot ul li{
list-style: none;
float: left;
display: block;
height: 150px;
width: 175px;
text-align: center;
text-indent: 5px;
text-transform : capitalize;
text-decoration: none;
font-size: 22px;
font-family: 'Lobster';
color:#fff;
}
#whatidotext-bot ul li p{
font-size: 18px;
font-family: 'BebasNeue';
}
/*SCEAU*/
#sceau-bot{
position: absolute;
bottom: 1%;
left: 88.75%;
padding: 0;
height: 24px;
width: 170px;
}
#sceau-bot a{
display: block;
text-align: center;
text-transform : capitalize;
text-decoration: none;
font-size: 24px;
font-family: 'BebasNeue';
color:#fff;
}
}
Cabillaud,
il y a 12 ans
(c'est un vieux css je suis meilleur maintenant :P)