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

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

@@ -17,31 +17,57 @@
  <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,
+
+      $.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: '100px',
-    slidesToShow: 1,
+                  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,
-    variableWidth: true,
-    autoplay: true,
+                  infinite: true,
                   responsive: [{
                       breakpoint: 768,
                       settings: {
-      centerPadding: '50px'
+                          slidesToShow: 2,
                       }
                   }]
               });
-*/
+          },
+          error: function (data) {
+              var response = $.parseJSON(data.responseText);
+              console.log(response.message);
+          }
+      });
+
       $(".c-list2__info").matchHeight();
   });
 

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

@@ -116,6 +116,6 @@
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('./ajax-loader.gif') center center no-repeat;
+    background: #fff url('../img/ajax-loader.gif') center center no-repeat;
 }
 

achievement-official.conohawing.com/index.php

@@ -151,6 +151,7 @@
 
   <div class="c-slide1">
    <div class="c-slide1__inner">
+    <!--
     <div class="c-slide1__item">
      <a href="/Impressed/">
       <div class="c-slide1__img">
@@ -177,6 +178,7 @@
       </div>
      </a>
     </div>
+    -->
     <!--
     <div class="c-slide1__item">
      <a href="#">