bxSlider slideTabs #note

bxSlider.jsのカルーセル機能を使用したスライドタブのテストです。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
/* reset */
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  font-size: 62.5%;
}
body {
  box-sizing: border-box;
  padding: 50px;
  font-size: calc(1rem + 4px);
  line-height: calc(1em + 6px);
}
ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* bxslider */
.bx-wrapper {
  position: relative;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  -webkit-transform: translateZ(0);
}
/* slidetabs */
.c-slidetabs-01 {
  position: relative;
}
.c-slidetabs-01 ul {
  width: 280px;
  margin: 0;
  padding: 0;
  border: 0 !important;
}
.c-slidetabs-01 ul a {
  display: block;
  width: 70px;
  border: 1px solid #ccc;
  text-align: center;
}
.c-slidetabs-01 .controls {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
}
.c-slidetabs-01 .controls div {
  float: left;
}
.c-slidetabs-01 .controls a {
  display: block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  text-indent: 100%;
  border: 1px solid #ccc;
}
.c-slidetabs-01 .controls a.disabled {
background: #eee;
  pointer-events: none;
}
</style>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.js-bxSlider-slidetabs-01').bxSlider({
        infiniteLoop: false,
        pager: false,
        minSlides: 4,
        maxSlides: 4,
        moveSlides: 1,
        slideWidth: 70,
        prevSelector: '.prev',
        nextSelector: '.next',
        hideControlOnEnd: 'true'
    });
});
</script>
</head>
<body>
<div class="c-slidetabs-01">
  <ul class="js-bxSlider-slidetabs-01">
    <li><a href="#">hoge</a></li>
    <li><a href="">fuga</a></li>
    <li><a href="">piyo</a></li>
    <li><a href="#">foo</a></li>
    <li><a href="">bar</a></li>
    <li><a href="">baz</a></li>
  </ul>
  <div class="controls">
    <div class="prev"></div>
    <div class="next"></div>
  </div>
</div>
</body>
</html>

普通に実装しただけではnext/prevを連打したときフリーズしてしまいます。
この問題を解決するためにはオプションで用意されているCallbackを利用しスライド動作中のクリック無効化の処理を追加する必要がありそうです。

参考

以上、ありがとうございました。