JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<link rel="stylesheet" href="http://www.idangero.us/framework7/dist/css/framework7.ios.min.css">
<link rel="stylesheet" href="http://www.idangero.us/framework7/dist/css/framework7.ios.colors.min.css">
<script src="http://www.idangero.us/framework7/dist/js/framework7.min.js"></script>
<!-- Tab slider - Framework 7 (old version) -->

<div id="tabSliderCategoryDetail" class="mp-swiper-slider">
  <div id="tabSliderCategoryDetail-pagination" class="mp-tab-style-1">
    <div class="buttons-row-wrapper">
      <div class="buttons-row">
        <input type="hidden" value="507" class="sub-tab-name"/>
        <input type="hidden" value="38" class="sub-tab-name"/>
      </div>
    </div>
  </div>
  <!-- #tabSliderCategoryDetail-pagination-->

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>This is tab 1 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad delectus fugiat, recusandae nesciunt dicta assumenda ducimus necessitatibus quaerat. Labore animi eius optio laborum totam quaerat numquam vero architecto. Sapiente, quaerat.</p>
      </div>
      <!-- .swiper-slide-->

      <div class="swiper-slide">
        <p>This is tab 2 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad delectus fugiat, recusandae nesciunt dicta assumenda ducimus necessitatibus quaerat. Labore animi eius optio laborum totam quaerat numquam vero architecto. Sapiente, quaerat.</p>
      </div>
      <!-- .swiper-slide-->
    </div>
    <!-- .swiper-wrapper-->
  </div>
</div>
<!-- #tabSliderCategoryDetail-->

CSS

/* Tab slider - Framework 7 (old version) */

JavaScript

// Tab slider - Framework 7 (old version)
var tabSliderSetting1 = function(stringSlideID, tabsName) {
  $("#"+ stringSlideID +"").each(function() {
    if (!$(this).length) return;

    // subTabName
    var hasSubTabName = false;
    
    if ($("#" + stringSlideID + "-pagination .sub-tab-name").length) {
      hasSubTabName = true;

      var subTabName = $("#" + stringSlideID + "-pagination .sub-tab-name");
      var subTabsName = [];

      subTabName.each(function() {
        subTabsName.push($(this).val());
      });
    }

    // setting slider
    var swiper = new Swiper("#" + stringSlideID + " .swiper-container", {
      spaceBetween: 0,
      loop: false,
      autoplay: false,
      effect: "slide",
      pagination: "#" + stringSlideID + "-pagination .buttons-row-wrapper .buttons-row",
      bulletClass: "tab-link",
      bulletActiveClass: "active",
      paginationBulletRender: function (index, className) {
        if (!hasSubTabName) {
          return '<span class="button '+ className +'">' + tabsName[index] + '</span>';
        } else {
          return '<span class="button '+ className +'">' + 
            tabsName[index] + 
            '<span>('+ subTabsName[index] +')</span>' +
          '</span>';
        }
      },
      paginationClickable: true,
      preloadImages: false,
      lazyLoading: true
    });
  });
};

tabSliderSetting1("tabSliderCategoryDetail", ["콕! 구독순", "최신순"]);