Swiper silde vertical 수직 슬라이드 구현 예시 / 랜덤 이미지 가져오기 / tailwind group class 이름 가져오기

<div class="flex flex-col md:flex-row text-white gap-32 z-10 w-[400px]">
  <swiper-container init="false" class="section3" style="width: 100%; height: 100%">
  // 클래스 명 = 'group' 설정
    <swiper-slide class="group" *ngFor="let video of videos">
      <img [src]="video.image" />
      // 그룹 클래스 내에 '.swiper-slide-next' 라는 클래스가 있다면 felx 없다면 hidden
      <div class="group-[.swiper-slide-next]:flex hidden flex-col">
        <span class="text-lg text-white font-semibold"
          >{{video.title}}</span
        >
        <small class="text-neutral-600">{{video.year}}</small>
      </div>
    </swiper-slide>
  </swiper-container>
</div>

0. init="flase" 스와이퍼를 커스텀한 대로 적용하기 전까지 임의로 스와이퍼를 그리지 말라는 지시

1. 템플릿: 슬라이드 구현을 위해 swiper-container, swiper-slide 태그를 사용

전용 태그를 사용하지 않고 div 만으로도 구현이 가능합니다. 제일 하단 참조!

 

슬라이더 클래스 이름이 자동으로 설정되는 모습

 

 

 

import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, Component, OnInit } from '@angular/core';
import Swiper from 'swiper'; // 스와이퍼
import { register } from 'swiper/element'; // 스와이퍼

register(); // 스와이퍼

@Component({
  selector: 'app-section3',
  standalone: true,
  imports: [CommonModule, IconComponent],
  templateUrl: './section3.section.html',
  styleUrls: ['./section3.section.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class Section3Section implements OnInit {

  videos: { image: string; title: string; year: number }[] = [ 
    {
      image: 'https://picsum.photos/400/300', // 랜덤이미지 가져오기 width/height
      title: 'title1',
      year: 2023,
    },
    {
      image: 'https://picsum.photos/400/300',
      title: 'title2',
      year: 2023,
    },
    {
      image: 'https://picsum.photos/400/300',
      title: 'title3',
      year: 2023,
    },
    {
      image: 'https://picsum.photos/400/300',
      title: 'title4',
      year: 2023,
    },
  ];

  swiper!: Swiper; // Swiper 객체 선언

  constructor() {}
  

  ngAfterViewInit(): void { // AfterViewInit 후크에 사용하길 권장
    this.setSwiper();
  }

  setSwiper() {
    const swiperEl = document.querySelector('.index5') as any;

    const options: SwiperOptions = {
      speed: 3000,
      autoplay: {
        delay: 5000,
      },
      allowTouchMove: false,
      touchRatio: 0,
      loop: true,
      slidesPerView: document.documentElement.clientWidth >= 1440 ? 3 : 1,
      spaceBetween: document.documentElement.clientWidth >= 1440 ? 88 : 0,
      direction: 'horizontal',
    };

    Object.assign(swiperEl, options);
    swiperEl.initialize();
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.setSwiper();
  }
}

2. 컴포넌트 

 

 

 

https://picsum.photos/

Lorem Picsum

3. 무료이미지 가져오기 

4. 뒤에 사이즈 입력하면 맞는 사이즈 이미지를 랜덤으로 가져올 수 있습니다.

 

 

 

 

 

<!-- slide -->
  <div class="section4">
    <div class="swiper-wrapper z-10">
      <div *ngFor="let video of videos" class="swiper-slide">
        <img [src]="video.image" />
      </div>
    </div>
  </div>

5. div 만 사용하셔도 됩니다.