special.js

var $ = Dom7;
var app = new Framework7({
  root: '#app',
  theme: 'ios',
  routes: routes
});

var numSwiper = new Swiper('.num-swiper', {
    loop: false,
    slidesPerView: 4,
    slidesPerGroup: 1,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});

var numContentSwiper = new Swiper('.num-content-swiper', {
    loop: false,
});

numContentSwiper.on('slideChange', function (swiper) {
    numSwiper.slideTo(numContentSwiper.realIndex);
    $('.num-swiper .swiper-slide').eq(numContentSwiper.realIndex).addClass('active').siblings().removeClass('active');
});
$('.num-swiper .swiper-slide').click(function () {
    $(this).addClass("active").siblings().removeClass("active");
    numContentSwiper.slideTo($(this).index());
});

var picSwiper = new Swiper('.pic-swiper', {
    loop: false,
    slidesPerView : 1.5,
    spaceBetween : 15
});

var topicSwiper = new Swiper('.topic-swiper', {
    loop: false,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    }
});

$('.js-read-more').click(function () {
    if($(this).hasClass('active')){
        $('.special-content .txt-content').css('height','190px');
        $(this).removeClass('active')
    }else{
        $('.special-content .txt-content').css('height','auto');
        $(this).addClass('active')
    }
});

$('.js-enable-drag').click(function () {
  var $this = $(this);
  $this.hasClass('active')?$this.removeClass('active'):$this.addClass('active');
  var $target = $($this.data('target'));
  $target.hasClass('enable')?$target.removeClass('enable'):$target.addClass('enable');
});