Responsive Scroll-Triggered Marquee Carousel In jQuery

The Marquee Slider jQuery plugin provides a smooth horizontal scrolling marquee effect that responds to user scrolling. Similar to the traditional <marquee> tag, it automatically scrolls slide items left or right when users scroll up or down the page. Developers can control the scroll speed and repeat items using the sensitivity and repeatItems options.

This plugin provides a seamless and smooth way to showcase any content on your web pages. As users scroll, the slider smoothly scrolls its content horizontally, grabbing their attention and keeping them engaged. This is ideal for displaying:

• Important announcements and updates
• Eye-catching product or service features
• User testimonials and reviews
• Scrolling news headlines and updates
• Dynamic content feeds and social media streams

How to use it:

1. Download the plugin and insert the main script marqueeSlider.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/marqueeSlider.js"></script>

2. Add a group of marquee lists to the slider.

<div class="marquee-slider marquee-slider-demo">
  <div class="marquee-slider__list">
    <div class="marquee-slider__list--item">Item 1</div>
    <div class="marquee-slider__list--item">Item 2</div>
    <div class="marquee-slider__list--item">Item 3</div>
    ...
  </div>
  <div class="marquee-slider__list">
    <div class="marquee-slider__list--item">Item 1</div>
    <div class="marquee-slider__list--item">Item 2</div>
    <div class="marquee-slider__list--item">Item 3</div>
    ...
  </div>
  <div class="marquee-slider__list">
    <div class="marquee-slider__list--item">Item 1</div>
    <div class="marquee-slider__list--item">Item 2</div>
    <div class="marquee-slider__list--item">Item 3</div>
  </div>
</div>

3. Initialize the marquee slider.

// single slider
$('.marquee-slider').marqueeSlider({ 
  // options
});

// multiple sliders
$('.marquee-slider').marqueeSlider([
  // slider 1 options
  { sensitivity: 0.1, repeatItems: true },
  // slider 2 options
  { sensitivity: 0.5, repeatItems: true }
]);

4. Apply CSS styles to the marquee slider.

.marquee-slider {
  padding: 100px 0;
  background: #222;
  width: 100%;
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.marquee-slider__list {
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
  flex: none;
  display: flex;
  flex-flow: row;
  align-items: stretch;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.38, 1.399);
}

.marquee-slider__list--item {
  color: #fff;
  width: 100%;
  height: 100%;
  max-width: 260px;
  min-height: 260px;
  grid-column-gap: 1.6rem;
  border-radius: 0.8rem;
  flex: none;
  display: flex;
  padding: 1.2rem;
  position: relative;
  align-items: center;
  grid-row-gap: 1.6rem;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08));
}

5. Adjust the scrolling sensitivity, which allows you to control the speed based on user interaction. Default: 0.1.

$('.marquee-slider').marqueeSlider({ 
  sensitivity: 0.5,
});

6. Determine whether to repeat the items in the slider. Default: true.

$('.marquee-slider').marqueeSlider({ 
  repeatItems: false,
});

---

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