하나의 이미지가있는 슬라이더

Question

안녕하세요. 커뮤니티 내 슬라이더와 절대/상대 위치의 두 이미지로 잠겨 있습니다. bxslider를 사용합니다

제발 도와 줄 수 있습니까?

이

이 내 코드 HTML입니다 링크 http://pier17.fr/beta-sanem/nos-realisations.html

입니다 :

   <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> 

그리고 이것은 내 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; 
} 

, 난 준비 됐어 .

고맙습니다.

Answer 1

문제에 자녀를해야합니다 : CSS를위한

다음 HTML에 대한

#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; 
    } 

:

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

Answer 2

문제는 CSS입니다. 당신은 상대

.slide-bloc { 
    position: relative; 
} 

에 부모를 확인하고 해결 절대

img.contour { 
    position: absolute; 
}