목록앵귤러 슬라이드 (2)

깜놀하는 해므찌로

Angular Swiper CSS is not working 앵귤러 스와이퍼 CSS 먹통 문제 해결 방안 예시

0. #swiperContainer 선언 1. init="false" 설정 필수! 이 설정을 하지 않으면 임의로 CSS를 그려버려서 CSS 설정 및 값 오버라이딩 등 먹통됩니다. @ViewChild('swiperContainer') swiperEl!: ElementRef; ngAfterViewInit(): void { this.setSwiper(); } setSwiper() { const options: SwiperOptions = { speed: 3000, autoplay: { delay: 5000, }, allowTouchMove: false, touchRatio: 0, loop: true, slidesPerView: document.documentElement.clientWidth >= 1440 ?..
IT 2023. 7. 20. 23:38
Angular Swiper silde custom 앵귤러 스와이프 슬라이드 커스텀 예시

요기!! 0{{number}} 1. AfterView 시점에서 핸들링하기 위해 #item 명시 import { CommonModule } from '@angular/common'; import { AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Component, ElementRef, HostListener, OnInit, ViewChild, signal, } from '@angular/core'; import { register } from 'swiper/element/bundle'; import Swiper from 'swiper'; import { IconComponent } from '../../../components/icon/icon.co..
IT 2023. 7. 7. 19:24
이전 Prev 1 Next 다음