Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

290
Visualizações
Angular swiper is not working Nothing is displayed

I have such a file with markup HTML

    <div class="reviews__inner">
      <swiper [pagination]="{ type: 'fraction'}" [navigation]="true" class="mySwiper">
        <div class="slider__one">
          <div class="wrapper__one">
            <ng-template swiperSlide>
              <div *ngFor="let slide of slides" class="slide__one">
                <div class="slide__wrap">
                  <img src="{{ slide.image }}" alt="stars" class="stars">
                  <div class="slide__title_size_s">{{ slide.title }}</div>
                  <div class="slide__subtitle_size_s">{{ slide.subtitle }}</div>
                </div>
              </div>
            </ng-template>
          </div>
        </div>
      </swiper>
    </div>

.TS

...
SwiperCore.use([Navigation, Pagination]);
...

I connected the swiper module and nothing is displayed when the page loads, and there are no errors in the console. I did everything according to the official documentation

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You need to apply ngFor on ng-template with swiperSlide directive. Currently you are creating only one slide. Also you cannot use wrapper divs like this in swiper. Follow the code below

<div class="reviews__inner">
    <swiper [pagination]="{ type: 'fraction'}" [navigation]="true" class="mySwiper">
        <ng-template swiperSlide *ngFor="let slide of slides">
            <div class="slide__one">
                <div class="slide__wrap">
                    <img src="{{ slide.image }}" alt="stars" class="stars">
                    <div class="slide__title_size_s">{{ slide.title }}</div>
                    <div class="slide__subtitle_size_s">{{ slide.subtitle }}</div>
                </div>
            </div>
        </ng-template>
    </swiper>
</div>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda