Content Marquee In Jquery

by Faisal Khan Janjua

HTML

<div class="marquee_slider">
    <div class="marquee_inner">
        <img src="https://placehold.co/120x40?text=1" />
        <img src="https://placehold.co/80x60?text=2" />
        <img src="https://placehold.co/100x50?text=3" />
        <img src="https://placehold.co/110x35?text=4" />
        <img src="https://placehold.co/80x60?text=5" />
        <img src="https://placehold.co/150x55?text=6" />
    </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.marquee_slider {
  width: 100%;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.marquee_inner {
  display: flex;
  animation: marquee 20s linear infinite;
}

.marquee_slider img {
  padding: 0 6px;
  flex-shrink: 0;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

JavaScript

function makeMarquee(elm) {
  var containerWidth = elm.width();
  var marqueeInner = elm.find('.marquee_inner');
  var marqueeWidth = marqueeInner.width();

  // add more three times (total 4 times) the marquee_inner content to ensure seamless scrolling
  marqueeInner.append(marqueeInner.html() + marqueeInner.html() + marqueeInner.html());

  // Adjust the duration to control speed
  var duration = (marqueeWidth / containerWidth) * 20; // Adjust this number 20 to control speed

  marqueeInner.css({
    'animation-duration': duration + 's'
  });
}


jQuery(document).ready(function() {

	makeMarquee(jQuery('.marquee_slider'));

});