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: #fff2e5;
  60.   }
  61. .slide_b div:nth-of-type(2){ /* 背景色 */
  62.   background-color: #e5ffe5;
  63.   }
  64. .slide_b div:nth-of-type(3){ /* 背景色 */
  65.   background-color: #f8f4e6;
  66.   }
  67. .slide_b div:nth-of-type(4){ /* 背景色 */
  68.   background-color: #f7efff;
  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.   color: #778899;
  146.   }
  147. </style>
  148.           
  149. <html lang="ja">
  150.   <head>
  151.     <meta charset="UTF-8">
  152.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  153.       <title>スライドショー</title>
  154.     <link rel="stylesheet" href="styles.css">
  155.   </head>
  156. <body>
  157. <!-- スライドの外枠 -->
  158. <div class="slide-wrapper_b">
  159. <!-- スライド（コンテンツ） -->
  160.   <div id="slide_b" class="slide_b">
  161.     {#<div>
  162.         <p class="p_example_sm25_sl_b">遠赤外線ヒーター【電気】<br>
  163.         <a href="https://www.nakatomishop.com/products/detail/1400">
  164.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL1.png" alt="Image 1"></a>
  165.         <a href="https://www.nakatomishop.com/products/detail/1401">
  166.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL2.png" alt="Image 1"></a>
  167.         <a href="https://www.nakatomishop.com/products/detail/1402">
  168.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL3.png" alt="Image 1"></a>
  169.         <a href="https://www.nakatomishop.com/products/detail/1403">
  170.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL4.png" alt="Image 1"></a>
  171.         <a href="https://www.nakatomishop.com/products/detail/245">
  172.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL5.png" alt="Image 1"></a>     
  173.         <a href="https://www.nakatomishop.com/products/detail/246">
  174.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL6.png" alt="Image 1"></a>
  175.         </p>
  176.     </div>#}
  177.     <div>
  178.         <p class="p_example_sm25_sl_b">電気ファンヒーター/灯油ヒーター<br>
  179.         <a href="https://www.nakatomishop.com/products/list?category_id=3">
  180.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/heater_top.png" alt="Image 1"></a>    
  181.         <a href="https://www.nakatomishop.com/products/detail/247">
  182.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL1.png" alt="Image 1"></a>
  183.         <a href="https://www.nakatomishop.com/products/detail/248">
  184.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL2.png" alt="Image 1"></a>
  185.         <a href="https://www.nakatomishop.com/products/detail/250">
  186.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL3.png" alt="Image 1"></a>
  187.         <a href="https://www.nakatomishop.com/products/detail/534">
  188.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL4.png" alt="Image 1"></a>       
  189.         <a href="https://www.nakatomishop.com/products/detail/705">
  190.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL5.png" alt="Image 1"></a>      
  191.         </p>
  192.     </div>
  193.     <div>
  194.         <p class="p_example_sm25_sl_b">一般（台所）用換気扇<br>
  195.         <a href="https://www.nakatomishop.com/products/list?category_id=101">
  196.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/ventilation_fan.png" alt="Image 1"></a>        
  197.         <a href="https://www.nakatomishop.com/products/detail/1404">
  198.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL1.png" alt="Image 1"></a>
  199.         <a href="https://www.nakatomishop.com/products/detail/1405">
  200.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL2.png" alt="Image 1"></a>
  201.         <a href="https://www.nakatomishop.com/products/detail/1406">
  202.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL3.png" alt="Image 1"></a>
  203.         <a href="https://www.nakatomishop.com/products/detail/1407">
  204.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL4.png" alt="Image 1"></a>       
  205.         <a href="https://www.nakatomishop.com/products/detail/1408">
  206.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL5.png" alt="Image 1"></a>    
  207.         </p>
  208.     </div>
  209.         <div>
  210.         <p class="p_example_sm25_sl_b">冬でも使える・役立つ製品<br>  
  211.         <a href="https://www.nakatomishop.com/products/list?category_id=100">
  212.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL1.png" alt="Image 1"></a>
  213.         <a href="https://www.nakatomishop.com/products/detail/1373">
  214.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL2.png" alt="Image 1"></a>
  215.         <a href="https://www.nakatomishop.com/products/list?category_id=88">
  216.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL3.png" alt="Image 1"></a>
  217.         <a href="https://www.nakatomishop.com/products/list?category_id=30">
  218.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL4.png" alt="Image 1"></a>       
  219.         <a href="https://www.nakatomishop.com/products/detail/1365">
  220.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL5.png" alt="Image 1"></a>          
  221.         <a href="https://www.nakatomishop.com/products/detail/1366">
  222.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL6.png" alt="Image 1"></a>          
  223.         </p>
  224.     </div>
  225.     <div>
  226.         <p class="p_example_sm25_sl_b">除湿機<br>  
  227.         <a href="https://www.nakatomishop.com/products/detail/1372">
  228.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL1.png" alt="Image 1"></a>
  229.         <a href="https://www.nakatomishop.com/products/detail/106">
  230.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL2.png" alt="Image 1"></a>
  231.         <a href="https://www.nakatomishop.com/products/detail/108">
  232.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL3.png" alt="Image 1"></a>
  233.         <a href="https://www.nakatomishop.com/products/detail/668">
  234.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL4.png" alt="Image 1"></a>       
  235.         <a href="https://www.nakatomishop.com/products/detail/667">
  236.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL5.png" alt="Image 1"></a>          
  237.         <a href="https://www.nakatomishop.com/products/detail/109">
  238.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL6.png" alt="Image 1"></a>          
  239.         </p>
  240.     </div>
  241.     <div>    
  242.         <p class="p_example_sm25_sl_b">ビッグファン<br>
  243.         <a href="https://www.nakatomishop.com/products/list?category_id=28">
  244.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL_POP.png" alt="Image 1"></a>        
  245.         <a href="https://www.nakatomishop.com/products/detail/1376">
  246.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL1.png" alt="Image 1"></a>
  247.         <a href="https://www.nakatomishop.com/products/detail/1361">
  248.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL2.png" alt="Image 1"></a>
  249.         <a href="https://www.nakatomishop.com/products/detail/1362">
  250.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL3.png" alt="Image 1"></a>
  251.         <a href="https://www.nakatomishop.com/products/detail/1363">
  252.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL4.png" alt="Image 1"></a>       
  253.         <a href="https://www.nakatomishop.com/products/detail/1360">
  254.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL5.png" alt="Image 1"></a>    
  255.         </p>
  256.     </div>
  257.     <div>
  258.         <p class="p_example_sm25_sl_b">冬でも使える・役立つ製品<br>  
  259.         <a href="https://www.nakatomishop.com/products/list?category_id=100">
  260.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL1.png" alt="Image 1"></a>
  261.         <a href="https://www.nakatomishop.com/products/detail/1373">
  262.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL2.png" alt="Image 1"></a>
  263.         <a href="https://www.nakatomishop.com/products/list?category_id=88">
  264.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL3.png" alt="Image 1"></a>
  265.         <a href="https://www.nakatomishop.com/products/list?category_id=30">
  266.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL4.png" alt="Image 1"></a>       
  267.         <a href="https://www.nakatomishop.com/products/detail/1365">
  268.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL5.png" alt="Image 1"></a>          
  269.         <a href="https://www.nakatomishop.com/products/detail/1366">
  270.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL6.png" alt="Image 1"></a>          
  271.         </p>
  272.     </div>
  273.     <div>
  274.         <p class="p_example_sm25_sl_b">エアーコンプレッサー<br>  
  275.         <a href="https://www.nakatomishop.com/products/detail/721">
  276.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL1.png" alt="Image 1"></a>
  277.         <a href="https://www.nakatomishop.com/products/detail/711">
  278.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL2.png" alt="Image 1"></a>
  279.         <a href="https://www.nakatomishop.com/products/detail/712">
  280.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL3.png" alt="Image 1"></a>
  281.         <a href="https://www.nakatomishop.com/products/detail/713">
  282.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL4.png" alt="Image 1"></a>       
  283.         <a href="https://www.nakatomishop.com/products/detail/714">
  284.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL5.png" alt="Image 1"></a>          
  285.         <a href="https://www.nakatomishop.com/products/detail/715">
  286.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL6.png" alt="Image 1"></a>          
  287.         </p>
  288.     </div>
  289.     <div>
  290.         <p class="p_example_sm25_sl_b">SHOP information<br>  
  291.         <a href="https://www.nakatomi-sangyo.com/index.html">
  292.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL5.png" alt="Image 1"></a>
  293.         <a href="https://www.nakatomi-sangyo.com/catalog/index.html">
  294.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod//merchandiseimage/25winter/2025winter_catalog.png" alt="Image 1"></a>       
  295.         <a href="https://www.nakatomishop.com/user_data/3nenhosyoukiyaku">
  296.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL3.png" alt="Image 1"></a>
  297.         <a href="https://www.nakatomishop.com/entry">
  298.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL4.png" alt="Image 1"></a>  
  299.         <a href="https://page.line.me/420khjyx?openQrModal=true">
  300.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL2.png" alt="Image 1"></a>
  301.         <a href="https://www.nakatomishop.com/user_data/2025spop">
  302.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_model.png" alt="Image 1"></a>              
  303.         <a href="https://www.nakatomishop.com/guide">
  304.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/INFO_SL1.png" alt="Image 1"></a>
  305.         </p> 
  306.     </div>
  307.   </div>
  308.     <!-- 左右のボタン -->
  309.     <span id="prev_b" class="prev_b"></span>
  310.     <span id="next_b" class="next_b"></span>
  311.     <!-- インジケーター -->
  312.     <ul class="indicator_b" id="indicator_b">
  313.       <li class="list_b"></li>
  314.       <li class="list_b"></li>
  315.       <li class="list_b"></li>
  316.       <li class="list_b"></li>
  317.       <li class="list_b"></li>
  318.       <li class="list_b"></li>
  319.       <li class="list_b"></li>
  320.       <li class="list_b"></li>
  321.     </ul>
  322. </div>    
  324. </body>
  325. </html>
  326. <script>
  327.   const slide_b = document.getElementById('slide_b');
  328.   const prev_b = document.getElementById('prev_b');
  329.   const next_b = document.getElementById('next_b');
  330.   const indicator_b = document.getElementById('indicator_b');
  331.   const lists_b = document.querySelectorAll('.list_b');
  332.   const totalSlides_b = lists_b.length;
  333.   let count_b = 0;
  334.   let autoPlayInterval_b;
  335.   function updateListBackground_b() {
  336.     for (let i = 0; i < lists_b.length; i++) {
  337.     lists_b[i].style.backgroundColor = i === count_b % totalSlides_b ? '#000' : '#fff';
  338.   }
  339. }
  340. function nextClick_b() {
  341.   slide_b.classList.remove(`slide_b${count_b % totalSlides_b + 1}`);
  342.   count_b++;
  343.   slide_b.classList.add(`slide_b${count_b % totalSlides_b + 1}`);
  344.   updateListBackground_b();
  345. }
  346. function prevClick_b() {
  347.   slide_b.classList.remove(`slide_b${count_b % totalSlides_b + 1}`);
  348.   count_b--;
  349.   if (count_b < 0) count_b = totalSlides_b - 1;
  350.   slide_b.classList.add(`slide_b${count_b % totalSlides_b + 1}`);
  351.   updateListBackground_b();
  352. }
  353. function startAutoPlay() {
  354.   autoPlayInterval_b = setInterval(nextClick_b, 8000);
  355. }
  356. function resetAutoPlayInterval() {
  357.   clearInterval(autoPlayInterval_b);
  358.   startAutoPlay();
  359. }
  360. prev_b.addEventListener('click', () => {
  361.   prevClick_b();
  362.   resetAutoPlayInterval();
  363. });
  364. next_b.addEventListener('click', () => {
  365.   nextClick_b();
  366.   resetAutoPlayInterval();
  367. });
  368. indicator_b.addEventListener('click', (event_b) => {
  369.   if (event_b.target_b.classList.contains('list_b')) {
  370.   const index_b = Array.from(lists_b).indexOf(event_b.target_b);
  371.     slide_b.classList.remove(`slide_b${count_b % totalSlides_b + 1}`);
  372.     count_b = index_b;
  373.     slide_b.classList.add(`slide_b${count_b % totalSlides_b + 1}`);
  374.     updateListBackground_b();
  375.     resetAutoPlayInterval();
  376.   }
  377. });
  378.   startAutoPlay();
  379.   </script>
  380.     
  381. {% endblock %}