santé mentale emplois nyc https://pilulesfrance.com/dysfonction-erectile/cialis-sur-internet/ où puis-je acheter des pilules abortives

Slider en CSS3 uniquement

Ce slider est uniquement fait en CSS/HTML et sans javascript. Cela est possible grâce aux animations CSS et à la pseudo-class :target

Démo simple

Le code HTML

Pour permettre le slide entre les images (ou les pages si on veut), on utilise bien la transition en CSS3 mais également la pseudo-class :target pour demander à notre ID de faire le transition

    <html>         <head>             ...         </head>         <body>             <div class="wrapper">                 <h1>Slider en pure CSS3</h1>                 <div id="article1">                     <div id="article2">                         <div id="article3">                             <div id="article4">                                 <div class="sliderContainer">                                     <div class="content">                                         <div class="item"><img src="http://localhost/monsite/application/images/slideshow/1.jpg" alt="1"/>                                         </div>                                         <div class="item"><img src="http://localhost/monsite/application/images/slideshow/2.jpg" alt="2"/>                                         </div>                                         <div class="item"><img src="http://localhost/monsite/application/images/slideshow/3.jpg" alt="3"/>                                         </div>                                         <div class="item"><img src="http://localhost/monsite/application/images/slideshow/4.jpg" alt="4"/>                                         </div>                                     </div>                                 </div>                                 <a href="#article4">4</a>                             </div>                             <a href="#article3">3</a>                         </div>                         <a href="#article2">2</a>                     </div>                     <a href="#article1">1</a>                 </div>             </div>         </body>     </html>

Les "a" sont à l'interieur de chaque "div" afin de permettre de donner un état au "a" quand il est la page courante

Le code CSS

body{     background:#111;     color:#fff;     font-family:Arial, verdana;     font-size:14px; } .wrapper{     margin:20px auto;     width:350px;     text-align:center; } .content{     position:absolute;     background:#fff;     top:0px;     left:-10px;     height:200px;     width:1200px;     -webkit-transition:all 1s ease;     -moz-transition:all 1s ease;     -o-transition:all 1s ease;     transition:all 1s ease;     clear:both; } .item{     float:left;     width:300px;     height:200px;     position:relative; } #article1, #article2, #article3, #article4{     overflow:hidden;     background:transparent;     width:300px;     height:250px;     margin:0 auto;     position:relative; } #article1:target .content{     left:-10px; } .sliderContainer{     position:relative;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 10px;     border:10px solid #fff;     height:190px;     width:280px;     overflow:hidden; } #article2:target .content, #article3:target .content, #article4:target .content{     -webkit-transform: translate(-300px, 0px);     -moz-transform: translate(-300px, 0px);     -o-transform: translate(-300px, 0px);     -ms-transform: translate(-300px, 0px);     transform: translate(-300px, 0px); } #article3:target .content{     -webkit-transform: translate(-600px, 0px);     -moz-transform: translate(-600px, 0px);     -o-transform: translate(-600px, 0px);     -ms-transform: translate(-600px, 0px);     transform: translate(-600px, 0px); } #article4:target .content{     -webkit-transform: translate(-900px, 0px);     -moz-transform: translate(-900px, 0px);     -o-transform: translate(-900px, 0px);     -ms-transform: translate(-900px, 0px);     transform: translate(-900px, 0px); } a{     margin: auto 10px;     color:#fff;     text-decoration: none;     text-indent:-5000px;     background:#fff;     width:38px;     height:18px;     padding:8px;     padding-top:0px;     -moz-border-radius: 50%;     -webkit-border-radius: 390px;     border-radius: 390px; } #article4 a,#article3 a, #article2 a, #article1 a{     width:22px;     height:15px;     padding:8px 0;     padding-top:0px;     -moz-border-radius: 50%;     -webkit-border-radius: 390px;     border-radius: 390px;     position:absolute;     bottom:10px;     left:55px; } #article2 a{     position:absolute;     bottom:10px;     left:105px; } #article3 a{     position:absolute;     bottom:10px;     left:155px; } #article4 a{     position:absolute;     bottom:10px;     left:205px; } #article1:target> a, #article2:target> a, #article3:target> a, #article4:target> a{     background:#999;     color:#999; } a:hover{     background:#0077ff;     color:#0077ff; } .item img{     margin:auto;     margin-top:22px;     width:200px;     height:150px; }

Une variante avec un zoom en plus

Le principe reste exactement le meme mais sur une autre div.

retourner en haut de la page