Bonjour,
je suis entrain de bidouiller un slider mis à dispo gratuitement : Modernizr
Le slider permet de d'afficher slide après slide : de la typo, des icones, etc... qui se resizent dynamiquement, le tout avec des transition sympas.
Le html indique quelle(s) classe(s) est/sont appelée(s) à chaque slide (icones, typo etc...)
Etrangement, par défaut il n'appelle pas d'image à proprement parlé.
J'ai donc crée une classe "img-diapo" qui charge une image jpg ou png dans mon slider lorsqu'elle est appelée dans le html.
Jusque là tout va bien.
En revanche lorsque j'appelle cette classe pour modifier la taille de l'image lorsque l'écran se réduit, ça ne marche pas
:
et je ne comprends pas ce qui cloche (bon, mes compétences sont très limitées, et je ne fais que bidouiller
...).
Je joins la feuille CSS, si quelqu'un peut éclairer ma lanterne ou me donner une piste afin que ça marche, j'en serai ravi !
D'avance merci et bonnes fêtes à tou(te)s !
je suis entrain de bidouiller un slider mis à dispo gratuitement : Modernizr
Le slider permet de d'afficher slide après slide : de la typo, des icones, etc... qui se resizent dynamiquement, le tout avec des transition sympas.
Le html indique quelle(s) classe(s) est/sont appelée(s) à chaque slide (icones, typo etc...)
Etrangement, par défaut il n'appelle pas d'image à proprement parlé.
J'ai donc crée une classe "img-diapo" qui charge une image jpg ou png dans mon slider lorsqu'elle est appelée dans le html.
Jusque là tout va bien.
En revanche lorsque j'appelle cette classe pour modifier la taille de l'image lorsque l'écran se réduit, ça ne marche pas
: .img-diapo:after {
width: 450px;
height: 250px;
}et je ne comprends pas ce qui cloche (bon, mes compétences sont très limitées, et je ne fais que bidouiller
...). Je joins la feuille CSS, si quelqu'un peut éclairer ma lanterne ou me donner une piste afin que ça marche, j'en serai ravi !
D'avance merci et bonnes fêtes à tou(te)s !
.demo-1 .sl-slider-wrapper {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* Custom navigation arrows */
.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150,150,150,0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-arrows span:hover {
border-color: rgba(150,150,150,0.9);
}
.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}
.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}
/* Custom navigation dots */
.nav-dots {
text-align: center;
position: absolute;
bottom: 2%;
height: 30px;
width: 100%;
left: 0;
z-index: 1000;
}
.nav-dots span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #ddd;
background: rgba(150,150,150,0.4);
cursor: pointer;
box-shadow:
0 1px 1px rgba(255,255,255,0.4),
inset 0 1px 1px rgba(0,0,0,0.1);
}
.nav-dots span.nav-dot-current:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 3px;
left: 3px;
border-radius: 50%;
background: rgba(255,255,255,0.8);
}
/* Content elements */
.demo-1 .img-diapo {
width: 1280px;
height: 720px;
border-radius: 50%;
position: relative;
top:10%;
bottom: 50%;
margin: auto;
}
.demo-1 .img-diapo:after {
width: 450px;
height: 200px;
border-radius: 50%;
position: relative;
top:10%;
bottom: 50%;
margin: auto;
}
.demo-1 .deco {
width: 260px;
height: 260px;
border: 2px dashed #ddd;
border: 2px dashed rgba(150,150,150,0.4);
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 0 -130px;
}
.demo-1 .sl-slide h2 {
color: #000;
text-shadow: 0 0 1px #000;
padding: 20px;
position: absolute;
font-size: 34px;
font-weight: 700;
letter-spacing: 13px;
text-transform: uppercase;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
bottom: 50%;
margin: 0 0 -120px 0;
}
.demo-1 .sl-slide blockquote {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 70px;
color: #8b8b8b;
z-index: 2;
bottom: 50%;
margin: 0 0 -200px 0;
padding: 0;
}
.demo-1 .sl-slide blockquote p{
margin: 0 auto;
width: 60%;
max-width: 400px;
position: relative;
}
.demo-1 .sl-slide blockquote p:before {
color: #f0f0f0;
color: rgba(244,244,244,0.65);
font-family: "Bookman Old Style", Bookman, Garamond, serif;
position: absolute;
line-height: 60px;
width: 75px;
height: 75px;
font-size: 200px;
z-index: -1;
left: -80px;
top: 35px;
content: '\201C';
}
.demo-1 .sl-slide blockquote cite {
font-size: 10px;
padding-top: 10px;
display: inline-block;
font-style: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
/* Custom background colors for slides in first demo */
/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
background: #fff;
}
.demo-1 .bg-1 img-diapo:after{
width:450px;
height: 250px;
}
/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
background: #000;
}
.demo-1 .bg-2 .img-diapo:after{
width:450px;
height: 250px;
}
.demo-1 .bg-2 h2 {
color: #fff;
}
.demo-1 .bg-2 blockquote:before {
color: #222;
}
/* Media Queries for custom slider */
@media screen and (max-device-width: 1280px), screen and (max-width: 1280px) {
.demo-1 .img-diapo:after {
width: 400px;
height: 250px;
margin: auto;
}
.demo-1 [data-icon]:after {
width: 110px;
height: 110px;
line-height: 110px;
font-size: 40px;
margin: -55px 0 0 -55px;
}
.demo-1 .img-diapo:after {
width: 450px;
height: 250px;
margin: -55px 0 0 -55px;
}
.demo-1 .sl-slide blockquote {
margin-bottom: -120px;
}
.demo-1 .sl-slide h2 {
height: 500px;
}
.demo-1 .sl-slide blockquote p:before {
line-height: 10px;
width: 40px;
height: 40px;
font-size: 120px;
left: -45px;
}
}
