app/template/default/Block/developsample3.twig line 1

Open in your IDE?
  1. {% block main %}
  3. <style>
  4. *,body,ul {
  5.   margin: 0;
  6.   padding: 0;
  7.   }
  8. li {
  9.   list-style: none;
  10.   }
  11. /* ↓ スライドの外枠 */
  12. .slide-wrapper_b {
  13.   width: 100%;
  14.   height: auto;
  15.   position: relative;
  16.   overflow: hidden; /* はみ出したスライドを隠す */
  17.   }
  18. /*  ↓ スライド（コンテンツ） */
  19. .slide_b { /*スライド全体 */
  20.   width: 800%;
  21.   height: 100%;
  22.   display: flex;
  23.   transition: all 3.0s; 
  24.   }
  25. .slide_b div { /* スライド */
  26.   width: 12.5%;
  27.   display: flex;
  28.   text-align: center;
  29.   justify-content: center;
  30.   align-items: center;
  31.   }
  32. .slide_b1 { /* スライドさせるために必要なクラス */
  33.   transform: translateX(0);
  34.   }
  35. .slide_b2 { /* スライドさせるために必要なクラス */
  36.   transform: translateX(-12.50%);
  37.   }
  38. .slide_b3 { /* スライドさせるために必要なクラス */
  39.   transform: translateX(-25.00%);
  40.   }
  41. .slide_b4 { /* スライドさせるために必要なクラス */
  42.   transform: translateX(-37.50%);
  43.   }
  44. .slide_b5 { /* スライドさせるために必要なクラス */
  45.   transform: translateX(-50.00%);
  46.   }
  47. .slide_b6 { /* スライドさせるために必要なクラス */
  48.   transform: translateX(-62.50%);
  49.   }
  50. .slide_b7 { /* スライドさせるために必要なクラス */
  51.   transform: translateX(-75.00%);
  52.   }
  53. .slide_b8 { /* スライドさせるために必要なクラス */
  54.   transform: translateX(-87.50%);
  55.   }  
  56. .slide_b div:nth-of-type(1){ /* 背景色 */
  57. /*background-image: url("https://nakatomishop.sakura.ne.jp/prod/MailMagazine/img/sm2025_top.png");*/
  58.   background-size: cover;
  59.   background-color: #e5fff7;
  60.   }
  61. .slide_b div:nth-of-type(2){ /* 背景色 */
  62.   background-color: #efffff;
  63.   }
  64. .slide_b div:nth-of-type(3){ /* 背景色 */
  65.   background-color: #fcfcfc;
  66.   }
  67. .slide_b div:nth-of-type(4){ /* 背景色 */
  68.   background-color: #fcfcfc;
  69.   }
  70. .slide_b div:nth-of-type(5){ /* 背景色 */
  71.   background-color: #fcfcfc;
  72.   }
  73. .slide_b div:nth-of-type(6){ /* 背景色 */
  74.   background-color: #efffff;
  75.   }
  76. .slide_b div:nth-of-type(7){ /* 背景色 */
  77.   background-color: #f7efff;
  78.   }
  79. .slide_b div:nth-of-type(8){ /* 背景色 */
  80.   background-color: #ffffe5;
  81.   }
  82. /* ↓ 左右のボタン */
  83. .next_b {
  84.   position: absolute;
  85.   width: 15px;
  86.   height: 15px;
  87.   right: 10px;
  88.   bottom: 50%;
  89.   z-index: 10;
  90.   cursor: pointer;
  91.   border-top: solid 3px #000;
  92.   border-right: solid 3px #000;
  93.   -webkit-transform: rotate(45deg) translateY(50%);
  94.   transform: rotate(45deg) translateY(50%);
  95.   }
  96. .prev_b {
  97.   position: absolute;
  98.   width: 15px;
  99.   height: 15px;
  100.   left: 25px;
  101.   bottom: 50%;
  102.   z-index: 10;
  103.   cursor: pointer;
  104.   border-top: solid 3px #000;
  105.   border-right: solid 3px #000;
  106.   -webkit-transform: rotate(-135deg) translateY(-50%);
  107.   transform: rotate(-135deg) translateY(-50%);
  108.   }
  109. /* ↓ インジケーター */
  110. .indicator_b {
  111.   width: 100%;
  112.   position: absolute;
  113.   bottom: 5px;
  114.   display: flex;
  115.   column-gap: 18px;
  116.   z-index: 10;
  117.   justify-content: center;
  118.   align-items: center;
  119.   }
  120. .indicator_b li {
  121.   width: 10px;
  122.   height: 10px;
  123.   border-radius: 50%;
  124.   list-style: none;
  125.   background-color: #fff;
  126.   border: 2px #dcdcdc solid;
  127.   cursor: pointer;
  128.   }
  129. .indicator_b li:first-of-type {
  130.   background-color: #000;
  131.   }
  132. .fit-picture_sl {
  133.   cursor: pointer; 
  134.   width: 10%;
  135.   padding-top: 0.5%;
  136.   padding-bottom: 1%;
  137.   padding-right: 1%;
  138.   margin-left: -0.4%;
  139.   }
  140. .p_example_sm25_sl_b {
  141.   font-size: 21px;
  142.   font-weight: 700;
  143.   text-align: center;
  144.   padding-top: 4px;
  145.   }
  146. </style>
  147.           
  148. <html lang="ja">
  149.   <head>
  150.     <meta charset="UTF-8">
  151.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  152.       <title>スライドショー</title>
  153.     <link rel="stylesheet" href="styles.css">
  154.   </head>
  155. <body>
  156. <!-- スライドの外枠 -->
  157. <div class="slide-wrapper_b">
  158. <!-- スライド（コンテンツ） -->
  159.   <div id="slide_b" class="slide_b">
  160.     <div>
  161.         <p class="p_example_sm25_sl_b">スポットクーラー R32 NEW<br>
  162.         <a href="https://www.nakatomishop.com/products/list?category_id=76">
  163.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP_POP_1.png" alt="Image 1"></a>
  164.         <a href="https://www.nakatomishop.com/products/detail/1364">
  165.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP1.png" alt="Image 1"></a>
  166.         <a href="https://www.nakatomishop.com/products/detail/1365">
  167.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP2.png" alt="Image 1"></a>
  168.         <a href="https://www.nakatomishop.com/products/detail/1366">
  169.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP3.png" alt="Image 1"></a>
  170.         <a href="https://www.nakatomishop.com/products/detail/1367">
  171.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP4.png" alt="Image 1"></a>     
  172.         <a href="https://www.nakatomishop.com/products/detail/1369">
  173.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP5.png" alt="Image 1"></a>
  174.         </p>
  175.     </div>
  176.     <div>
  177.         <p class="p_example_sm25_sl_b">スタンダードモデル<br>
  178.         <a href="https://www.nakatomishop.com/products/list?category_id=94">
  179.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/STANDARD25_TOP_POP1.png" alt="Image 1"></a>    
  180.         <a href="https://www.nakatomishop.com/products/detail/1336">
  181.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/STANDARD25_TOP1.png" alt="Image 1"></a>
  182.         <a href="https://www.nakatomishop.com/products/detail/1337">
  183.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/STANDARD25_TOP2.png" alt="Image 1"></a>
  184.         <a href="https://www.nakatomishop.com/products/detail/1338">
  185.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/STANDARD25_TOP3.png" alt="Image 1"></a>
  186.         <a href="https://www.nakatomishop.com/products/detail/1339">
  187.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/STANDARD25_TOP4.png" alt="Image 1"></a>       
  188.         <a href="https://www.nakatomishop.com/products/detail/1340">
  189.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/STANDARD25_TOP5.png" alt="Image 1"></a>      
  190.         </p>
  191.     </div>
  192.     <div>
  193.         <p class="p_example_sm25_sl_b">ビッグファン<br>
  194.         <a href="https://www.nakatomishop.com/products/list?category_id=28">
  195.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL_POP.png" alt="Image 1"></a>        
  196.         <a href="https://www.nakatomishop.com/products/detail/1376">
  197.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL1.png" alt="Image 1"></a>
  198.         <a href="https://www.nakatomishop.com/products/detail/1361">
  199.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL2.png" alt="Image 1"></a>
  200.         <a href="https://www.nakatomishop.com/products/detail/1362">
  201.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL3.png" alt="Image 1"></a>
  202.         <a href="https://www.nakatomishop.com/products/detail/1363">
  203.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL4.png" alt="Image 1"></a>       
  204.         <a href="https://www.nakatomishop.com/products/detail/1360">
  205.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL5.png" alt="Image 1"></a>    
  206.         </p>
  207.     </div>
  208.     <div>
  209.         <p class="p_example_sm25_sl_b">工場扇<br>  
  210.         <a href="https://www.nakatomishop.com/products/list?category_id=17">
  211.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/FACTORY_FAN_TOP_POP.png" alt="Image 1"></a>
  212.         <a href="https://www.nakatomishop.com/products/detail/1330">
  213.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/FACTORY_FAN_SL1" alt="Image 1"></a>
  214.         <a href="https://www.nakatomishop.com/products/detail/1327">
  215.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/FACTORY_FAN_SL2.png" alt="Image 1"></a>
  216.         <a href="https://www.nakatomishop.com/products/detail/1331">
  217.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/FACTORY_FAN_SL3.png" alt="Image 1"></a>       
  218.         <a href="https://www.nakatomishop.com/products/detail/1328">
  219.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/FACTORY_FAN_SL4.png" alt="Image 1"></a>          
  220.         <a href="https://www.nakatomishop.com/products/detail/1329">
  221.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/FACTORY_FAN_SL5.png" alt="Image 1"></a>          
  222.         </p>
  223.     </div>
  224.     <div>
  225.         <p class="p_example_sm25_sl_b">循環送風機 / 大型送風機<br>  
  226.         <a href="https://www.nakatomishop.com/products/detail/1351">
  227.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/CIR_LAR_TOP_POP.png" alt="Image 1"></a>
  228.         <a href="https://www.nakatomishop.com/products/detail/1351">
  229.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/CIR_LAR_SL1.png" alt="Image 1"></a>
  230.         <a href="https://www.nakatomishop.com/products/detail/1351">
  231.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/CIR_LAR_SL2.png" alt="Image 1"></a>
  232.         <a href="https://www.nakatomishop.com/products/detail/1351">
  233.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/CIR_LAR_SL3.png" alt="Image 1"></a>       
  234.         <a href="https://www.nakatomishop.com/products/detail/1351">
  235.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/CIR_LAR_SL4.png" alt="Image 1"></a>          
  236.         <a href="https://www.nakatomishop.com/products/detail/1351">
  237.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/CIR_LAR_SL5.png" alt="Image 1"></a>          
  238.         </p>
  239.     </div>
  240.         <div>
  241.         <p class="p_example_sm25_sl_b">ミスト発生機 / 冷風扇<br>  
  242.         <a href="https://www.nakatomishop.com/products/detail/1377">
  243.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/MIST_COOL_SL1.png" alt="Image 1"></a>
  244.         <a href="https://www.nakatomishop.com/products/detail/1378">
  245.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/MIST_COOL_SL2.png" alt="Image 1"></a>
  246.         <a href="https://www.nakatomishop.com/products/detail/1379">
  247.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/MIST_COOL_SL3.png" alt="Image 1"></a>
  248.         <a href="https://www.nakatomishop.com/products/detail/436">
  249.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/MIST_COOL_SL4.png" alt="Image 1"></a>       
  250.         <a href="https://www.nakatomishop.com/products/detail/437">
  251.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/MIST_COOL_SL5.png" alt="Image 1"></a>          
  252.         <a href="https://www.nakatomishop.com/products/detail/438">
  253.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/MIST_COOL_SL6.png" alt="Image 1"></a>          
  254.         </p>
  255.     </div>
  256.     <div>
  257.         <p class="p_example_sm25_sl_b">除湿機<br>  
  258.         <a href="https://www.nakatomishop.com/products/detail/1372">
  259.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL1.png" alt="Image 1"></a>
  260.         <a href="https://www.nakatomishop.com/products/detail/106">
  261.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL2.png" alt="Image 1"></a>
  262.         <a href="https://www.nakatomishop.com/products/detail/108">
  263.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL3.png" alt="Image 1"></a>
  264.         <a href="https://www.nakatomishop.com/products/detail/668">
  265.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL4.png" alt="Image 1"></a>       
  266.         <a href="https://www.nakatomishop.com/products/detail/667">
  267.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL5.png" alt="Image 1"></a>          
  268.         <a href="https://www.nakatomishop.com/products/detail/109">
  269.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL6.png" alt="Image 1"></a>          
  270.         </p>
  271.     </div>
  272.     <div>
  273.         <p class="p_example_sm25_sl_b">SHOP information<br>  
  274.         <a href="https://www.nakatomi-sangyo.com/index.html">
  275.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL5.png" alt="Image 1"></a>
  276.         <a href="https://www.nakatomi-sangyo.com/catalog/index.html">
  277.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/25CATALOG_TOP.png" alt="Image 1"></a>       
  278.         <a href="https://www.nakatomishop.com/user_data/3nenhosyoukiyaku">
  279.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL3.png" alt="Image 1"></a>
  280.         <a href="https://www.nakatomishop.com/entry">
  281.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL4.png" alt="Image 1"></a>  
  282.         <a href="https://page.line.me/420khjyx?openQrModal=true">
  283.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL2.png" alt="Image 1"></a>
  284.         <a href="https://www.nakatomishop.com/user_data/2025spop">
  285.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_model.png" alt="Image 1"></a>              
  286.         <a href="https://www.nakatomishop.com/guide">
  287.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL1.png" alt="Image 1"></a>
  288.         </p> 
  289.     </div>
  290.   </div>
  291.     <!-- 左右のボタン -->
  292.     <span id="prev_b" class="prev_b"></span>
  293.     <span id="next_b" class="next_b"></span>
  294.     <!-- インジケーター -->
  295.     <ul class="indicator_b" id="indicator_b">
  296.       <li class="list_b"></li>
  297.       <li class="list_b"></li>
  298.       <li class="list_b"></li>
  299.       <li class="list_b"></li>
  300.       <li class="list_b"></li>
  301.       <li class="list_b"></li>
  302.       <li class="list_b"></li>
  303.       <li class="list_b"></li>
  304.     </ul>
  305. </div>    
  307. </body>
  308. </html>
  309. <script>
  310.   const slide_b = document.getElementById('slide_b');
  311.   const prev_b = document.getElementById('prev_b');
  312.   const next_b = document.getElementById('next_b');
  313.   const indicator_b = document.getElementById('indicator_b');
  314.   const lists_b = document.querySelectorAll('.list_b');
  315.   const totalSlides_b = lists_b.length;
  316.   let count_b = 0;
  317.   let autoPlayInterval_b;
  318.   function updateListBackground_b() {
  319.     for (let i = 0; i < lists_b.length; i++) {
  320.     lists_b[i].style.backgroundColor = i === count_b % totalSlides_b ? '#000' : '#fff';
  321.   }
  322. }
  323. function nextClick_b() {
  324.   slide_b.classList.remove(`slide_b${count_b % totalSlides_b + 1}`);
  325.   count_b++;
  326.   slide_b.classList.add(`slide_b${count_b % totalSlides_b + 1}`);
  327.   updateListBackground_b();
  328. }
  329. function prevClick_b() {
  330.   slide_b.classList.remove(`slide_b${count_b % totalSlides_b + 1}`);
  331.   count_b--;
  332.   if (count_b < 0) count_b = totalSlides_b - 1;
  333.   slide_b.classList.add(`slide_b${count_b % totalSlides_b + 1}`);
  334.   updateListBackground_b();
  335. }
  336. function startAutoPlay() {
  337.   autoPlayInterval_b = setInterval(nextClick_b, 6000);
  338. }
  339. function resetAutoPlayInterval() {
  340.   clearInterval(autoPlayInterval_b);
  341.   startAutoPlay();
  342. }
  343. prev_b.addEventListener('click', () => {
  344.   prevClick_b();
  345.   resetAutoPlayInterval();
  346. });
  347. next_b.addEventListener('click', () => {
  348.   nextClick_b();
  349.   resetAutoPlayInterval();
  350. });
  351. indicator_b.addEventListener('click', (event_b) => {
  352.   if (event_b.target_b.classList.contains('list_b')) {
  353.   const index_b = Array.from(lists_b).indexOf(event_b.target_b);
  354.     slide_b.classList.remove(`slide_b${count_b % totalSlides_b + 1}`);
  355.     count_b = index_b;
  356.     slide_b.classList.add(`slide_b${count_b % totalSlides_b + 1}`);
  357.     updateListBackground_b();
  358.     resetAutoPlayInterval();
  359.   }
  360. });
  361.   startAutoPlay();
  362.   </script>
  363.     
  364. {% endblock %}