app/template/default/Block/developsample5.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_a {
  12.       width: 100%;
  13.       height: auto;
  14.       position: relative;
  15.       overflow: hidden; /* はみ出したスライドを隠す */
  16.     }
  17.     /*  ↓ スライド（コンテンツ） */
  18.     .slide_a { /*スライド全体 */
  19.       width: 500%;
  20.       height: 100%;
  21.       display: flex;
  22.       transition: all 3.0s;
  23.     }
  24.     .slide_a div { /* スライド */
  25.       width: 20.00%;
  26.       display: flex;
  27.       text-align: center;
  28.       justify-content: center;
  29.       align-items: center;
  30.     }
  31.     .slide_a1 { /* スライドさせるために必要なクラス */
  32.       transform: translateX(0);
  33.     }
  34.     .slide_a2 { /* スライドさせるために必要なクラス */
  35.       transform: translateX(-20.00%);
  36.     }
  37.     .slide_a3 { /* スライドさせるために必要なクラス */
  38.       transform: translateX(-40.00%);
  39.     }
  40.     .slide_a4 { /* スライドさせるために必要なクラス */
  41.       transform: translateX(-60.00%);
  42.     }
  43.     .slide_a5 { /* スライドさせるために必要なクラス */
  44.       transform: translateX(-80.00%);
  45.     }
  46.     .slide_a div:nth-of-type(1){ /* 背景色 */
  47.     /*background-image: url("https://nakatomishop.sakura.ne.jp/prod/MailMagazine/img/sm2025_top.png");*/
  48.       background-size: cover;
  49.       background-color: #E1F3FC;
  50.     }
  51.     .slide_a div:nth-of-type(2){ /* 背景色 */
  52.       background-color: #E1F3FC;
  53.     }
  54.     .slide_a div:nth-of-type(3){ /* 背景色 */
  55.       background-color: #E1F3FC;
  56.     }
  57.     .slide_a div:nth-of-type(4){ /* 背景色 */
  58.       background-color: #E1F3FC;
  59.     }
  60.     .slide_a div:nth-of-type(5){ /* 背景色 */
  61.       background-color: #e6e6fa;
  62.     }
  63.     /* ↓ 左右のボタン */
  64.     .next_a {
  65.       position: absolute;
  66.       width: 15px;
  67.       height: 15px;
  68.       right: 10px;
  69.       bottom: 50%;
  70.       z-index: 10;
  71.       cursor: pointer;
  72.       border-top: solid 3px #000;
  73.       border-right: solid 3px #000;
  74.       -webkit-transform: rotate(45deg) translateY(50%);
  75.       transform: rotate(45deg) translateY(50%);
  76.     }
  77.     .prev_a {
  78.       position: absolute;
  79.       width: 15px;
  80.       height: 15px;
  81.       left: 25px;
  82.       bottom: 50%;
  83.       z-index: 10;
  84.       cursor: pointer;
  85.       border-top: solid 3px #000;
  86.       border-right: solid 3px #000;
  87.       -webkit-transform: rotate(-135deg) translateY(-50%);
  88.       transform: rotate(-135deg) translateY(-50%);
  89.     }
  90.     /* ↓ インジケーター */
  91.     .indicator_a {
  92.       width: 100%;
  93.       position: absolute;
  94.       bottom: 5px;
  95.       display: flex;
  96.       column-gap: 18px;
  97.       z-index: 10;
  98.       justify-content: center;
  99.       align-items: center;
  100.     }
  101.     .indicator_a li {
  102.       width: 10px;
  103.       height: 10px;
  104.       border-radius: 50%;
  105.       list-style: none;
  106.       background-color: #fff;
  107.       border: 2px #dcdcdc solid;
  108.       cursor: pointer;
  109.     }
  110.     .indicator_a li:first-of-type {
  111.       background-color: #000;
  112.     }
  113.     .fit-picture_sl {
  114.       cursor: pointer; 
  115.       width: 10%;
  116.       padding-top: 0.5%;
  117.       padding-bottom: 1%;
  118.       padding-right: 1%;
  119.       padding-right: 1%
  120.     }
  121. .p_example_sm25_sl_a {
  122.   font-size: 21px;
  123.   font-weight: 700;
  124.   text-align: center;
  125.   padding-top: 2px;
  126. }
  127. </style>
  128.     <html lang="ja">
  129.       <head>
  130.         <meta charset="UTF-8">
  131.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  132.           <title>スライドショー</title>
  133.         <link rel="stylesheet" href="styles.css">
  134.       </head>
  135.     <body>
  136.     <!-- スライドの外枠 -->
  137.     <div class="slide-wrapper_a">
  138.     <!-- スライド（コンテンツ） -->
  139.       <div id="slide_a" class="slide_a">
  140.          <div>
  141.           <p class="p_example_sm25_sl_a">SPOT COOLER【OPTION】<br>
  142.           <a href="https://www.nakatomishop.com/products/detail/323">
  143.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_1.png" alt="Image 1"></a>
  144.           <a href="https://www.nakatomishop.com/products/detail/321">
  145.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_2.png" alt="Image 1"></a>
  146.           <a href="https://www.nakatomishop.com/products/detail/328">
  147.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_3.png" alt="Image 1"></a>
  148.           <a href="https://www.nakatomishop.com/products/detail/327">
  149.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_4.png" alt="Image 1"></a>     
  150.           <a href="https://www.nakatomishop.com/products/detail/1349">
  151.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_5.png" alt="Image 1"></a>
  152.           <a href="https://www.nakatomishop.com/products/detail/517">
  153.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_6.png" alt="Image 1"></a>
  154.            </p>
  155.         </div>
  156.         <div>
  157.           <p class="p_example_sm25_sl_a">SPOT COOLER【OPTION】<br>
  158.           <a href="https://www.nakatomishop.com/products/detail/325">
  159.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP2_1.png" alt="Image 1"></a>
  160.           <a href="https://www.nakatomishop.com/products/detail/326">
  161.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP2_2.png" alt="Image 1"></a>
  162.           <a href="https://www.nakatomishop.com/products/detail/322">
  163.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP2_3.png" alt="Image 1"></a>
  164.           <a href="https://www.nakatomishop.com/products/detail/324">
  165.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP2_4.png" alt="Image 1"></a>     
  166.           <a href="https://www.nakatomishop.com/products/detail/131">
  167.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP2_5.png" alt="Image 1"></a>
  168.           <a href="https://www.nakatomishop.com/products/detail/336">
  169.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP2_6.png" alt="Image 1"></a>
  170.            </p>
  171.         </div>
  172.         <div>
  173.           <p class="p_example_sm25_sl_a">SPOT COOLER【OPTION】<br>
  174.           <a href="https://www.nakatomishop.com/products/detail/1357">
  175.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP3_1.png" alt="Image 1"></a>
  176.           <a href="https://www.nakatomishop.com/products/detail/1358">
  177.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP3_2.png" alt="Image 1"></a>
  178.           <a href="https://www.nakatomishop.com/products/detail/1359">
  179.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP3_3.png" alt="Image 1"></a>
  180.           <a href="https://www.nakatomishop.com/products/detail/335">
  181.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP3_4.png" alt="Image 1"></a>     
  182.           <a href="https://www.nakatomishop.com/products/list?category_id=16">
  183.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_fl.png" alt="Image 1"></a>
  184.           <a href="https://www.nakatomishop.com/products/list?category_id=9">
  185.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_etc.png" alt="Image 1"></a>             
  186.            </p>
  187.         </div>
  188.         <div>
  189.           <p class="p_example_sm25_sl_a">SPOT COOLER【OPTION】<br>
  190.           <a href="https://www.nakatomishop.com/products/detail/1342">
  191.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP4_1.png" alt="Image 1"></a>
  192.           <a href="https://www.nakatomishop.com/products/detail/130">
  193.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP4_2.png" alt="Image 1"></a>
  194.           <a href="https://www.nakatomishop.com/products/detail/132">
  195.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP4_3.png" alt="Image 1"></a>
  196.           <a href="https://www.nakatomishop.com/products/detail/110">
  197.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP4_4.png" alt="Image 1"></a>     
  198.           <a href="https://www.nakatomishop.com/products/detail/556">
  199.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP4_5.png" alt="Image 1"></a>
  200.           <a href="https://www.nakatomishop.com/user_data/2025spop">
  201.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_model.png" alt="Image 1"></a>             
  202.            </p>
  203.         </div>
  204.         <div>
  205.           <p class="p_example_sm25_sl_a">【OPTION】<br>
  206.           <a href="https://www.nakatomishop.com/products/list?category_id=15">
  207.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_duct.png" alt="Image 1"></a>
  208.           <a href="https://www.nakatomishop.com/products/list?category_id=16">
  209.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_fl.png" alt="Image 1"></a>
  210.           <a href="https://www.nakatomishop.com/products/list?category_id=9">
  211.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_etc.png" alt="Image 1"></a>     
  212.           <a href="https://www.nakatomishop.com/products/list?category_id=99">
  213.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_BF.png" alt="Image 1"></a>
  214.           <a href="https://www.nakatomishop.com/products/list?category_id=27">
  215.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_FF.png" alt="Image 1"></a>
  216.           <a href="https://www.nakatomishop.com/products/list?category_id=61">
  217.             <img class="fit-picture_sl" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_CF.png" alt="Image 1"></a>
  218.            </p>
  219.         </div>
  220.       </div>
  221.       <!-- 左右のボタン -->
  222.       <span id="prev_a" class="prev_a"></span>
  223.       <span id="next_a" class="next_a"></span>
  224.       <!-- インジケーター -->
  225.       <ul class="indicator_a" id="indicator_a">
  226.         <li class="list_a"></li>
  227.         <li class="list_a"></li>
  228.         <li class="list_a"></li>
  229.         <li class="list_a"></li>
  230.         <li class="list_a"></li>
  231.       </ul>
  232.     </div> 
  233.     </body>
  234.     </html>
  235.     <script>
  236.       const slide_a = document.getElementById('slide_a');
  237.       const prev_a = document.getElementById('prev_a');
  238.       const next_a = document.getElementById('next_a');
  239.       const indicator_a = document.getElementById('indicator_a');
  240.       const lists_a = document.querySelectorAll('.list_a');
  241.       const totalSlides_a = lists_a.length;
  242.         let count_a = 0;
  243.         let autoPlayInterval_a;
  244.         function updateListBackground() {
  245.           for (let i = 0; i < lists_a.length; i++) {
  246.           lists_a[i].style.backgroundColor = i === count_a % totalSlides_a ? '#000' : '#fff';
  247.           }
  248.         }
  249.         function nextClick() {
  250.           slide_a.classList.remove(`slide_a${count_a % totalSlides_a + 1}`);
  251.           count_a++;
  252.           slide_a.classList.add(`slide_a${count_a % totalSlides_a + 1}`);
  253.           updateListBackground();
  254.         }
  255.         function prevClick() {
  256.           slide_a.classList.remove(`slide_a${count_a % totalSlides_a + 1}`);
  257.           count_a--;
  258.           if (count_a < 0) count_a = totalSlides_a - 1;
  259.           slide_a.classList.add(`slide_a${count_a % totalSlides_a + 1}`);
  260.           updateListBackground();
  261.         }
  262.         function startAutoPlay() {
  263.           autoPlayInterval_a = setInterval(nextClick, 7000);
  264.         }
  265.         function resetAutoPlayInterval() {
  266.           clearInterval(autoPlayInterval_a);
  267.           startAutoPlay();
  268.         }
  269.         prev_a.addEventListener('click', () => {
  270.           prevClick();
  271.           resetAutoPlayInterval();
  272.         });
  273.         next_a.addEventListener('click', () => {
  274.           nextClick();
  275.           resetAutoPlayInterval();
  276.         });
  277.         indicator_a.addEventListener('click', (event_a) => {
  278.           if (event_a.target.classList_a.contains('list_a')) {
  279.           const index_a = Array.from(lists_a).indexOf(event_a.target_a);
  280.             slide_a.classList.remove(`slide_a${count_a % totalSlides_a + 1}`);
  281.             count_a = index_a;
  282.             slide_a.classList.add(`slide_a${count_a % totalSlides_a + 1}`);
  283.             updateListBackground();
  284.             resetAutoPlayInterval();
  285.           }
  286.         });
  287.         startAutoPlay();
  288.       </script>
  289.     
  290. {% endblock %}