JQuery Marquee.

Marquee with continuous images.

by Faisal Khan Janjua

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.marquee.min.js"></script>
<div class='marquee'>
    <img src="https://kissflow.com/static/dist/images/butterfly_256.png">
    <img src="https://images.vexels.com/media/users/3/135594/isolated/lists/bdfd2abb53c8631d97c489a07e121c44-capsule-icon.png">
    <img src="https://www.shareicon.net/data/256x256/2017/02/15/878963_ubuntu_512x512.png">
    <img src="https://www.webmoney.ru/img/icons/wmlogo_flat_256.png?1532698144">
    <img src="https://www.infiwebs.com/elegant-elements-fusion-builder/wp-content/uploads/sites/4/2017/10/wp-job-manager.png"> 
    <img src="https://www.infiwebs.com/elegant-elements-fusion-builder/wp-content/uploads/sites/4/2017/10/mesh-page-builder.png">
    <img src="https://www.infiwebs.com/elegant-elements-fusion-builder/wp-content/uploads/sites/4/2017/10/shiny-updates.png">
    <img src="https://www.infiwebs.com/elegant-elements-fusion-builder/wp-content/uploads/sites/4/2017/10/unyson.jpg">
    <img src="https://www.infiwebs.com/elegant-elements-fusion-builder/wp-content/uploads/sites/4/2017/10/gutenberg.jpg"> 
</div>

CSS

.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
}
.marquee img {
  width: 100px;
  height: auto;
}

JavaScript

$(function () {
  $('.marquee').marquee({
    gap: 00, 
    duration: 10000,
    duplicated: true,
    direction: 'left',
    startVisible: true,
    pauseOnHover: true
  });
});