Javascript 为什么Swiper不为我工作？

我正在尝试使用Swiper，但我无法实现它，我遵循了文档（）中的步骤，问题是 所有的图像/幻灯片都混合在一起，这使我可以向一侧滑动，但由于所有的图像都在一起，因此无法工作。它向我展示了一张包含所有内容的幻灯片，我可以 滑梯，但两边什么也没有。我在ngOnlnit中做这件事，起初甚至连swiped都不能正常工作，但当我添加setTimeout来延迟var swiper的创建时，它开始工作了（仅swiped）

组件1.ts：

import 'swiper/swiper-bundle.css';
import Swiper, { Navigation, Pagination } from 'swiper';

@Component({
  selector: 'app-sing-accesorios',
  templateUrl: './sing-accesorios.component.html',
  styleUrls: ['./sing-accesorios.component.css']
})
export class SingAccesoriosComponent implements OnInit {

  constructor(){

    Swiper.use([Navigation, Pagination]);

  }

  ngOnInit(): void {

    setTimeout(function(){
        var swiper = new Swiper('.swiper-container');
    },500)

  }
}

component.html：

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>

就我而言，添加

.swiper-wrapper{
    display:inline-flex;
}

按预期工作。

在我的情况下，添加

.swiper-wrapper{
    display:inline-flex;
}

---

按预期工作。

对于将来出现此问题的任何人-只需将Swiper初始化从OnInit移动到AfterViewInit，而不是使用setTimeout，然后它就可以像一个符咒一样工作。此外，也不需要使用任何第三方库，因为Swiper本机已经支持Angular 2+

---

此外，请确保您包括Swiper CSS样式（如果您愿意，至少包括核心样式或整个捆绑包）。

对于将来出现此问题的任何人，只需将Swiper初始化从OnInit移动到AfterViewInit，而不必使用setTimeout，这样它就可以像一个符咒一样工作。此外，也不需要使用任何第三方库，因为Swiper本机已经支持Angular 2+

---

此外，请确保您包括Swiper CSS样式（如果您愿意，至少包括核心样式或整个捆绑包）。

请参阅本文档

在HTML上-your.component.HTML

<swiper [slidesPerView]="3" [spaceBetween]="50" (swiper)="onSwiper($event)" (slideChange)="onSlideChange()" #newSwiper>
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
</swiper>

现在您可以访问属性和方法，如slideTo（）、slideNext（）、slidePrev（）等

---

希望这会有所帮助。

请参阅此文档

setTimeout(function () {
  const swiper = new Swiper('.swiper-container', {
    autoplay: {
      reverseDirection: true,
    },
  });
  const mySwiper = new Swiper(".swiper-container", {
    autoplay: true,
  });
  const swiper1 = new Swiper('.swiper-container2', {
    autoplay: {
      reverseDirection: true,
    },
  });
}, 4000);

在HTML上-your.component.HTML

<swiper [slidesPerView]="3" [spaceBetween]="50" (swiper)="onSwiper($event)" (slideChange)="onSlideChange()" #newSwiper>
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
</swiper>

现在您可以访问属性和方法，如slideTo（）、slideNext（）、slidePrev（）等

希望这会有帮助

setTimeout(function () {
  const swiper = new Swiper('.swiper-container', {
    autoplay: {
      reverseDirection: true,
    },
  });
  const mySwiper = new Swiper(".swiper-container", {
    autoplay: true,
  });
  const swiper1 = new Swiper('.swiper-container2', {
    autoplay: {
      reverseDirection: true,
    },
  });
}, 4000);

它对我有用

---

它对我有用

请将此软件包用于刷卡器：请将此软件包用于刷卡器：不鼓励使用代码回答。请提供您的答案如何解决问题的摘要，以及为什么它可能比已经提供的其他答案更可取。不鼓励只使用代码的答案。请提供您的答案如何解决问题的摘要，以及为什么它可能比已经提供的其他答案更可取。