Ticker Tape Scrolling trying to make it continuous

Question

im using the following code to implement ticker tape scrolling on top of my website, but when it ends it does not start over. I want it to be continuous not to have a blank space on the scrolling. Trying to figure it out on js but can't find where to change it... thank you very much!

<!-- TradingView Widget BEGIN -->
<style>
body {
  margin: 0;
}
.content {
  padding: 10px 20px;
}
.content p {
  font-family: sans-serif;
}

/******/

.ticker-container {
  width: 100%;
  overflow: hidden;
}

.ticker-canvas {
  width: calc((200px * 15) + 2px);
  /* 
  200px = minimum width of ticker item before widget script starts removing ticker codes
  15 = number of ticker codes
  2px = accounts for 1px external border
  */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker-canvas;
  animation-name: ticker-canvas;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
}
.ticker-canvas:hover {
  animation-play-state: paused
}

@-webkit-keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.tradingview-widget-container {
  position: relative;
}
.tradingview-widget-container iframe {
    position: absolute;
    top: 0;
}
.tradingview-widget-container iframe:nth-of-type(2) {
  left: 100%;
}
</style>

<script>
$( document ).ready(function() {
  $( ".tradingview-widget-container iframe" ).clone().appendTo( ".tradingview-widget-container" );
});

</script>
<div class="ticker-container">
<div class="ticker-canvas">
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js">
  {
  "symbols": [
    {
      "description": "IBOV",
      "proName": "INDEX:IBOV"
    },
    {
      "description": "Euro",
      "proName": "FX_IDC:BRLEUR"
    },
    {
      "description": "Dólar",
      "proName": "FX_IDC:BRLUSD"
    },
    {
      "description": "Libra",
      "proName": "FX_IDC:BRLGBP"
    },
    {
      "description": "Yuan",
      "proName": "FX_IDC:BRLCNY"
    },
    {
      "description": "Petróleo",
      "proName": "ECONOMICS:BRCOP"
    },
    {
      "description": "S&P",
      "proName": "SP:SPX"
    },
    {
      "description": "Nasdaq",
      "proName": "SKILLING:NASDAQ"
    },
    {
      "description": "Ouro (250g)",
      "proName": "BMFBOVESPA:OZ1"
    },
    {
      "description": "Inflação",
      "proName": "ECONOMICS:BRIRYY"
    },
    {
      "description": "Ibovespa",
      "proName": "INDEX:IBOV"
    },
    {
      "description": "Bovespa Index Mini Futures",
      "proName": "BMFBOVESPA:WIN1!"
    },
    {
      "description": "Bovespa Index Futures",
      "proName": "BMFBOVESPA:IND1!"
    },
    {
      "description": "S&P Index Futures",
      "proName": "BMFBOVESPA:ISP1!"
    },
    {
      "description": "Bitcoin",
      "proName": "CRYPTOCAP:BTC"
    }
  ],
  "colorTheme": "dark",
  "isTransparent": false,
  "showSymbolLogo": true,
  "locale": "br"
}
  </script>
</div>
</div>
</div>
<!-- TradingView Widget END -->

Want to make it scroll continuously, tryed to change the code and js.

Answer 1

I hope this will help you, change content accordingly

.scroller__wrapper {
  /* How long one slide is visible on screen (from entering screen to leaving it) */
  --scrolling-gallery-item-duration: 5s;
  /* How many items we want to see on screen at once */
  --scrolling-gallery-items-visible: 7;
  /* How many items are to scroll */
  --scrolling-gallery-items-total: 7;
  margin-top: 2.25em;
  overflow: hidden;
  will-change: transform;
}

.scroller {
  animation-duration: calc(var(--scrolling-gallery-item-duration, 1s) / var(--scrolling-gallery-items-visible) * var(--scrolling-gallery-items-total));
  animation-timing-function: linear;
  animation-name: scrolling-gallery;
  animation-iteration-count: infinite;
  display: flex;
  white-space: nowrap;
}

.scroller__container {
  /* Without this, scroll will jump on desktop if any vertical scrollbar is shown */
  width: 100vw;
}

.scroller__item {
  flex: 1 0 calc(100% / var(--scrolling-gallery-items-visible));
  /* Without this, block elements will take width from their contents and thus making wrong calculations,
     so this just force elements to take only exact part of the container (screen) and equal for all */
  width: 0px;
  /* If you want to have it continuous without any spaces, remove two lines below */
  box-sizing: border-box;
  padding: 0.5em;
}

.scroller img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

@keyframes scrolling-gallery {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--scrolling-gallery-items-total) * -100vw / var(--scrolling-gallery-items-visible)));
  }
}

.scroller:hover,
.scroller:focus {
  animation-play-state: paused;
}

<!-- Scroller -->
<section class="scroller__wrapper">
  <div class="scroller__container">
    <div class="scroller">
      <div class="scroller__item">00000</div>
      <div class="scroller__item">11111</div>
      <div class="scroller__item">22222</div>
      <div class="scroller__item">33333</div>
      <div class="scroller__item">44444</div>
      <div class="scroller__item">55555</div>
      <div class="scroller__item">66666</div>
      <!-- Here are exact copy of previous items -->
      <div class="scroller__item">77777</div>
      <div class="scroller__item">88888</div>
      <div class="scroller__item">99999</div>
      <div class="scroller__item">xxxxx</div>
      <div class="scroller__item">yyyyy</div>
      <div class="scroller__item">qqqqq</div>
      <div class="scroller__item">zzzzz</div>
    </div>
  </div>
</section>