Responsive Automatic Content Scroller - jQuery marquee-me

File Size: 6.86 KB
Views Total: 689
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Automatic Content Scroller - jQuery marquee-me

marquee-me is a jQuery plugin for horizontal scrolling content that mimics the behavior of the traditional HTML marquee element, but with added responsiveness and customization features.

Can be used to highlight breaking news, important announcements, testimonials or other dynamic content on your website.

How to use it:

1. Add your content to the horizontal scroller.

<div class="marquee">
  <div class="marquee-container">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
    <div class="item">
      Item 3
    </div>
    ...
  </div>
</div>

2. Load the marquee-me.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/marquee-me.js"></script>

3. Call the function on the top container and config the scroller.

$('.marquee').marqueMe({

  // number of items per view
  itemOnScreen : 3,

  // 'medium', 'fast'
  speed: 'slow',
  
});

4. Apply CSS styles to the scroller.

.marquee {
  overflow: hidden;
  margin: auto;
  transition: 1ms;
}

.marquee-container{
  transition: 1ms;
}

.item {
  float: left;
  overflow: hidden;
  box-sizing: border-box;
}

This awesome jQuery plugin is developed by pranaykantey. For more Advanced Usages, please check the demo page or visit the official website.