묻고답하기
제이커리 메인 슬라이더 질문
2014.12.28 12:43
http://lifeto.cafe24.com/xe/test
제이커리 슬라이더를 사용하고 있는데 다음과 같은 형식을 취합니다.
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item"><img src="/layouts/Ultimate/img/slide_1.jpg"><div class="box" style="background-color: #1abc9c;"></div></li>
<li class="slider__item"><img src="/layouts/Ultimate/img/slide_1.jpg"><div class="box" style="background-color: #16a085;"></div></li>
<li class="slider__item"><img src="/layouts/Ultimate/img/slide_1.jpg"><div class="box" style="background-color: #f1c40f;"></div></li>
<li class="slider__item"><img src="/layouts/Ultimate/img/slide_1.jpg"><div class="box" style="background-color: #f39c12;"></div></li>
<li class="slider__item"><img src="/layouts/Ultimate/img/slide_1.jpg"><div class="box" style="background-color: #d35400;"></div></li>
<li class="slider__item"><img src="/layouts/Ultimate/img/slide_1.jpg"><div class="box" style="background-color: #c0392b;"></div></li>
</ul>
</div>
여기서 <img> 태그를 없애고 <div> 에다가 배경색만 주고싶은데, 그렇게 할경우 웹사이트에서 아예 슬라이더자체가 사라집니다.
.box {
width: 100%;
height: 100%;
}
를 줘도 소용이없네요.
도움 부탁드립니다.
슬라이드 소스라는게 다양합니다.
높이를 js에서 고정할 수 있는 슬라이드도 있고 감싸는 div에 높이를 잡는 슬라이드도 있고 이미지의 사이즈를 가변형으로 처리할때 이미지 높이에 맞게 잡히는 슬라이드도 있습니다.
원하시는게 일정한 고정 높이를 가지면서 div 기준으로 돌아가는 슬라이드를 원하시면 그걸 찾으셔서 사용하셔야 합니다.
구글링 하시면 많은 슬라이드 들이 나옵니다.