mqScroller is a light-weight and customizable jQuery scroller plugin impressed by the standard <marquee /> component.
The plugin transforms a bunch of HTML components (usually photographs, textual content, playing cards, and so on) right into a easy, responsive horizontal scroller with auto-looping and course management.
This makes it perfect for information tickers, constantly scrolling picture galleries, or consumer emblem showcases.
Options
- Easy left/proper scrolling with adjustable pace
- Autoplay with pause-on-hover help.
- Auto-cloning components for seamless infinite looping
- Configurable hole between gadgets and customized separators
- Good RTL help (auto-detection or guide setting)
How you can use it:
1. Obtain mqScroller and cargo the next information within the doc.
<!-- jQuery is required --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- jQuery mqscroller plugin --> <hyperlink href="/css/mqscroller.min.css" rel="stylesheet"> <script src="/js/mqscroller.min.js"></script>
2. Create a scroller container with the mqscroller class and add your gadgets with the mqs-item class:
<div class="mqscroller"> <div class="mqs-item">Content material Block 1</div> <div class="mqs-item">Content material Block 2</div> <div class="mqs-item">One other Merchandise</div> <div class="mqs-item"><img src="emblem.png" alt="Brand"></div> </div>
3. Initialize the plugin together with your most well-liked choices:
htmlDir(string, default:auto): Units textual content course.autofollows the<html dir="">attribute. Different values:ltrorrtl.loop(Boolean, default:false): Permits steady, seamless looping by cloning gadgets.length(Quantity, default:5000): Scroll animation length in milliseconds. The next worth means a slower scroll pace.course(String, default:left): Defines the scroll course. Acceptsleftorproper.hole(Quantity, default:0): Specifies the area in pixels between scrolling gadgets. That is utilized as a margin.pauseOnHover(Boolean, default:false): If set totrue, the scrolling animation pauses when the mouse cursor is over the scroller.separator(String, default:''): A string (may be textual content or HTML) to insert between gadgets. Examples:•,|, or a picture tag.cloneCount(Quantity, default:0): Means that you can manually set the variety of occasions all the merchandise group is cloned for the loop. A worth of0means the plugin will try and auto-calculate the mandatory variety of clones.
$('.mqscroller').mqScroller({
htmlDir: 'auto',
loop: false,
length: 5000,
course: 'left',
hole: 0,
pauseOnHover: false,
separator: '',
cloneCount: 0,
});
4. You possibly can reinitialize, refresh, or destroy the plugin utilizing customized occasions:
$('.mqscroller').set off('initialize.mqscroller');
$('.mqscroller').set off('refresh.mqscroller');
$('.mqscroller').set off('destroy.mqscroller');
See Additionally:
FAQs
Q: How does mqScroller deal with responsive designs?
A: The plugin listens to window load and resize occasions. On resize, it recalculates the width of the .mqs-group and updates a CSS customized property --mqs-width. The cloning logic, which makes use of $(window).width(), is primarily run at initialization. If the variety of clones wanted modifications drastically on resize, you may contemplate triggering a refresh.mqscroller occasion your self after important format shifts, although for many circumstances, the CSS-driven animation ought to adapt.
Q: Can I dynamically add or take away gadgets after initialization?
A: Sure. After you modify the DOM by including or eradicating .mqs-item components inside your .mqscroller container, you must set off the refresh occasion: $('.your-scroller').set off('refresh.mqscroller');. This tells the plugin to destroy the outdated occasion and re-initialize with the brand new content material. Simply altering the DOM with out this may not work as anticipated.
Q: What if my gadgets have completely different widths?
A: That is completely nice. mqScroller calculates the overall width of the .mqs-group (which comprises all of your .mqs-item components, no matter their particular person widths) to handle the animation and cloning. The smoothness of the scroll is not depending on gadgets being uniform.
Q: Is it performance-heavy if I’ve a really giant variety of gadgets?
A: The scrolling itself makes use of CSS animations, that are typically environment friendly. The principle efficiency consideration is the JavaScript execution throughout initialization, significantly the DOM manipulation for wrapping gadgets and, if loop is true, cloning them. For a very giant variety of gadgets (tons of or hundreds), the preliminary setup and cloning might trigger a short stutter. I would say for typical use circumstances like just a few dozen logos or information gadgets, it is not a difficulty. In case you’re coping with actually large datasets, you may must look into digital scrolling methods, which is a distinct class of instrument.
Q: How does the separator possibility behave otherwise with loop: false versus loop: true?
A: When loop is false, the plugin inserts the separator after every .mqs-item besides for the final one. This is smart, as there’s nothing following it. When loop is true, the separator is inserted after each authentic .mqs-item. This consists of the one which was initially final, as a result of in a loop, will probably be visually adopted by the primary merchandise (or its clone). This ensures visible consistency within the looping animation.
This superior jQuery plugin is developed by thomasvaidyakaran. For extra Superior Usages, please examine the demo web page or go to the official web site.
