如何在fullpageJS中创建自动轮播滑块（无需水平滚动）

Hey there! I get it—fullPage.js's default slide behavior is horizontal, but that's not what you're going for. Let's walk through a couple of solid solutions to get your auto-carousel working without that horizontal scroll effect.

Option 1: Switch Slides to Vertical Direction #

If you want your auto-carousel to transition vertically instead of horizontally, you can tweak fullPage.js's core configuration to stack slides vertically. Here's how to set it up:

new fullpage('#fullpage', {
  verticalCentered: true,
  slidesNavigation: false, // Hide horizontal slide nav dots
  
  // Force slides to stack vertically instead of side-by-side
  slidesVertical: true,
  
  // Enable auto-scrolling for slides
  slidesAutoScrolling: true,
  loopSlides: true, // Optional: loop the carousel infinitely
  scrollingSpeed: 700 // Adjust transition speed to your preference
});

With this setup, your slides will scroll vertically like sections, and the auto-play function will work without any horizontal movement.

Option 2: Custom Fade Transition (No Scroll At All) #

If you want to ditch scrolling entirely and use a smooth fade effect for your auto-carousel, you can override fullPage.js's default animations with CSS while keeping the autoplay logic intact.

Step 1: Initialize fullPage with Autoplay #

new fullpage('#fullpage', {
  verticalCentered: true,
  slidesNavigation: false,
  
  // Enable auto-scrolling and disable default scroll animation
  slidesAutoScrolling: true,
  loopSlides: true,
  scrollingSpeed: 0, // Turn off built-in scroll animation
  touchSwipe: false // Optional: disable manual horizontal swipes
});

Step 2: Add Custom CSS for Fade Effect #

/* Hide horizontal overflow to prevent unwanted scrollbars */
.fp-slidesContainer {
  overflow: hidden !important;
}

/* Make slides overlap each other with absolute positioning */
.fp-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  opacity: 0;
  transition: opacity 0.7s ease-in-out !important;
}

/* Show the active slide with full opacity */
.fp-slide.active {
  opacity: 1;
  z-index: 1;
}

This setup will make your slides fade in and out seamlessly, with no horizontal scroll in sight.

Option 3: Use Sections as a Vertical Auto-Carousel #

If you don't need horizontal slide functionality at all, you can structure your content as full sections instead of slides, then enable auto-scrolling for sections. This gives you a pure vertical auto-carousel:

new fullpage('#fullpage', {
  verticalCentered: true,
  navigation: false,
  
  // Auto-scroll sections vertically
  sectionsAutoScrolling: true,
  loopBottom: true, // Loop back to the first section after the last one
  scrollingSpeed: 700
});

Your HTML would look like this:

<div id="fullpage">
  <div class="section">Slide 1 Content</div>
  <div class="section">Slide 2 Content</div>
  <div class="section">Slide 3 Content</div>
</div>

Pick the option that fits your design needs best—all of them eliminate horizontal scroll while keeping your auto-carousel running smoothly!

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