• [Jquery] tab HTML <div class="_tabWrap"> <div class="tab-tab"> <a href="#">제목1</a> <a href="#">제목2</a> </div> <div class="tab-article"> <article>내용1</article> <article>내용2</article> </div> </div> jQuery $(function(){ $('._tabWrap').tab(); }) $(function(){ $('._tabWrap').tab({ 'tabAfter' : function() { //실행 }, 'loadAfter' : function() { //실행 } }); }) /* jQuery Plugin : tab */ $(function(){$.fn.tab=function(options,callback){return this.each(function(){var $el=$(this);$.fn.tab.defaults={tab:$('.tab-tab'),article:$('.tab-article'),className:'active',mode:'normal',tabAfter:'',loadAfter:''};var option=$.extend({},$.fn.tab.defaults,options);var $tab=$('> *',$el.find(option.tab));var $article=$('> *',$el.find(option.article));function init(){tab_mark_no();article_mark_no();start();loadAfter()}function tab_mark_no(){$tab.each(function(i){$(this).attr('tab',i);if(i==0){$(this).addClass(option.className)}})}function article_mark_no(){$article.each(function(i){$(this).attr('tab',i);if(i>0){$(this).hide()}})}function tabAfter(){if(option.tabAfter){eval(option.tabAfter())}}function loadAfter(){if(option.loadAfter){eval(option.loadAfter())}}function start(){$tab.click(function(e){e.preventDefault();var no=$(this).attr('tab');$(this).addClass(option.className).siblings().removeClass(option.className);$article.each(function(){var hasTab=$(this).attr('tab');if(typeof hasTab!==typeof undefined&&hasTab!==false&&hasTab==no){switch(option.mode){case'fade':$(this).fadeIn();break;default:$(this).show();break}}else{$(this).hide()}});tabAfter()})}init()})}});
• [Jquery] slick slider 2 slick 슬라이더 사용 방법 사이트 URL : https://kenwheeler.github.io/slick/ HTML <div class="visual"> <div class="roll"> <div class="item">slider1</div> <div class="item">slider2</div> <div class="item">slider3</div> </div> <p class="vis-dots"> <span class="now">01</span> / <span class="tot">03</span> </p> <div class="vis-control"> <button class="play">play</button> <button class="stop">stop</button> </div> </div> jQuery //visual visual = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'roll' : $('.visual .roll') } var rolling = function(){ //item total number var tot_len = $('.visual .item').length; if (tot_len < 10) { tot_len = '0' + tot_len; } //10 이하 번호앞에 텍스트 0 입력 $('.visual .vis-dots .tot').text(tot_len); //slider $ele.roll.slick({ 'fade' : false, //Fade 롤링 효과 'dots' : true, //하단 pager 'arrows' : true, //next,prev 버튼 'infinite' : true, //무한반복 'slidesToShow' : 1, //슬라이드 갯수 'slidesToScroll' : 1, //롤링시 슬라이드 갯수 'autoplay' : true, //자동롤링 'autoplaySpeed' : 4000, //자동롤링 딜레이 'swipe' : false, //모바일 스와프 여부 'centerMode' : false, //Center모드. 가운데 slide에 'slick-active' 클래스 부여. 'centerPadding' : 0, //Center모드인 경우 좌/우 여백 설정 'vertical' : false, //vertical 모드 'zIndex' : 80, //z-index 'pauseOnFocus' : false, 'pauseOnHover' : false, 'responsive' : [ //tablet { 'breakpoint' : 1300, 'settings' : { 'swipe' : true } }, //mobile { 'breakpoint' : 750, 'settings' : { 'swipe' : true } } ] }); //현재 슬라이드 number $ele.roll.on('afterChange', function(event, slick, currentSlide, nextSlide){ now_len = currentSlide + 1; if (now_len < 10) { now_len = '0' + now_len; } //10 이하 번호앞에 텍스트 0 입력 $('.visual .vis-dots .now').text(now_len); }); //control play $('.vis-control .play').click(function(){ $ele.roll.slick('slickPlay'); }); //control stop $('.vis-control .stop').click(function(){ $ele.roll.slick('slickPause'); }); } rolling(); } } $(function(){ if($('.visual').length>0){ visual.init(); } }) 영상 같이 슬라이드 HTML <div class="visual"> <div class="roll"> <div class="item" data-src="<div class='video'><video class='vis_video pc' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video><video class='vis_video mobile' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video></div>"> <div class="video"> <!-- controls autoplay muted loop playsinline --> <video class="vis_video pc" autoplay muted playsinline> <source src="<?=DIR?>/files/main.mp4" type="video/mp4"> </video> <video class="vis_video mobile" autoplay muted playsinline> <source src="<?=DIR?>/files/main.mp4" type="video/mp4"> </video> </div> </div> <div class="item"> <a href="#" target="_blank" class="__pc"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> <a href="#" target="_blank" class="__ta"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> <a href="#" target="_blank" class="__mo"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> </div> </div> </div> CSS #main .visual .video {position: relative;z-index: 0;width: 100vw;height: 900px;overflow: hidden;} #main .visual .video video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;width: auto;height: auto;} #main .visual .video video.pc {display: block;} #main .visual .video video.mobile {display: none;} jQuery // visual visual = { 'init' : function() { this.action(); }, 'action' : function() { var $video_pc = $('.vis_video.pc'); var $video = $('.vis_video.mobile'); var $ele = { 'win' : $('window'), 'roll' : $('.visual .roll') } var rolling = function() { $ele.roll.slick({ 'fade' : true, // Fade 롤링 효과 ···

• 1
• 2
• 3