https://www.hakujuji.co.jp/family/js/contents.js

1/*
2 * familycare用 JavaScript
3 */
4(function($) {
5
6  // ---------------------------------------------------------------------------
7  // Slick
8  // フロントページ トップPC
9  $('.slickPC').slick({
10    speed: 500,
11    infinite: true,
12    arrows: true,
13    dots: true
14  });
15
16  // サムネイル初期値
17  $('.heroPCThumbs button').eq(0).addClass('isActive');
18
19  $('.slickPC').on('beforeChange', function(event, slick, currentSlide, nextSlide){
20    $('.heroPCThumbs button').eq(currentSlide).removeClass('isActive');
21    $('.heroPCThumbs button').eq(nextSlide).addClass('isActive');
22  });
23
24  // Slick Thumbnails
25  $('.heroPCThumbs button').on('click', function(e){
26    var idx = $('.heroPCThumbs button').index(this);
27    $('.slickPC').slick('slickGoTo', idx);
28  });
29
30  /// フロントページ トップSP
31  $('.slickSP').on('init', function(e, slick){
32    setTimeout( function() { $('.switcherSP').animate({'opacity': 1}, 1000 ); }, 800 );
33  });
34  $('.slickSP').slick({
35    speed: 300,
36    arrows: true,
37    dots: true
38  });
39
40  /// フロントページ PICKUP
41  $('.secPickupCarousel ul').slick( {
42    speed: 300,
43    infinite: false,
44    arrows: true,
45    touchThreshold: 20,
46    slidesToShow: 4,
47    slidesToScroll: 3
48  });
49
50  // ---------------------------------------------------------------------------
51  // 初期化、イベント割り当て
52
53  if ( isPC ) {
54    var video = document.querySelector('#slickVideo');
55      $('.slickPC').addClass('isVisible');
56      $('.heroPCThumbs').addClass('isVisible');
57      $('.withSlogan').addClass('isVisible');
58  } else {
59    $('.slickPC').addClass('isVisible');
60    $('.heroPCThumbs').addClass('isVisible');
61    $('.withSlogan').addClass('isVisible');
62  }
63
64  // ---------------------------------------------------------------------------
65  // InView処理
66  $('.inView').on('inview', function(e, visible) {
67    if (visible) {
68      $( this ).stop().addClass('inViewOn');
69    } else {
70      //  $( this ).stop().removeClass('inViewOn');
71    }
72  });
73
74  // ---------------------------------------------------------------------------
75  // お知らせのもっと見る切り替え
76  $('.secNewsMore').on('click', function(e){
77    $( this ).toggleClass('isOpen');
78    $('.secNewsBottom').slideToggle( 700, 'easeOutQuart' );
79  });
80
81})(jQuery);