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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. *,body,ul {
  4.   margin: 0;
  5.   padding: 0;
  6.   }
  7. li {
  8.   list-style: none;
  9.   }
  10. /* ↓ スライドの外枠 */
  11. .slide-wrapper_b {
  12.   width: 100%;
  13.   height: auto;
  14.   position: relative;
  15.   overflow: hidden; /* はみ出したスライドを隠す */
  16.   }
  17. /*  ↓ スライド（コンテンツ） */
  18. .slide_b { /*スライド全体 */
  19.   width: 800%;
  20.   height: 100%;
  21.   display: flex;
  22.   transition: all 3.0s; 
  23.   }
  24. .slide_b div { /* スライド */
  25.   width: 12.5%;
  26.   display: flex;
  27.   text-align: center;
  28.   justify-content: center;
  29.   align-items: center;
  30.   }
  31. .slide_b1 { /* スライドさせるために必要なクラス */
  32.   transform: translateX(0);
  33.   }
  34. .slide_b2 { /* スライドさせるために必要なクラス */
  35.   transform: translateX(-12.50%);
  36.   }
  37. .slide_b3 { /* スライドさせるために必要なクラス */
  38.   transform: translateX(-25.00%);
  39.   }
  40. .slide_b4 { /* スライドさせるために必要なクラス */
  41.   transform: translateX(-37.50%);
  42.   }
  43. .slide_b5 { /* スライドさせるために必要なクラス */
  44.   transform: translateX(-50.00%);
  45.   }
  46. .slide_b6 { /* スライドさせるために必要なクラス */
  47.   transform: translateX(-62.50%);
  48.   }
  49. .slide_b7 { /* スライドさせるために必要なクラス */
  50.   transform: translateX(-75.00%);
  51.   }
  52. .slide_b8 { /* スライドさせるために必要なクラス */
  53.   transform: translateX(-87.50%);
  54.   }  
  55. .slide_b div:nth-of-type(1){ /* 背景色 */
  56. /*background-image: url("https://nakatomishop.sakura.ne.jp/prod/MailMagazine/img/sm2025_top.png");*/
  57.   background-size: cover;
  58.   background-color: #fff2e5;
  59.   }
  60. .slide_b div:nth-of-type(2){ /* 背景色 */
  61.   background-color: #e5ffe5;
  62.   }
  63. .slide_b div:nth-of-type(3){ /* 背景色 */
  64.   background-color: #f8f4e6;
  65.   }
  66. .slide_b div:nth-of-type(4){ /* 背景色 */
  67.   background-color: #f7efff;
  68.   }
  69. .slide_b div:nth-of-type(5){ /* 背景色 */
  70.   background-color: #fcfcfc;
  71.   }
  72. .slide_b div:nth-of-type(6){ /* 背景色 */
  73.   background-color: #efffff;
  74.   }
  75. .slide_b div:nth-of-type(7){ /* 背景色 */
  76.   background-color: #f7efff;
  77.   }
  78. .slide_b div:nth-of-type(8){ /* 背景色 */
  79.   background-color: #ffffe5;
  80.   }
  81. /* ↓ 左右のボタン */
  82. .next_b {
  83.   position: absolute;
  84.   width: 15px;
  85.   height: 15px;
  86.   right: 10px;
  87.   bottom: 50%;
  88.   z-index: 10;
  89.   cursor: pointer;
  90.   border-top: solid 3px #000;
  91.   border-right: solid 3px #000;
  92.   -webkit-transform: rotate(45deg) translateY(50%);
  93.   transform: rotate(45deg) translateY(50%);
  94.   }
  95. .prev_b {
  96.   position: absolute;
  97.   width: 15px;
  98.   height: 15px;
  99.   left: 25px;
  100.   bottom: 50%;
  101.   z-index: 10;
  102.   cursor: pointer;
  103.   border-top: solid 3px #000;
  104.   border-right: solid 3px #000;
  105.   -webkit-transform: rotate(-135deg) translateY(-50%);
  106.   transform: rotate(-135deg) translateY(-50%);
  107.   }
  108. /* ↓ インジケーター */
  109. .indicator_b {
  110.   width: 100%;
  111.   position: absolute;
  112.   bottom: 5px;
  113.   display: flex;
  114.   column-gap: 18px;
  115.   z-index: 10;
  116.   justify-content: center;
  117.   align-items: center;
  118.   }
  119. .indicator_b li {
  120.   width: 10px;
  121.   height: 10px;
  122.   border-radius: 50%;
  123.   list-style: none;
  124.   background-color: #fff;
  125.   border: 2px #dcdcdc solid;
  126.   cursor: pointer;
  127.   }
  128. .indicator_b li:first-of-type {
  129.   background-color: #000;
  130.   }
  131. .fit-picture_sl {
  132.   cursor: pointer; 
  133.   width: 10%;
  134.   padding-top: 0.5%;
  135.   padding-bottom: 1%;
  136.   padding-right: 1%;
  137.   margin-left: -0.4%;
  138.   }
  139. .p_example_sm25_sl_b {
  140.   font-size: 21px;
  141.   font-weight: 700;
  142.   text-align: center;
  143.   padding-top: 4px;
  144.   color: #778899;
  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">遠赤外線ヒーター【電気】<br>
  162.         <a href="https://www.nakatomishop.com/products/detail/1400">
  163.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL1.png" alt="Image 1"></a>
  164.         <a href="https://www.nakatomishop.com/products/detail/1401">
  165.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL2.png" alt="Image 1"></a>
  166.         <a href="https://www.nakatomishop.com/products/detail/1402">
  167.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL3.png" alt="Image 1"></a>
  168.         <a href="https://www.nakatomishop.com/products/detail/1403">
  169.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL4.png" alt="Image 1"></a>
  170.         <a href="https://www.nakatomishop.com/products/detail/245">
  171.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL5.png" alt="Image 1"></a>     
  172.         <a href="https://www.nakatomishop.com/products/detail/246">
  173.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH_IFH_SL6.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=3">
  179.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/heater_top.png" alt="Image 1"></a>    
  180.         <a href="https://www.nakatomishop.com/products/detail/247">
  181.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL1.png" alt="Image 1"></a>
  182.         <a href="https://www.nakatomishop.com/products/detail/248">
  183.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL2.png" alt="Image 1"></a>
  184.         <a href="https://www.nakatomishop.com/products/detail/250">
  185.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL3.png" alt="Image 1"></a>
  186.         <a href="https://www.nakatomishop.com/products/detail/534">
  187.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL4.png" alt="Image 1"></a>       
  188.         <a href="https://www.nakatomishop.com/products/detail/705">
  189.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/HEATER_SL5.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=101">
  195.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/ventilation_fan.png" alt="Image 1"></a>        
  196.         <a href="https://www.nakatomishop.com/products/detail/1404">
  197.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL1.png" alt="Image 1"></a>
  198.         <a href="https://www.nakatomishop.com/products/detail/1405">
  199.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL2.png" alt="Image 1"></a>
  200.         <a href="https://www.nakatomishop.com/products/detail/1406">
  201.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL3.png" alt="Image 1"></a>
  202.         <a href="https://www.nakatomishop.com/products/detail/1407">
  203.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_FAN_SL4.png" alt="Image 1"></a>       
  204.         <a href="https://www.nakatomishop.com/products/detail/1408">
  205.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/VENTILATION_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=100">
  211.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL1.png" alt="Image 1"></a>
  212.         <a href="https://www.nakatomishop.com/products/detail/1373">
  213.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL2.png" alt="Image 1"></a>
  214.         <a href="https://www.nakatomishop.com/products/list?category_id=88">
  215.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL3.png" alt="Image 1"></a>
  216.         <a href="https://www.nakatomishop.com/products/list?category_id=30">
  217.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL4.png" alt="Image 1"></a>       
  218.         <a href="https://www.nakatomishop.com/products/detail/1365">
  219.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL5.png" alt="Image 1"></a>          
  220.         <a href="https://www.nakatomishop.com/products/detail/1366">
  221.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/25WINTER_etc_SL6.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/1372">
  227.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL1.png" alt="Image 1"></a>
  228.         <a href="https://www.nakatomishop.com/products/detail/106">
  229.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL2.png" alt="Image 1"></a>
  230.         <a href="https://www.nakatomishop.com/products/detail/108">
  231.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL3.png" alt="Image 1"></a>
  232.         <a href="https://www.nakatomishop.com/products/detail/668">
  233.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL4.png" alt="Image 1"></a>       
  234.         <a href="https://www.nakatomishop.com/products/detail/667">
  235.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL5.png" alt="Image 1"></a>          
  236.         <a href="https://www.nakatomishop.com/products/detail/109">
  237.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DEHUMIDIFIER_SL6.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/list?category_id=28">
  243.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL_POP.png" alt="Image 1"></a>        
  244.         <a href="https://www.nakatomishop.com/products/detail/1376">
  245.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL1.png" alt="Image 1"></a>
  246.         <a href="https://www.nakatomishop.com/products/detail/1361">
  247.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL2.png" alt="Image 1"></a>
  248.         <a href="https://www.nakatomishop.com/products/detail/1362">
  249.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL3.png" alt="Image 1"></a>
  250.         <a href="https://www.nakatomishop.com/products/detail/1363">
  251.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL4.png" alt="Image 1"></a>       
  252.         <a href="https://www.nakatomishop.com/products/detail/1360">
  253.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/BIG_FAN_SL5.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/721">
  259.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL1.png" alt="Image 1"></a>
  260.         <a href="https://www.nakatomishop.com/products/detail/711">
  261.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL2.png" alt="Image 1"></a>
  262.         <a href="https://www.nakatomishop.com/products/detail/712">
  263.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL3.png" alt="Image 1"></a>
  264.         <a href="https://www.nakatomishop.com/products/detail/713">
  265.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL4.png" alt="Image 1"></a>       
  266.         <a href="https://www.nakatomishop.com/products/detail/714">
  267.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_SL5.png" alt="Image 1"></a>          
  268.         <a href="https://www.nakatomishop.com/products/detail/715">
  269.           <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/AIRTEC_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/25winter/2025winter_catalog.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, 8000);
  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. {% endblock %}