반응형좀 봐주세요
본문
현재
<li><div class="swiper-slide" style="background-image:url(./board/data/file/1111/<?=$img?>);"></div> </li>
이 부분이 문제인데 swiper-slide가 이미지를 슬라이딩되게하는 역할을 하는 건데 li로 감싸버리닌까 작동이안되더라고요 슬라이딩도 되고 반응형도 되게할려면 어떻게 짜야하나요?
.gallery-thumbs {
width:100%;
height:100%;
}
.gallery-thumbs * {Margin:0; padding:0;}
.gallery-thumbs ul{width:100%;}
.gallery-thumbs nav{width:100%;}
.gallery-thumbs li{
float:left;
width:100%;
height:100%;
height:100px;
box-sizing: border-box;
padding: 5px 1px;
}
@media screen and (max-width: 1680px) {
.gallery-thumbs li{
float:left;
width:100%;
height:100px;
box-sizing:border-box;
padding: 5px 1px;
}
}
@media screen and (max-width: 480px) {
.gallery-thumbs li{
float:left;
width:100%;
height:100px;
box-sizing:border-box;
padding: 5px 1px;
}
}
@media screen and (max-width: 280px) {
.gallery-thumbs li{
float:left;
width:100%;
height:100px;
box-sizing:border-box;
padding: 5px 1px;
}
}
<?
$path="./board/data/file/1111";
$entrys = array();
$dirs = dir($path);
while(false !== ($entry = $dirs->read())){
if(($entry != '.') && ($entry != '..')) {
if(!is_dir($path.'/'.$entry)) {
$entrys[] = $entry;
}
}
}
$dirs->close();
?>
<!-- Add Arrows -->
<!-- <div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div> -->
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<?
asort($entrys);
foreach (glob('data/file/1111/*') as $img)
if (strpos($img, 'thumb-') !== false) $files[] = $img;
foreach( $entrys as $img ) {
?>
<nav>
<ul>
<li><div class="swiper-slide" style="background-image:url(./board/data/file/1111/<?=$img?>);"></div> </li>
</ul>
</nav>
<?
}
?>
</div>
</div>
답변 1
자바스크립트쪽 수정봐야하지 않아요?
자바를 손바도 li가 감싸고 있으면 작동안되는거아닌가요?
<div class="swiper-slide"><li><div>style="background-image:url(./board/data/file/1111/<?=$img?>);"></div></li></div>
뭐 이런식으로 한다면 해야할거같은데 이런게하면 안되자나요
해결했어요^^;; 감사합니다
그냥 .gallery-thumbs 이걸로 반응형 했어요.. 왠지... 허술하게 한거같은데... 뭐 어쩌던
수고하십시요
아~ ㅋㅋㅋ 해결하셨나봐요~ 본업에 충실하다보니 이제야 봤어요 ㅋㅋㅋ
답변을 작성하시기 전에 로그인 해주세요.
