슬라이더 어떻게 만들죠..
본문
이렇게 버튼슬라이드를 만들고싶은데 감이안잡히네요 하..
<div class="all">
<?php
while($row=sql_fetch_array($in_plant)){
if($row['mb_id']==$member['mb_id']){
?>
<div class="all_wrap slide">
<div class="body_wrap">
<div class="body_top">
<button class="d_day">D-day</button>
<p style="font-weight:600; font-size:20px;">예상 수확일0000.00.00</p>
</div>
<div class="body_mid">
<button class="prev"><img src="../img/icon-back.png" width="40px" height="40px" /></button>
<img src="../img/<?php echo $row['p_thumbnail'] ?>" class="imgcenter" width="150px;" height="150px;" />
<button class="next"><img src="../img/icon-next.png" width="40px" height="40px" /></button>
</div>
<div class="chart_wrap">
<div class="body_bottom">
<div class="chart doughnut1"><span class="center">25</span><p class="bottom">온도</p></div>
<div class="chart doughnut2"><span class="center">25</span><p class="bottom">강수량</p></div>
<div class="chart doughnut3"><span class="center">25</span><p class="bottom">일조량</p></div>
</div>
</div>
<div class="bottom_solution">
<span><img src="../img/home1.png" width="20px"/> <t>솔루션</t></span>
<a>이전 솔루션 보기</a>
</div>
</div>
</div>
<?php
}
}
//css
.all{
white-space:nowrap;
overflow: hidden;
position: relative;
}
.all_wrap{
width: 100%;
display: inline-block;
vertical-align: middle;
}
이렇게 선언했는데 overflow:hidden으로 안보이게 만들었는데 어떻게 버튼이벤트를 줘야 다른게 나올까요?
답변 3
버튼누르면 뒤에 있는 그림포함된 레이어가
position absolute 상태에서 left, right로 무브~
// HTML
<div id="section">
<div class="slide-wr">
<div class="visual_slide">
<div class="slide_01 slide_bg"></div>
<div class="slide_02 slide_bg"></div>
<div class="slide_03 slide_bg"></div>
</div>
</div>
</div>
// CSS
#section {width:100%;height: calc(100vh - 207px);position:relative;overflow:hidden;margin:0 auto;} #section .slide-wr{width: 100%;height: 100%;} #section .visual_slide {width:100%;height: 100%;overflow:hidden;position:relative;} #section .visual_slide div {width:100%;float:left;height: 100%;} #section .visual_slide .slide_01{background: url('../img/main_banner.jpg') repeat-y right;background-size: cover;width: 100%;height: 100%;} #section .visual_slide .slide_02{background: url('../img/main_banner02.jpg') repeat-y right;background-size: cover;} /* #section .visual_slide .slide_03{background: url('../img/main_banner.jpg') repeat-y right;background-size: cover;} */ #section .visual_slide .slick-arrow{position:absolute;bottom:130px;width:142px;height:80px;z-index: 10;left: 20%;} #section .visual_slide .slick-arrow .prev{color:#fff;text-align: right;height: 100%;padding: 28px;font-size: 17px;} #section .visual_slide .slick-arrow .next{color:#fff;text-align: left;height: 100%;padding: 28px;font-size: 17px;} #section .visual_slide .slide-prev{background: url(../img/slick-prev.png) no-repeat 10% 50% rgba(0, 0, 0, 0.3);} #section .visual_slide .slide-next{left: calc(20% + 143px);background: url(../img/slick-next.png) no-repeat 89% 50% rgba(0, 0, 0, 0.3);}
//JS
JS는 아래분 말대로 Swiperjs 쓰시면 됩니다.
!-->!-->