Slick JS 스 와이프 탭

이 코드 조각은 https://codepen.io/hani_ouni/pen/LZxKxG에서 완벽하게 작동하지만 codepen.io에서 완벽하게 작동하지만 다운로드하여 내 컴퓨터에서 실행하려고하면 작동하지 않으며 브라우저의 다음 오류를 인쇄합니다. 콘솔. 여기Slick JS 스 와이프 탭

코드를입니다

html : 
<div class="sub-header "> 

<div class="swipe-tabs"> 
    <div class="swipe-tab">One</div> 
    <div class="swipe-tab">Two</div> 
    <div class="swipe-tab">Three</div> 
    <div class="swipe-tab">Four</div> 
    <div class="swipe-tab">Five</div> 
    </div> 
</div> 
<div class="main-container"> 
    <div class="swipe-tabs-container "> 
    <div class="swipe-tab-content">Tab 1</div> 
    <div class="swipe-tab-content">Tab 2</div> 
    <div class="swipe-tab-content">Tab 3</div> 
    <div class="swipe-tab-content">Tab 4</div> 
    <div class="swipe-tab-content">Tab 5</div> 
    </div> 
</div>

CSS :

$swipe-tab-color: #757575; 
$swipe-active-tab-color: #000; 


.slick-initialized { 
    .swipe-tab-content { 
    position: relative; 
    min-height: 365px; 

    @media screen and (min-width: 767px) { 
     min-height: 500px; 
    } 
    } 

    .swipe-tab { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 50px; 
    background: none; 
    border: 0; 
    color: $swipe-tab-color; 
    cursor: pointer; 
    text-align: center; 
    border-bottom: 2px solid rgba($swipe-active-tab-color, 0); 
    transition: all 0.5s; 

    &:hover { 
     color: $swipe-active-tab-color; 
    } 

    &.active-tab { 
     border-bottom-color: $swipe-active-tab-color; 
     color: $swipe-active-tab-color; 
     font-weight: bold; 
    } 

    } 
} 


.main-container { 
    padding: 25px; 
    background: #f1f1f1; 
}

JQuery와

$(function() { 
    'use strict'; 

    var $swipeTabsContainer = $('.swipe-tabs'), 
     $swipeTabs = $('.swipe-tab'), 
     $swipeTabsContentContainer = $('.swipe-tabs-container'), 
     currentIndex = 0, 
     activeTabClassName = 'active-tab'; 

    $swipeTabsContainer.on('init', function(event, slick) { 
     $swipeTabsContentContainer.removeClass('invisible'); 
     $swipeTabsContainer.removeClass('invisible'); 

     currentIndex = slick.getCurrent(); 
     $swipeTabs.removeClass(activeTabClassName); 
     $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
    }); 

    $swipeTabsContainer.slick({ 
     //slidesToShow: 3.25, 
     slidesToShow: 3, 
     slidesToScroll: 1, 
     arrows: false, 
     infinite: false, 
     swipeToSlide: true, 
     touchThreshold: 10 
    }); 

    $swipeTabsContentContainer.slick({ 
     asNavFor: $swipeTabsContainer, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     arrows: false, 
     infinite: false, 
     swipeToSlide: true, 
    draggable: false, 
     touchThreshold: 10 
    }); 


    $swipeTabs.on('click', function(event) { 
     // gets index of clicked tab 
     currentIndex = $(this).data('slick-index'); 
     $swipeTabs.removeClass(activeTabClassName); 
     $('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName); 
     $swipeTabsContainer.slick('slickGoTo', currentIndex); 
     $swipeTabsContentContainer.slick('slickGoTo', currentIndex); 
    }); 

    //initializes slick navigation tabs swipe handler 
    $swipeTabsContentContainer.on('swipe', function(event, slick, direction) { 
     currentIndex = $(this).slick('slickCurrentSlide'); 
     $swipeTabs.removeClass(activeTabClassName); 
     $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
    }); 
});

도움하세요?

출처

2016-07-14 ouni hani

이 코드 펜은 SASS 및 외부 JavaScript를 사용합니다. 아래에서 이것을 시도하십시오. 당신이 레이블 이름 CSS (SCSS)와 코드를 방문 다음에, 당신은 오른쪽에있는 화살표를 클릭하고 선택해야합니다 : 보기 컴파일 된 CSS

$(function() { 
 
\t 'use strict'; 
 

 
\t var $swipeTabsContainer = $('.swipe-tabs'), 
 
\t \t $swipeTabs = $('.swipe-tab'), 
 
\t \t $swipeTabsContentContainer = $('.swipe-tabs-container'), 
 
\t \t currentIndex = 0, 
 
\t \t activeTabClassName = 'active-tab'; 
 

 
\t $swipeTabsContainer.on('init', function(event, slick) { 
 
\t \t $swipeTabsContentContainer.removeClass('invisible'); 
 
\t \t $swipeTabsContainer.removeClass('invisible'); 
 

 
\t \t currentIndex = slick.getCurrent(); 
 
\t \t $swipeTabs.removeClass(activeTabClassName); 
 
     \t $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
 
\t }); 
 

 
\t $swipeTabsContainer.slick({ 
 
\t \t //slidesToShow: 3.25, 
 
\t \t slidesToShow: 3, 
 
\t \t slidesToScroll: 1, 
 
\t \t arrows: false, 
 
\t \t infinite: false, 
 
\t \t swipeToSlide: true, 
 
\t \t touchThreshold: 10 
 
\t }); 
 

 
\t $swipeTabsContentContainer.slick({ 
 
\t \t asNavFor: $swipeTabsContainer, 
 
\t \t slidesToShow: 1, 
 
\t \t slidesToScroll: 1, 
 
\t \t arrows: false, 
 
\t \t infinite: false, 
 
\t \t swipeToSlide: true, 
 
    draggable: false, 
 
\t \t touchThreshold: 10 
 
\t }); 
 

 

 
\t $swipeTabs.on('click', function(event) { 
 
     // gets index of clicked tab 
 
     currentIndex = $(this).data('slick-index'); 
 
     $swipeTabs.removeClass(activeTabClassName); 
 
     $('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName); 
 
     $swipeTabsContainer.slick('slickGoTo', currentIndex); 
 
     $swipeTabsContentContainer.slick('slickGoTo', currentIndex); 
 
    }); 
 

 
    //initializes slick navigation tabs swipe handler 
 
    $swipeTabsContentContainer.on('swipe', function(event, slick, direction) { 
 
    \t currentIndex = $(this).slick('slickCurrentSlide'); 
 
\t \t $swipeTabs.removeClass(activeTabClassName); 
 
\t \t $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
 
\t }); 
 
});

.slick-initialized .swipe-tab-content { 
 
    position: relative; 
 
    min-height: 365px; 
 
} 
 
@media screen and (min-width: 767px) { 
 
    .slick-initialized .swipe-tab-content { 
 
    min-height: 500px; 
 
    } 
 
} 
 
.slick-initialized .swipe-tab { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    height: 50px; 
 
    background: none; 
 
    border: 0; 
 
    color: #757575; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    border-bottom: 2px solid transparent; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
.slick-initialized .swipe-tab:hover { 
 
    color: #000; 
 
} 
 
.slick-initialized .swipe-tab.active-tab { 
 
    border-bottom-color: #000; 
 
    color: #000; 
 
    font-weight: bold; 
 
} 
 

 
.main-container { 
 
    padding: 25px; 
 
    background: #f1f1f1; 
 
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 

 
<div class="sub-header "> 
 
    <div class="swipe-tabs"> 
 
    <div class="swipe-tab">One</div> 
 
    <div class="swipe-tab">Two</div> 
 
    <div class="swipe-tab">Three</div> 
 
    <div class="swipe-tab">Four</div> 
 
    <div class="swipe-tab">Five</div> 
 
    </div> 
 
</div> 
 
<div class="main-container"> 
 
    <div class="swipe-tabs-container "> 
 
    <div class="swipe-tab-content">Tab 1</div> 
 
    <div class="swipe-tab-content">Tab 2</div> 
 
    <div class="swipe-tab-content">Tab 3</div> 
 
    <div class="swipe-tab-content">Tab 4</div> 
 
    <div class="swipe-tab-content">Tab 5</div> 
 
    </div> 
 
</div>

출처

2016-07-14 10:50:42 trungk18

감사합니다. 완벽하게 작동합니다. –

그것의 좋은하지를 모바일 터치 스크린 작업

모바일 화면

,617에 대한 유일한 데스크톱/노트북 모니터

업데이트 코드

내가 와이프 TAB2를 클릭

의 쇼 탭 1 개 탭 2 탭 3 의 확인

하지만 난 tab3에 그 쇼

tab3에 tab4 tab5를 클릭하면 그것의 틀린 코드

내가 tab3를 클릭했을 때 그 쇼 tab2 + tab3 + tab4

코드 업데이트 .....

출처

2018-02-01 10:10:16

Slick JS 스 와이프 탭

답변

관련 문제