[slick] slick 슬라이드 (breakpoint , 딤드+유튜브)

slick 슬라이드 반응형.

전체 width 값에 따라 breakpoint 옵션을 사용해서

슬라이드 3 -> 2 -> 1  개씩 보이게 한다.

 

+) 추가

img 클릭 했을때 레이어 팝업이 어둡게 뜨면서 

유튜브화면 뜨는 스크립트 추가!!

 

head안에 아래 링크 연결 해줘야 한다. 

slick + 유툽팝업이 연결되는 링크인데 이것도 역시 codepen에 올라와있던것 참고해서 사용함.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

 

 

script를 head영역에 넣은게 아니고 body에 넣어서html 아래에 있다.

<div class="slider center">
  <div>
 	 <span><a href="https://www.youtube.com/watch?v=q_yIkF05xYo" data-modal="button"><img src=""></a></span>
  </div>
  <div>
  	<span><a href="https://www.youtube.com/watch?v=q_yIkF05xYo" data-modal="button"><img src=""></a></span>
  </div>
  <div>
  	<span><a href="https://www.youtube.com/watch?v=q_yIkF05xYo" data-modal="button"><img src=""></a></span>
  </div>
  <div>
  	<span><a href="https://www.youtube.com/watch?v=q_yIkF05xYo" data-modal="button"><img src=""></a></span>
  </div><div>
  	<span><a href="https://www.youtube.com/watch?v=q_yIkF05xYo" data-modal="button"><img src=""></a></span>
  </div>
  <div>
 	 <span><a href="https://www.youtube.com/watch?v=q_yIkF05xYo" data-modal="button"><img src=""></a></span>
  </div>
  <div>
  	<span><a href="https://www.youtube.com/watch?v=q_yIkF05xYo" data-modal="button"><img src=""></a></span>
  </div>
</div>



<script id="rendered-js">
$('.slider').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
      slidesToShow: 2,
      infinite: true,
      dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
      slidesToShow: 1,
      }
    },
    {
      breakpoint: 480,
      settings: {
      slidesToShow: 1,
      }
    }
  ]
});


(function () {
  var Modal = function () {
  this.Selector = {
  overlay: '.Modal-overlay',
  box: '.Modal-box',
  button: '[data-modal=button]' };

  this.Markup = {
    close: '<div class="Modal-close">&times;</div>',
    overlay: '<div class="Modal-overlay"></div>',
    box: '<div class="Modal-box"></div>' };
    
    this.youtubeID = false;
  };

  Modal.prototype = {
    toggleOverflow: function () {
    $('body').toggleClass('Modal-cancel-overflow');
  },

  videoContainer: function () {
  	return '<div class="video-container"><iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/' + this.youtubeID + '?autoplay=1&rel=0" frameborder="0"></iframe></div>';
  },

  addOverlay: function () {
    var self = this;
    $(this.Markup.overlay).appendTo('body').fadeIn('slow', function () {
    	self.toggleOverflow();
    });
    $(this.Selector.overlay).on('click touchstart', function () {
    	self.closeModal();
    });
  },

  addModalBox: function () {
  	$(this.Markup.box).appendTo(this.Selector.overlay);
  },

  buildModal: function (youtubeID) {
    this.addOverlay();
    this.addModalBox();
    $(this.Markup.close).appendTo(this.Selector.overlay);
    $(this.videoContainer(youtubeID)).appendTo(this.Selector.box);
  },

  closeModal: function () {
    this.toggleOverflow();
    $(this.Selector.overlay).fadeOut().detach();
    $(this.Selector.box).empty();
  },

  getYoutubeID: function () {
  	return this.youtubeID;
  },

    setYoutubeID: function (href) {
      var id = '';
      if (href.indexOf('youtube.com') > -1) {
        // full Youtube link
        id = href.split('v=')[1];
      } else if (href.indexOf('youtu.be') > -1) {
        // shortened Youtube link
        id = href.split('.be/')[1];
      } else {
        // in case it's not a Youtube link, send them on their merry way
        document.location = href;
      }
      // If there's an ampersand, remove it and return what's left, otherwise return the ID
      // this.youtubeID = (id.indexOf('&') != -1) ? id.substring(0, amp) : id;
      this.youtubeID = id;
    },

    startup: function (href) {
      this.setYoutubeID(href);
      if (this.youtubeID) {
        this.buildModal();
      }
    } };


  $(document).ready(function () {
    var modal = new Modal();
    $(modal.Selector.button).on('click touchstart', function (e) {
      e.preventDefault();
      modal.startup(this.href);
    });
  });

})(this);
</script>

 

.slick-slide{ margin:0 25px; border:1px solid red;}
.slick-slide span{display:block;  }
.slick-slide img{width:600px; height:600px; width:100%; background-color:#000;}

/*slick pager 수정*/
.slick-dots li{height:10px; }
.slick-dots li.slick-active{width:40px; }
.slick-dots li.slick-active button{width:100%;  }
.slick-dots li button{height:10px;}
.slick-dots li.slick-active button:before{content:""; width:100%; background:black; border-radius:10px; }
.slick-dots li button:before{height:10px; line-height:10px; }

/*유튭뜨는 css*/
.Modal-overlay {
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.85);
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  padding-top: 10%;
  z-index: 99999;
}

.Modal-box {
  width: 87%;
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
.Modal-box > .video-container {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}
.Modal-box > .video-container > iframe,
.Modal-box > .video-container > object,
.Modal-box > .video-container > embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  max-width: 860px;
}

.Modal-close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 50px;
  z-index: 100000;
  color: #fff;
}

.Modal-cancel-overflow {
  overflow: hidden;
}