基于Bootstrap的纯文本带控制箭头滑块工具推荐请求

Hey there! Since you’re already building with Bootstrap, let’s focus on tools that play nicely with your existing setup while delivering the text-slider + arrow controls you need. Here are my top recommendations:

1. Bootstrap's Built-in Carousel (No Extra Dependencies!) #

This is the most straightforward option because it’s part of Bootstrap itself—no need to add new libraries. You can easily repurpose it for text-only content instead of images:

Example Code Structure: #

<div id="textCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- Text Slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="p-5 text-center">
        <h3>First Text Slide</h3>
        <p>This is the content of your first text-only slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="p-5 text-center">
        <h3>Second Text Slide</h3>
        <p>More custom text content here for your second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="p-5 text-center">
        <h3>Third Text Slide</h3>
        <p>Final slide with your unique text content.</p>
      </div>
    </div>
  </div>

  <!-- Navigation Arrows -->
  <button class="carousel-control-prev" type="button" data-bs-target="#textCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#textCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Pro Tips: #

• Customize the arrow styles using Bootstrap’s utility classes or your own CSS (e.g., change colors, adjust positioning).
• Remove any image-specific default styles (like object-fit: cover) if they’re affecting your text layout.
• Add indicators if you want dot navigation alongside arrows—just include the .carousel-indicators section.

2. Swiper.js (Flexible & Lightweight) #

Swiper is a popular, touch-friendly slider library that integrates seamlessly with Bootstrap. It’s perfect if you need more advanced features (like autoplay, breakpoints, or custom animations) beyond Bootstrap’s basic carousel.

Key Benefits: #

• Default support for navigation arrows (easily stylable).
• Fully responsive, works great with Bootstrap’s grid system.
• Lightweight (minified version is ~30KB).

Example Setup: #

1. Include Swiper’s CSS and JS (you can use a CDN or install via npm).
2. Add your text slider structure:

<div class="container my-5">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide p-4">
        <h4>Slide 1: Text Content</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="swiper-slide p-4">
        <h4>Slide 2: More Text</h4>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="swiper-slide p-4">
        <h4>Slide 3: Final Text</h4>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      </div>
    </div>
    <!-- Navigation Arrows -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

3. Initialize Swiper with a simple script:

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Pro Tip: #

• Style the arrows using Bootstrap’s button classes by wrapping them in <button class="btn btn-primary"> tags, or customize Swiper’s built-in CSS variables.

3. Glide.js (Simple & Modern) #

Glide is another lightweight, easy-to-use slider library that’s ideal for text content. It has a clean API and plays well with Bootstrap’s styling.

Example Setup: #

1. Include Glide’s CSS and JS.
2. Add your slider markup:

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide p-5">
        <h4>Text Slide A</h4>
        <p>Custom text content tailored to your needs.</p>
      </li>
      <li class="glide__slide p-5">
        <h4>Text Slide B</h4>
        <p>Another slide with unique text for your website.</p>
      </li>
      <li class="glide__slide p-5">
        <h4>Text Slide C</h4>
        <p>Final slide with your desired text content.</p>
      </li>
    </ul>
  </div>
  <!-- Navigation Arrows -->
  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">←</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">→</button>
  </div>
</div>

3. Initialize Glide:

new Glide('.glide').mount();

Pro Tip: #

• Use Bootstrap’s utility classes to style the arrow buttons (e.g., btn btn-outline-dark) for a consistent look with your site.

内容的提问来源于stack exchange，提问作者Rashik I Nahian