Responsive Scroll-Triggered Marquee Carousel In jQuery

The Marquee Slider jQuery plugin gives a clean horizontal scrolling marquee impact that responds to consumer scrolling. Much like the standard <marquee> tag, it robotically scrolls slide objects left or proper when customers scroll up or down the web page. Builders can management the scroll pace and repeat objects utilizing the sensitivity and repeatItems choices.

This plugin gives a seamless and clean solution to showcase any content material in your net pages. As customers scroll, the slider easily scrolls its content material horizontally, grabbing their consideration and protecting them engaged. That is supreme for displaying:

• Necessary bulletins and updates
• Eye-catching services or products options
• Consumer testimonials and evaluations
• Scrolling information headlines and updates
• Dynamic content material feeds and social media streams

How you can use it:

1. Obtain the plugin and insert the primary 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 gaggle of marquee lists to the slider.

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

3. Initialize the marquee slider.

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

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

4. Apply CSS kinds 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: heart;
  align-items: stretch;
  margin-left: auto;
  margin-right: auto;
  show: flex;
  place: relative;
}

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

.marquee-slider__list--item {
  colour: #fff;
  width: 100%;
  top: 100%;
  max-width: 260px;
  min-height: 260px;
  grid-column-gap: 1.6rem;
  border-radius: 0.8rem;
  flex: none;
  show: flex;
  padding: 1.2rem;
  place: relative;
  align-items: heart;
  grid-row-gap: 1.6rem;
  justify-content: heart;
  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. Regulate the scrolling sensitivity, which lets you management the pace primarily based on consumer interplay. Default: 0.1.

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

6. Decide whether or not to repeat the objects within the slider. Default: true.

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

This superior jQuery plugin is developed by sumanengbd. For extra Superior Usages, please examine the demo web page or go to the official web site.