Key Visual(gallery sliding Banner)

갤러리 슬라이드 타입(gallery sliding banner)

일반적으로 사용되는 갤러리 타입으로 갤러리 영역에 마우스 오버할 경우 prev,next 버튼이 나타나고 맨 좌,우측 배너일 경우에는 한쪽 버튼만 나타납니다.

재생,정지 버튼은 포함되어 있지 않으니 참고 바랍니다.

HTML

HTML

<!-- (S) : galler-view -->
<div class="gallery-view">
  <!-- (S) : ctrl -->
  <div class="ctrl">
    <!-- (S) : thumnail-link -->
    <div class="thumbnail-link">
      <ul class="scroll-wrap">
        <li><a href="#v1" class="active"><img src="http://lorempixel.com/80/50/city/1" alt="" /></a></li>
        <li><a href="#v2"><img src="http://lorempixel.com/80/50/city/2" alt="" /></a></li>
        <li><a href="#v3"><img src="http://lorempixel.com/80/50/city/3" alt="" /></a></li>
      </ul>
    </div>
    <!-- (E) : thumnail-link -->
    
    <!-- (S) : view-ctrl -->
    <div class="view-ctrl">
      <a href="#none" class="btn-prev active">이전 보기</a>
      <a href="#none" class="btn-next active">다음 보기</a>
    </div>
    <!-- (E) : view-ctrl -->
    
  </div>
  <!-- (E) : ctrl -->
  
  <!-- (S) : view-list -->
  <ul class="view-list">
    <li id="v1" class="item active">
      <p class="img"><img src="http://lorempixel.com/600/350/city/1" alt="" /></p>
      <p class="text"><strong>111 도시 </strong> / 와우</p>
    </li>
     <li id="v2" class="item">
      <p class="img"><img src="http://lorempixel.com/600/350/city/2" alt="" /></p>
      <p class="text"><strong>222 도시 </strong> / 와우</p>
    </li>
     <li id="v3" class="item">
      <p class="img"><img src="http://lorempixel.com/600/350/city/3" alt="" /></p>
      <p class="text"><strong>333 도시 </strong> / 와우</p>
    </li>
  </ul>
  <!-- (S) : view-list -->
  
</div>
<!-- (E) : galler-view -->

CSS

css

* {margin: 0;padding: 0;}
li {list-style: none;}
body {width: 700px;margin: 20px auto;font-size: 12px;}
img {border:0 none; font-size: 0;line-height: 0;}
.gallery-view {position: relative;width: 600px;padding-bottom: 55px;overflow: hidden;}
.gallery-view .ctrl [class*="btn-"] {cursor:pointer; width: 62px; height: 62px;text-indent: -999em; overflow: hidden;background: #ccc; border: 1px solid #000;position: absolute;top: 140px;display: none;z-index: 1001;}
.gallery-view .ctrl [class*="btn-"].active {display: block;}
.gallery-view .ctrl [class*="btn-"].active.disable {display: none;}
.gallery-view .ctrl .btn-prev {left: 30px;background: #ccc;}
.gallery-view .ctrl .btn-next {right: 30px;background: #fcfcfc;}
.gallery-view .ctrl ul {position: absolute;bottom: 0;}
.gallery-view .ctrl ul li {float: left; margin-left: 15px;}
.gallery-view .ctrl ul li a {display:block; position: relative;z-index: 1;}
.gallery-view .ctrl ul li:first-child {margin-left: 0;}
.gallery-view .ctrl .view-ctrl { position: absolute;width: 100%;height: 380px;z-index: 1000; top: 0;left: 0;}
.gallery-view .ctrl .scroll-wrap {background: #fff; z-index: 2;}
.gallery-view .view-list {position: relative;z-index: 0;height: 425px;width: 700px;overflow: hidden;}
.gallery-view .view-list .item {position: absolute;display: none;top: 0;left: 0;z-index: 1;}
.gallery-view .view-list .item.active {display: block;z-index: 2;}
.gallery-view .view-list .item .text {text-align: right;margin-top: 20px;}

.gallery-view .ctrl .thumbnail-link a.active:before {
  content: ''; border: 1px solid #83807e; display: block; position: absolute; top: 0;left: 0;bottom: 0;right: 0;z-index: 1;
}
.gallery-view .ctrl .thumbnail-link a.active:after {
  content: ''; border: 1px solid #c0bdbb; display: block;position: absolute;top: 1px;left: 1px;bottom: 1px;right: 1px;z-index: 1;
} 

javaScript

javascript

var KEYUI = KEYUI || {};

KEYUI.visual = (function($) {
           
  function gallery(container, options) {
    if(!container.length) {
      return; 
    }
    
    var detect = {},
        config = {
          start : 0,
          perPage : 6
        };
    
    $.extend(config, options);
  
    function init() {
      setup();
      
      if(config.start == 0) {
        detect.viewListItem.eq(0).addClass('active');
        return;
      }
      
      if(detect.max >= config.start) {
        slide(config.start, 0);
      }
      
    }
    
    function setup() {
      detect.thumbnailList = container.find('.thumbnail-link');
      detect.thumbnailListItem = detect.thumbnailList.find('li');
      detect.viewList = container.find('.view-list');
      detect.viewCtrl = container.find('.view-ctrl');
      detect.viewListItem = detect.viewList.find('li');
      detect.btnNext = container.find('.btn-next');
      detect.btnPrev = container.find('.btn-prev');
      detect.btnNextList = container.find('.btn-next-list');
      detect.btnPrevList = container.find('.btn-prev-list');
      detect.width = container.width();
      detect.naviwidth = detect.thumbnailList.width();
      detect.listSize = detect.viewListItem.size();
      detect.perPage = config.perPage;
      detect.maxPage = Math.ceil(detect.listSize / detect.perPage);
      detect.currentPage = 1;
      detect.current = 0;
      detect.min = 0;
      detect.max = detect.listSize - 1;
      
      detect.viewListItem.each(function(index) {
        $(this).data('idx', index);
      });
      
      detect.thumbnailListItem.each(function(index){
        $(this).find('a').data('idx', index);
      });
      
      buttonShow(detect.current);
      
    }
    
    function next() {
      if(detect.current + 1 > detect.max) {
        return;
      }
      slide(detect.current + 1);
    }
    
    function prev() {
      if(detect.current - 1 < detect.min) {
        return;
      }
      slide(detect.current -1);
    }
    
    function direction(num) {
      return detect.current > num ? 'right' : 'left';
    }
    
    function buttonShow(num) {
      detect.btnNext.removeClass('disable');
      detect.btnPrev.removeClass('disable');
      
      if(num == detect.min) {
        detect.btnPrev.addClass('disable');
      }
      else if(num == detect.max) {
        detect.btnNext.addClass('disable');
      }
    }
  
    function slideEnd(index) {
      detect.viewListItem.eq(detect.current).removeClass('active');
      detect.viewListItem.removeAttr('style');
      detect.thumbnailListItem.eq(detect.current).find('a').removeClass('active');
      detect.thumbnailListItem.eq(index).find('a').addClass('active');
      detect.current = index;
    }
  
    function slide(index, speed) {
      if((index == detect.current) || (index > detect.max)) {
        return;
      }
      
      if(detect.viewListItem.is(':animated')) {
        return;
      }
      
      var to = direction(index),
          value;
      
      speed = speed == 0 ? 0 : 500;
      
      switch(to) {
        case 'left' :
          value = detect.width;
          break;
        
        case 'right' :
          value = detect.width;
          break;
      }
      
      detect.viewListItem.eq(index).css({'left' : -value}, speed).addClass('active');
      detect.viewListItem.eq(index).animate({'left' : 0}, speed);
      detect.viewListItem.eq(detect.current).animate({'left' : value}, speed, function(){
        slideEnd(index);
      });
      
      buttonShow(index);
      setPage(getPage(index + 1), speed);
      
    }
    
    function getPage(index) {
      index = index ? index : detect.current + 1;
      return Math.ceil(index / detect.perPage);
    }
    
    function setPage(page, speed) {
      if(detect.currentPage == page) {
        return;
      }
      detect.currenPage = page;
      detect.thumbnailList.find('.scroll-wrap').animate({
        'left' : (page - 1) * -detect.naviwidth
      }, speed);
    }
    
    init();
    
    detect.btnNext.on('click', function(e) {
      e.preventDefault();
      next();
    })
    
    detect.btnPrev.on('click', function(e) {
      e.preventDefault();
      prev();
    });
    
    detect.thumbnailListItem.find('a').on('click', function(e){
      e.preventDefault();
       slide($(this).data('idx'));
    });
    
    detect.btnNextList.on('click', function(e) {
      e.preventDefault();
      
      if(detect.currentPage < detect.maxPage) {
        setPage(detect.currentPage + 1, 500);
      }
    });
    
    detect.btnPrevList.on('click', function(e){
      e.preventDefault();
      if(detect.currentPage != 1) {
        setPage(detect.currentPage - 1, 500);
      }
    });
    
    detect.viewCtrl.hover(
      function() {
        detect.btnPrev.addClass('active');
        detect.btnNext.addClass('active');
      },
      function() {
        detect.btnPrev.removeClass('active');
        detect.btnNext.removeClass('active');
      }
    );
    
    return {
      setup : setup,
      slide : slide,
      prev : prev,
      next : next
    }
  
  }
                    
  return {
    gallery : gallery
  }
                    
}(jQuery));

$(document).ready(function(){
  KEYUI.visual.gallery($('.gallery-view'));
})

Result View

결과 화면을 확인해 보시기 바랍니다.

See the Pen gallery key visual by jaeheekim (@jaehee) on CodePen.

필자 슬라이딩 배너 모음 링크

1. 세로형 탭타입의 슬라이딩 배너
2. 슬라이딩 배너(페이드효과,재생,정지버튼)
3. ddd

Jaehee's WebClub