slick 플러그인을 이용한 썸네일 슬라이드
본문
안녕하세요! 우선 초보인지라 빌더를 사용하고 있는데요 (이윰빌더)
썸네일형으로 배너를 만들어서 이걸 tail에 넣었습니다.
필요한 플러그인 들은 포함 한것 같은데요. 기본적으로 스킨의(slide_gallery스킨) 상단에
<?php
/**
* skin file : /theme/THEME_NAME/skin/eblatest/slide_gallery/eblatest.skin.html.php
*/
if (!defined('_EYOOM_')) exit;
add_stylesheet('<link rel="stylesheet" href="'.EYOOM_THEME_URL.'/plugins/slick/slick.min.css" type="text/css" media="screen">',0);
?>
상단에 slick.min.css를 포함하고 있습니다.
cdn방식이 아니라 내부 plugins 폴더에 slick이 있구요.
현재 배너는 작동은 하지만 전체화면에 가로로 10개의 배너가 나열되어 있습니다.
그런데 이 10개가 한번에 다 움직여요. 10개중에 하나씩 하나씩 왼쪽으로 이동하고 싶은데요... 어떻게 해야 할지 세심히 알려 주시면 감사 하겠습니다 ㅜ.ㅜ 다른 그누 스킨을 받아서 보았을때 for 문으로 되어 있어서
제가 foreach 문과 배열에 관해서 잘 몰아서요. 설명과 함께 해주시면 감사 하겠습니다.
저는 아랫 부분은 코딩을 할수 없어서 공부중이긴 한데요. 다음과 같이 썸네일 추출 부분과 slick 스크립트 부분은 되어 있습니다.
<div class="slidegallery-latest">
<div class="slidetab-content">
<?php if (is_array($el_item)) { foreach ($el_item as $k => $eb_latest) { ?>
<div class="tab-pane <?php echo ($k==0) ? 'active': ''; ?> in" id="gallery-tlb-<?php echo $el_master['el_code']; ?>-<?php echo ($k+1); ?>">
<?php if (count((array)$eb_latest['list']) > 0) { foreach ($eb_latest['list'] as $data) { ?>
<div class="slidegallery-item">
<div class="slidegallery-img">
<a href="<?php echo $data['wr_link1']; ?>" target="_blank">
<div class="img-box">
<?php if ($data['wr_image']) { ?>
<img class="img-fluid" src="<?php echo $data['wr_image']; ?>" alt="">
<?php if ($data['is_video']) { ?><span class="video-icon"><i class="far fa-play-circle"></i></span><?php } ?>
<?php } else { ?>
<span class="no-image">No Image</span>
<?php } ?>
</div>
</a>
</div>
</div>
<?php }} else { ?>
<p class="text-center text-gray m-t-30 m-b-30"><i class="fas fa-exclamation-circle"></i> 최신글이 없습니다.</p>
<?php } ?>
</div>
<div class="clearfix"></div>
<?php }} ?>
<?php if ($el_default) { ?>
<div class="tab-pane active in" id="gallery-tlb-<?php echo time(); ?>-1">
<div class="row">
<div class="col-sm-12">
<ul class="list-unstyled">
<li class="no-latest"><p class="text-center text-gray m-t-30 m-b-30"><i class="fas fa-exclamation-circle"></i> 최신글이 없습니다.</p></li>
</ul>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/slick/slick.min.js"></script>
<script type="text/javascript">
$('.slidetab-content').slick({
slidesToShow: 1,
slidesToScroll: 2,
autoplay: true,
infinite: true,
speed: 7000,
pauseOnHover : true,
autoplaySpeed: 2000,
});
</script>
아래는 닫음
<?php } ?>
이상입니다. slick이 작동하게끔 한것은 보시다 시피 slidetab-content 부분입니다. 고수분들의 세심한 조언 부탁 드립니다 ㅜ.ㅜ 몇일째 공부중인데 잘 모르겠습니다.
답변 3
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/slick/slick.min.js"></script>
위의 소스는 한번만 불러오면 되는거라.. 위에 따로 하구요..
foreach 문 안으로 slidetab-content 클래스를 옮겨서 이름을 다르게 설정해줍니다.
slidetab-content 이름을 다르게해서 불어와야해서.. echo $k 를 해주면 됩니다.
제가 테스트해보지 않아서 소스에 오류는 없는지 모르겠네요.
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/slick/slick.min.js"></script>
<div class="slidegallery-latest">
<?php if (is_array($el_item)) { foreach ($el_item as $k => $eb_latest) { ?>
<div class="slidetab-content<?php echo $k?>">
<div class="tab-pane <?php echo ($k==0) ? 'active': ''; ?> in" id="gallery-tlb-<?php echo $el_master['el_code']; ?>-<?php echo ($k+1); ?>">
<?php if (count((array)$eb_latest['list']) > 0) { foreach ($eb_latest['list'] as $data) { ?>
<div class="slidegallery-item">
<div class="slidegallery-img">
<a href="<?php echo $data['wr_link1']; ?>" target="_blank">
<div class="img-box">
<?php if ($data['wr_image']) { ?>
<img class="img-fluid" src="<?php echo $data['wr_image']; ?>" alt="">
<?php if ($data['is_video']) { ?><span class="video-icon"><i class="far fa-play-circle"></i></span><?php } ?>
<?php } else { ?>
<span class="no-image">No Image</span>
<?php } ?>
</div>
</a>
</div>
</div>
<?php }} else { ?>
<p class="text-center text-gray m-t-30 m-b-30"><i class="fas fa-exclamation-circle"></i> 최신글이 없습니다.</p>
<?php } ?>
</div>
</div>
<div class="clearfix"></div>
<script type="text/javascript">
$('.slidetab-content<?php echo $k?>').slick({
slidesToShow: 1,
slidesToScroll: 2,
autoplay: true,
infinite: true,
speed: 7000,
pauseOnHover : true,
autoplaySpeed: 2000,
});
</script>
<?php }} ?>
<?php if ($el_default) { ?>
<div class="tab-pane active in" id="gallery-tlb-<?php echo time(); ?>-1">
<div class="row">
<div class="col-sm-12">
<ul class="list-unstyled">
<li class="no-latest"><p class="text-center text-gray m-t-30 m-b-30"><i class="fas fa-exclamation-circle"></i> 최신글이 없습니다.</p></li>
</ul>
</div>
</div>
</div>
<?php } ?>
</div>
정말 새심한 답변 너무 너무 감사 드립니다. 말씀 하시는데로 하면서 공부를 더 하게 되네요.
적용을 해보았는데 작동을 하지 않네요 ㅜ.ㅜ; 아래 다시 적용한 eblatest.skin.html.php 띄워 보겠습니다.
<div class="slidetab-content<?php echo $k?>">
이 부분은 원래대로 되돌리고..
<div class="slidetab-content">
$('.slidetab-content<?php echo $k?>').slick({
이 부분을 수정해보세요..
$('#gallery-tlb-<?php echo $el_master['el_code']; ?>-<?php echo ($k+1); ?>').slick({
아래 적어주신 코드대로 하니까 귀신같이 잘 작동하네요!! 바쁘신 와중인데도 이렇게 세심하게
답변 해주시어서 정말 너무 너무 감사 드립니다. ^^ 최고입니다.
덕분에 몇일 고민한게 해결은 되었는데요. 적어주신 코드에 대해서는 보면서 더 공부 할 생각입니다.
따봉~!
<?php
/**
* skin file : /theme/THEME_NAME/skin/eblatest/slide_gallery/eblatest.skin.html.php
*/
if (!defined('_EYOOM_')) exit;
add_stylesheet('<link rel="stylesheet" href="'.EYOOM_THEME_URL.'/plugins/slick/slick.css" type="text/css" media="screen">',0);
add_stylesheet('<link rel="stylesheet" href="'.EYOOM_THEME_URL.'/plugins/slick/slick.min.css" type="text/css" media="screen">',0);
add_stylesheet('<link rel="stylesheet" href="'.EYOOM_THEME_URL.'/plugins/slick/slick-theme.css" type="text/css" media="screen">',0);
?>
<?php if ($is_admin == 'super' && !G5_IS_MOBILE) { ?>
<div class="position-relative <?php if ($el_master['el_state'] == '2') { ?>eb-hidden-space<?php } ?>">
<div class="adm-edit-btn btn-edit-mode" style="top:0;text-align:right">
<div class="btn-group">
<a href="<?php echo G5_ADMIN_URL; ?>/?dir=theme&pid=eblatest_form&thema=<?php echo $theme; ?>&el_code=<?php echo $el_master['el_code']; ?>&w=u&wmode=1" onclick="eb_admset_modal(this.href); return false;" class="ae-btn-l"><i class="far fa-edit"></i> EB최신글 마스터 설정</a>
<a href="<?php echo G5_ADMIN_URL; ?>/?dir=theme&pid=eblatest_form&thema=<?php echo $theme; ?>&el_code=<?php echo $el_master['el_code']; ?>&w=u" target="_blank" class="ae-btn-r" title="새창 열기">
<i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</div>
<?php } ?>
<?php if (isset($el_master) && $el_master['el_state'] == '1') { // 보이기 상태에서만 출력 ?>
<style>
.slidegallery-latest {font-size:.9375rem}
.slidegallery-item {position:relative;width:10%;padding-left:1px;padding-right:1px;float:left}
.slidegallery-latest .slidegallery-img {position:relative;overflow:hidden;height:50px;margin:3px 10px}
.slidegallery-latest .img-box {position:relative;overflow:hidden;width:150px;height:50px;background:#e5e5e5}
.slidegallery-latest .img-box:before {content:"";display:block;padding-top:55%}
.slidegallery-latest .img-box img {position:absolute;top:0;left:0;right:0;bottom:0}
.slidegallery-latest .img-box .no-image {position:absolute;top:50%;left:0;width:100%;text-align:center;margin-bottom:0;margin-top:-8px;color:#959595;font-size:.8125rem}
.slidegallery-latest .img-bo-subj {position:absolute;top:5px;left:5px;display:inline-block;padding:3px 3px;font-size:.8125rem;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;background:#252525}
.slidegallery-latest .img-box .video-icon {position:absolute;top:50%;left:50%;color:#fff;width:40px;height:40px;line-height:40px;margin-top:-20px;margin-left:-20px;text-align:center;font-size:30px}
@media (max-width:1199px) {
.gallery-item {width:33.33333%}
}
@media (max-width:767px) {
.gallery-item {width:50%}
}
</style>
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/slick/slick.min.js"></script>
<div class="slidegallery-latest">
<?php if (is_array($el_item)) { foreach ($el_item as $k => $eb_latest) { ?>
<div class="slidetab-content<?php echo $k?>">
<div class="tab-pane <?php echo ($k==0) ? 'active': ''; ?> in" id="gallery-tlb-<?php echo $el_master['el_code']; ?>-<?php echo ($k+1); ?>">
<?php if (count((array)$eb_latest['list']) > 0) { foreach ($eb_latest['list'] as $data) { ?>
<div class="slidegallery-item">
<div class="slidegallery-img">
<a href="<?php echo $data['wr_link1']; ?>" target="_blank">
<div class="img-box">
<?php if ($data['wr_image']) { ?>
<img class="img-fluid" src="<?php echo $data['wr_image']; ?>" alt="">
<?php if ($data['is_video']) { ?><span class="video-icon"><i class="far fa-play-circle"></i></span><?php } ?>
<?php } else { ?>
<span class="no-image">No Image</span>
<?php } ?>
</div>
</a>
</div>
</div>
<?php }} else { ?>
<p class="text-center text-gray m-t-30 m-b-30"><i class="fas fa-exclamation-circle"></i> 최신글이 없습니다.</p>
<?php } ?>
</div>
</div>
<div class="clearfix"></div>
<script type="text/javascript">
$('.slidetab-content<?php echo $k?>').slick({
slidesToShow: 1,
slidesToScroll: 2,
autoplay: true,
infinite: true,
speed: 7000,
pauseOnHover : true,
autoplaySpeed: 2000,
});
</script>
<?php }} ?>
<?php if ($el_default) { ?>
<div class="tab-pane active in" id="gallery-tlb-<?php echo time(); ?>-1">
<div class="row">
<div class="col-sm-12">
<ul class="list-unstyled">
<li class="no-latest"><p class="text-center text-gray m-t-30 m-b-30"><i class="fas fa-exclamation-circle"></i> 최신글이 없습니다.</p></li>
</ul>
</div>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
혹시 스크립트 내에 slidesToShow: 1,
slidesToScroll: 2, 에 보여지는것들이 10개이고 스크롤은 하나씩 하려면 slidesToShow: 10,
slidesToScroll: 1, 해야되나 싶어서 했더니 아예 화면에서 띄워지진 않네요. ㅜ.ㅜ
세심히 한번더 살펴 주시면 감사 하겠습니다. 우선 class위치를 바꾸어서 덮는 위치랑 클레스명을 바꾸고 k값을 불러온다의 의미는 조금 이해 하고 있습니다 10퍼센트정도요 ㅜ.ㅜ 이러면서 배우는것이겠지요.
<div class="slidetab-content<?php echo $k?>">
이 부분은 원래대로 되돌리고..
<div class="slidetab-content">
$('.slidetab-content<?php echo $k?>').slick({
이 부분을 수정해보세요..
$('#gallery-tlb-<?php echo $el_master['el_code']; ?>-<?php echo ($k+1); ?>').slick({
구조적으로 이렇게 쓰는거 아닐까요?
$('.slidetab-content<?php echo $k?>').slick({
=>
$('.slidegallery-item').slick({