Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

289
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!