Slider mit einem Bild ein Bild

Question

Hallo Community Ich bin mit meinem Schieberegler und zwei Bild auf Position absolut/relativ gesperrt? Ich benutze bxslider

Können Sie mir bitte helfen?

Dies ist der Link http://pier17.fr/beta-sanem/nos-realisations.html

Das ist mein HTML-Code ist:

   <div id="slider-realisations"> 
        <ul class="bxslider"> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
        </ul> 
       </div> 

Und das ist mein CSS:

#slider-realisations .bxslider { 
    text-align: center; 
} 
#slider-realisations .bxslider img { 
    width: auto; 
} 
#slider-realisation { 
    position: relative; 
} 
#slider-realisations .slide-bloc { 
    position: relative; 
} 
#slider-realisations .bxslider img.contour { 
    position: relative; 
    width: 100%; 
    margin-left: 27px; 
} 
#slider-realisations .bxslider img.slide-maison { 
    width: 913px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-right: 16px; 
    padding-top: 105px; 
} 

Wenn eine Person eine Lösung haben, ich bin bereit .

Vielen Dank

Answer 1

Problem gelöst:

FÜR DIE CSS:

#slider-realisations { 
     position: relative; 
     overflow: hidden; 
    } 
    #slider-realisations .realisations img { 
     width: 100%; 
    } 
    #slider-realisations .realisations img.contour { 
     position: relative; 
     z-index: 10; 
     width: 100%; 
     height: auto; 
    } 
    #slider-realisations .realisations img.slide-maison { 
     position: absolute; 
     z-index: 5; 
     top: 0%; 
     max-width: 100%; 
     padding-right: 155px; 
     padding-top: 107px; 
     padding-left: 90px; 
    } 

FÜR DIE HTML:

Answer 2

Das Problem Ihr CSS ist. Sie müssen die Eltern machen in relativ

.slide-bloc { 
    position: relative; 
} 

und Ihre Kinder machen in absoluten

img.contour { 
    position: absolute; 
}