TOPページの体験セミナー自動更新機能の追加

achievement-official.conohawing.com/assets/include/header.php

@@ -17,32 +17,58 @@
  <script type="text/javascript" src="/common_previous/js/lib/jquery.matchHeight-min.js" charset="utf-8"></script>
  <script>
   $(document).ready(function() {
-   /*
-   $('.c-slide1__inner').on('init', function(event, slick) {
-    $(slick.$slides[0]).addClass('slick-animated');
-   }).on('beforeChange', function(event, slick, currentSlide) {
-    $('.slick-animated').removeClass('slick-animated');
-   }).on('afterChange', function(event, slick, currentSlide) {
-    $(slick.$slides[currentSlide]).addClass('slick-animated');
-   }).slick({
-    dots: true,
-    arrows: false,
-    infinite: true,
-    centerMode: true,
-    centerPadding: '100px',
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    variableWidth: true,
-    autoplay: true,
-    responsive: [{
-     breakpoint: 768,
-     settings: {
-      centerPadding: '50px'
-     }
-    }]
-   });
-*/
-   $(".c-list2__info").matchHeight();
+
+      $.ajax({
+          url: "/pub/api/experiences",
+          type: 'GET',
+          async: true,
+          data: {},
+          dataType: 'json',
+          success: function (response) {
+              $.each(response['data'], function (key, val) {
+                  var appendItem = '' +
+                      '    <div class="c-slide1__item">\n' +
+                      '     <a href="' + val['link_url'] + '" target="_blank">\n' +
+                      '      <div class="c-slide1__img">\n' +
+                      '       <img src="' + val['img_path'] + '" alt="">\n' +
+                      '      </div>\n' +
+                      '      <div class="c-slide1__info">\n' +
+                      '       <p class="c-slide1__txt">\n' +
+                      '        <span>' + val['top_description'] + '</span>\n' +
+                      '       </p>\n' +
+                      '      </div>\n' +
+                      '     </a>\n' +
+                      '    </div>\n';
+                  $('.c-slide1__inner').append(appendItem);
+              });
+
+              $('.c-slide1__inner').slick({
+                  autoplay: true,
+                  autoplaySpeed: 5000,
+                  dots: false,
+                  centerMode: true,
+                  centerPadding: '30px',
+                  arrows: true,
+                  prevArrow: '<a href="javascript:void(0);" style="position: absolute; top: 50%; left: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 1;"><img src="/assets/img/common/icon-slick-arrow-left.png"></a>',
+                  nextArrow: '<a href="javascript:void(0);" style="position: absolute; top: 50%; right: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 1;"><img src="/assets/img/common/icon-slick-arrow-right.png"></a>',
+                  slidesToShow: 3,
+                  slidesToScroll: 1,
+                  infinite: true,
+                  responsive: [{
+                      breakpoint: 768,
+                      settings: {
+                          slidesToShow: 2,
+                      }
+                  }]
+              });
+          },
+          error: function (data) {
+              var response = $.parseJSON(data.responseText);
+              console.log(response.message);
+          }
+      });
+
+      $(".c-list2__info").matchHeight();
   });
 
  </script>

achievement-official.conohawing.com/common_previous/css/slick.css

-/* Slider */
-.slick-slider
-{
-    position: relative;
-    display: block;
-    -moz-box-sizing: border-box;
-         box-sizing: border-box;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    -webkit-touch-callout: none;
-    -khtml-user-select: none;
-    -ms-touch-action: pan-y;
-        touch-action: pan-y;
-    -webkit-tap-highlight-color: transparent;
-}
-
-.slick-list
-{
-    position: relative;
-
-    display: block;
-    overflow: hidden;
-
-    margin: 0;
-    padding: 0;
-}
-.slick-list:focus
-{
-    outline: none;
-}
-.slick-list.dragging
-{
-    cursor: pointer;
-    cursor: hand;
-}
-
-.slick-slider .slick-track,
-.slick-slider .slick-list
-{
-    -webkit-transform: translate3d(0, 0, 0);
-       -moz-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-         -o-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-}
-
-.slick-track
-{
-    position: relative;
-    top: 0;
-    left: 0;
-
-    display: block;
-}
-.slick-track:before,
-.slick-track:after
-{
-    display: table;
-
-    content: '';
-}
-.slick-track:after
-{
-    clear: both;
-}
-.slick-loading .slick-track
-{
-    visibility: hidden;
-}
-
-.slick-slide
-{
-    display: none;
-    float: left;
-
-    height: 100%;
-    min-height: 1px;
-}
-[dir='rtl'] .slick-slide
-{
-    float: right;
-}
-.slick-slide img
-{
-    display: block;
-}
-.slick-slide.slick-loading img
-{
-    display: none;
-}
-.slick-slide.dragging img
-{
-    pointer-events: none;
-}
-.slick-initialized .slick-slide
-{
-    display: block;
-}
-.slick-loading .slick-slide
-{
-    visibility: hidden;
-}
-.slick-vertical .slick-slide
-{
-    display: block;
-
-    height: auto;
-
-    border: 1px solid transparent;
-}
-.slick-arrow.slick-hidden {
-    display: none;
-}
-/* Slider */
-.slick-loading .slick-list
-{
-    background: #fff url('./ajax-loader.gif') center center no-repeat;
-}
-
+/* Slider */
+.slick-slider
+{
+    position: relative;
+    display: block;
+    -moz-box-sizing: border-box;
+         box-sizing: border-box;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('../img/ajax-loader.gif') center center no-repeat;
+}
+