1. <html>
  2.   <head>
  3.     <style>
  4.       #slider {
  5.         overflow: hidden;
  6.         white-space: nowrap;
  7.         box-sizing: border-box;
  8.         text-align: center;
  9.                                 color: white;
  10.         margin-top: 8px;
  11.       }
  12.       #slider > li {
  13.         width: 100%;
  14.         height: 100%;
  15.  
  16.         position: relative;
  17.         display: inline-block;
  18.         overflow: hidden;
  19.         line-height: normal;
  20.         transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
  21.         background-size: cover;
  22.         vertical-align: top;
  23.         box-sizing: border-box;
  24.         white-space: normal;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <ul id="slider">
  30.       <li>
  31.       <p><b>INGYENES SZÁLLÍTÁS</b>  25 ezer Ft rendelés felett</p>
  32.       </li>
  33.       <li>
  34.       <p><b>MACERA-MENTES</b> 30 napos pénzvisszatérítés</p>
  35.       </li>
  36.       <li>
  37.       <p><b>10% KEDVEZMÉNY</b> Minden Kübler termékre!</p>
  38.       </li>
  39.     </ul>
  40.     <script>
  41.       // Slide every slideDelay seconds
  42.       const slideDelay = 3000;
  43.  
  44.       const dynamicSlider = document.getElementById("slider");
  45.  
  46.       var curSlide = 0;
  47.       window.setInterval(()=>{
  48.         curSlide++;
  49.         if (curSlide === dynamicSlider.childElementCount) {
  50.           curSlide = 0;
  51.         }
  52.  
  53.         // Actual slide
  54.         dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
  55.       }, slideDelay);
  56.  
  57.     </script>
  58.   </body>
  59. </html>