bxslider 3개 반응형 가로배치 관련
본문
안녕하세요.
영카트5/에브리데이테마를 수정하여 홈페이지를 만들고 있습니다.
고급사용자도 아니었지만, 거의 10년을 놓고 있다가 다시 해볼려니 너무 힘이드네요.
아래 문의내용을 해결해 볼려고 이틀동안 sir 홈페이지, 유튜브, 구글 등을
검색하며 수도없이 시도해 봤지만 결국 해결이 안되었습니다.
고수분들의 도움이 필요합니다ㅠㅠ
조언 부탁드립니다.
<문의 내용>
메인화면에 bxslider 3개를 삽입하려고 하는데
bxslider 3개를 불러와서 작동이 되는 것까지는 확인했습니다.
(현재 PC, 모바일 모두 가로를 가득채운 bxslider가 1개씩 세로로 나열되고 있습니다.)
(css를 새로 만들어 아무리 만져도 저는 안되네요ㅠㅠ )
PC에서는 가로로 나란히 1줄로
모바일에서는 가로를 가득 채운채 3줄로
출력하고자 합니다.
** PC - 1행에 bxslider 3개 출력
** 모바일 - 3개의 행에 bxslider 1개씩 출력
구조는 다음과 같습니다.
<div id="sev02">
<h2>이벤트</h2>
<ul class="bx_01">
<li class="sev02_img"><a href="">이미지1</a></li>
<li class="sev02_img"><a href="">이미지2</a></li>
</ul>
<ul class="bx_02">
<li class="sev02_img"><a href="">이미지1</a></li>
<li class="sev02_img"><a href="">이미지2</a></li>
</ul>
<ul class="bx_03">
<li class="sev02_img"><a href="">이미지1</a></li>
<li class="sev02_img"><a href="">이미지2</a></li>
</ul>
</div>
-------------------------------------------------------------------
<스크립트 아래처럼 3개 반복>
<script>
$(document).ready(function(){
$('.bx_01').bxSlider({
mode:'vertical', //horizontal', 'vertical', 'fade'
speed:300,
pager:false,
controls:false,
auto:true,
responsive:true,
//slideWidth:1200,
//slideMargin:0,
});
});
</script>
답변 3
ul li 자체에 css가 적용되었을수있으니 33.3을 20정도로 줄여서 보시고 가로 정렬이 되신다면 스타일에서 찾아가면서 수정하시기바랍니다
신경 써주셔서 감사합니다ㅠㅠ
css를 만지면서 많이 수정해보고 실패를 했어서 위의 구조 외에는 아무런 css를 주지 않았습니다.
비율 조정을 해도 그대로 입니다.
비율을 극단적으로 줄여도 가로배치 자체가 안되네요.
bxslider 자체적으로 만들어내는 것들 때문인지 도무지 가로배치 말을 안듣네요ㅠㅠ
감사합니다.
아주 최상위에서 div {display:block 이 되어 있었네요.
우선 미디어쿼리로 inline-block 을 주어 가로배열에 성공했습니다.
아 ㅠㅠ
감사합니다.
추가적으로 wrapperClass 값을 주어 bxslider의 기본 css가 반영되지 않도록 했습니다.
안녕하세요.
답변 감사합니다.
답변 주신 것은 1개의 슬라이더에서 이미지를 멀티로 보여주는데 참고가 될 것 같습니다.
지금 제가 의도하는 것은 슬라이더 3개중 1개의 mode ('horizontal', 'vertical', 'fade')가 달라서 멀티슬라이더로는 해결이 안될 것 같습니다.
미디어 쿼리쓰시지요~
<style>
.bx_01, .bx_02, .bx_03 { width:33.3%;float:left; }
@media screen and (max-width:640px){
.bx_01, .bx_02, .bx_03 { width:100% }
}
</style>
안녕하세요.
답변 감사합니다.
미디어쿼리로도 시도해 봤지만 이상하게 bxslider는 div하나에 3개 배치가 안되네요 ㅠㅠ
예제 주신대로 미디어쿼리를 적용하면
-----------------------------------------
bx_01 l 공백
bx_02 l 공백
bx_03 l 공백
이렇게 상위 DIV의 넓이의 50%를 차지하며 PC에서 세로로 정렬이 됩니다.
(상위 div에는 아무런 css를 주지 않았습니다.)
