Merge branch 'master' of http://git.choozmo.com:3000/choozmo/hhh-home-mb

js/index.js

@@ -7,7 +7,7 @@ $(".sec-01__slider").slick({
     let result;
       $.ajax({
           method: "GET",
-          url: "../json/data.json",
+          url: "http://127c-2001-b011-a003-3829-9578-a4a5-7554-1502.ngrok.io/genjson",
           dataType: "json",
       }).done(function (msg) {
           result = [...msg];
@@ -25,11 +25,7 @@ $(".sec-01__slider").slick({
 
       function renderSec00(data) {
           let temp = data[0]['data'];
-          let str = '';
-          for(let i = 0; i < temp.length; i++){
-              str+= `<div class="sec-00__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
-          }
-          $('.sec-00__slider').html(str);
+          renderBannerStr('sec-00__slider', temp);
           $(".sec-00__slider").slick({
             dots: false,
             speed: 800,
@@ -39,11 +35,8 @@ $(".sec-01__slider").slick({
 
       function renderSec02(data) {
           let temp = data[1]['data'];
+          renderBannerStr('sec-02__slider', temp);
           let str = '';
-          for(let i = 0; i < temp.length; i++){
-              str+= `<div class="sec-02__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
-          }
-          $('.sec-02__slider').html(str);
           $(".sec-02__slider").slick({
               dots: false,
               autoplay: true,
@@ -53,6 +46,15 @@ $(".sec-01__slider").slick({
           });
       }
 
+      function renderBannerStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['imgUrl']}');"></div>`
+        }
+        console.log(str);
+        $(`.${sec}`).html(str);
+    }
+
       function renderSec03(data) {
         let randomIdx = Math.floor(Math.random()*3);
         const ran = $('.sec-03__tabdiv .nav-item-link').eq(randomIdx);
@@ -179,48 +181,30 @@ $(".sec-01__slider").slick({
       }
       function renderSec10(data) {
           let temp = data[7]['data'];
-          let str = '';
-          for(let i = 0; i < temp.length; i++){
-            if(temp[i].video == 'true') {
-              str += `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-10__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-10__card__play" src="images/Play-Button.png"></div>
-                    <p class="sec-10__cardtxt">${temp[i]['description']}</p>
-                    </div>`;
-            } else {
-              str += `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-10__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"></div>
-                    <p class="sec-10__cardtxt">${temp[i]['description']}</p>
-                    </div>`;
-            }
-          }
-          $('.sec-10__slider').html(str);
-          $(".sec-10__slider").slick({
-            arrows: false,
-            slidesToShow: 1,
-            centerMode: true,
-            infinite: false,
-            dots: false,
-            centerPadding: '12px'
-          });
+          renderRecStr('sec-10', temp);
       }
       function renderSec11(data) {
           let temp = data[8]['data'];
-          let str = '';
-          for(let i = 0; i < temp.length; i++){
-            if(temp[i].video == 'true') {
-              str+= `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-11__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-11__card__play" src="images/Play-Button.png"></div>
-                    <p class="sec-11__cardtxt">${temp[i]['description']}</p>
+          renderRecStr('sec-11', temp);
+      }
+
+      function renderRecStr(sec, data) {
+        let str = '';
+          for(let i = 0; i < data.length; i++){
+            if(data[i].video == 'true') {
+              str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
+                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.png"></div>
+                    <p class="${sec}__cardtxt">${data[i]['description']}</p>
                     </div>`;
             } else {
-              str+= `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
-                    <div class="sec-11__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"></div>
-                    <p class="sec-11__cardtxt">${temp[i]['description']}</p>
+              str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
+                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"></div>
+                    <p class="${sec}__cardtxt">${data[i]['description']}</p>
                     </div>`;
             }
           }
-          $('.sec-11__slider').html(str);
-          $(".sec-11__slider").slick({
+          $(`.${sec}__slider`).html(str);
+          $(`.${sec}__slider`).slick({
             arrows: false,
             slidesToShow: 1,
             centerMode: true,