Buy me a coffee

Add Image to Scrolling Block

#1. First, add text to the Scrolling Block (you can add any text because we will use text to change this text then).

Add Image To Scrolling Block 01 Min

#2. Use this code to Page Header Code Injection (Page where you use Scrolling Block)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
.m-scroll {
  display: flex;
  position: relative;
  width: 100%;
  height: 90px;
  margin: auto;
  overflow: hidden;
  z-index: 1;

   
}
 .m-scroll__title {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      white-space: nowrap;
      transition: all 0.7s ease;
        
  }
.m-scroll__title > div {
          display: flex;
          animation: scrollText 40s infinite linear;
        }
        .m-scroll__title img {
            margin: 0 20px 6px;
        }
   .m-scroll__title     h1 {
          margin: 0;
          font-size: 1.7rem;
          color: #000;
          transition: all 1.4s ease;
     display: flex;
        }
/*div:hover {
  animation-play-state: paused;
}*/
@keyframes scrollText {
  from   { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}
</style>  
<script>
const words = ['WORK HARD PLAY HARD', 'WORK HARD PLAY HARD']
const imgUrl = 'https://i.ibb.co/TR6zRRj/Untitled-200-x-200-px.png';
$(document).ready(() => {
    const textBlock = $('.sqs-block.marquee-block.sqs-block-marquee');
    const htmlWords = `
    <div class="m-scroll">
  <div class="m-scroll__title">
    <div>
      <h1>
        ${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')}
      </h1>
      <h1>
        ${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')}
      </h1>
    </div>
  </div>
</div>
    `;
    $(htmlWords).insertAfter(textBlock);
    $(textBlock).remove();
})
</script>

Add Image To Scrolling Block 02 Min

#3. Result

Add Image To Scrolling Block 03 Min

#4. Note
Add text/image in this position. If you use 1 text only, you should repeat twice (same as the code in the screenshot).

Add Image To Scrolling Block 04 Min

if you use 3 different text, enter something like this

Add Image To Scrolling Block 05 Min

this is the Text color

Add Image To Scrolling Block 06 Min