如何在Bootstrap 4 Carousel中添加paroller.js视差效果？

Hey there! Let's troubleshoot why your paroller.js parallax effect isn't working with Bootstrap 4 Carousel. Here are the most common fixes to work through step by step:

Paroller.js depends on jQuery, so your script load order must be correct. Bootstrap also needs jQuery, so follow this sequence:

<!-- Load jQuery first -->
<script src="jquery.min.js"></script>
<!-- Then Bootstrap's JS -->
<script src="bootstrap.min.js"></script>
<!-- Finally paroller.js -->
<script src="paroller.min.js"></script>

If you load paroller before jQuery, it won't initialize at all.

Adding the data-paroller-factor attribute alone isn't enough—you need to trigger the plugin with JavaScript. Add this code right before your closing </body> tag:

$(document).ready(function() {
  // Initialize paroller on all elements with data attributes
  $('[data-paroller-factor]').paroller();
  // Or target carousel items specifically
  // $('.carousel-item').paroller();
});

If your carousel loads content dynamically (e.g., via AJAX), run this initialization code after the carousel content is fully loaded.

Paroller.js requires elements to have a defined position and height to work properly. Bootstrap's default .carousel-item styling might not meet these requirements. Add this custom CSS:

.carousel-item {
  position: relative; /* Required for paroller to calculate offsets */
  min-height: 600px; /* Adjust to match your content/background image size */
  overflow: hidden; /* Prevent content from spilling during parallax movement */
}

If you're using a background image for the carousel item, make sure it's set up correctly too:

.carousel-item {
  background-image: url('your-background-image.jpg');
  background-size: cover;
  background-position: center center;
}

Bootstrap's carousel modifies item visibility and positioning during slides, which can break paroller's scroll detection. Refresh the paroller instance after each carousel slide completes:

// Replace #your-carousel with your actual carousel ID
$('#your-carousel').on('slid.bs.carousel', function() {
  // Destroy and re-initialize paroller to reset offsets
  $('[data-paroller-factor]').paroller('destroy');
  $('[data-paroller-factor]').paroller();
});

The slid.bs.carousel event fires after the slide transition finishes, ensuring the active item is fully visible before reinitializing.

Make sure you're using the correct attribute names (no typos!) and values:

<div class="carousel-item active" 
     data-paroller-factor="0.3" 
     data-paroller-type="background"> <!-- Specify type if using background parallax -->
  <!-- Your carousel content -->
</div>

Valid values for data-paroller-type are background or foreground—this tells the plugin how to apply the parallax effect.

If none of the above works, create a stripped-down test page with only jQuery, Bootstrap, paroller.js, and a basic carousel. This will help you rule out conflicts with other CSS/JS in your project. If the effect works here, gradually reintroduce your other code to find the culprit.

内容的提问来源于stack exchange，提问作者wolekpl