Slick JS作为滑动选项卡

时间：2016-07-14 08:54:21

标签： javascript jquery html material

我发现此代码段：https://codepen.io/hani_ouni/pen/LZxKxG在codepen.io上运行正常但是当我下载它并试图在我的机器上运行它时它不起作用并打印出以下错误在浏览器的控制台上。

这是代码

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);
    });
});

有什么帮助吗？

2 个答案:

答案 0 :(得分：4)

此代码笔也使用SASS和外部JavaScript。请在下面试一下。下次访问带有标签名称CSS（SCSS）的代码时，您必须单击右上角的箭头并选择：查看编译的CSS

＆＃13;
＆＃13; 
$(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);
	});
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

它在触摸屏手机上的表现不佳

仅适用于台式机/笔记本电脑显示器

更新手机屏幕的代码

当我点击swipe-tab2

时

它的节目 标签1 标签2 标签3 好的

但是当我点击Tab3它的节目

TAB3 TAB4 tab5 错误的代码

当我点击tab3时，显示tab2 + tab3 + tab4

更新您的代码.....

相关问题
最新问题