728x90 반응형 슬라이더2 [HTML/SCSS] Swiper로 만드는 자연스러운 슬라이드 이동 효과 Swiper 슬라이더를 활용한 부드러운 애니메이션 Swiper 슬라이더에서 현재 슬라이드에는 'swiper-slide-active' 클래스가 추가됩니다. 참고: https://swiperjs.com/swiper-api#parameters 이 swiper-slide-active 클래스에 스타일을 주면 현재 액티브된 슬라이드에만 스타일을 적용할 수 있습니다. 각 슬라이드의 item div에 padding-top을 주고 흑백 필터(grayscale)를 적용했습니다. .item { width: 100%; height: 100%; padding-top: 2.5rem; filter: grayscale(0.8); } position: absolute;로 자식 요소들을 원하는 레이아웃대로 꾸며 위와 같이 만들었습니다... 2024. 1. 29. [javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 만만치 않습니다.근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데dots는 슬라이드 수 만큼 생성되고 클릭하면 해당 슬라이드로 이동하는 기능이며,arrows는 화살표 버튼으로 이전/다음 슬라이드로 이동하는 기능입니다.이 기본 기능들을 원하는대로 탈바꿈하고 프로그레스 바를 만들어 봅시다. 완성본 dots는 슬라이드수에 비례하여 나타나는 기능이므로 이 dots와 API를 활용해서 페이징을 만들 수 있습니다.appendDots: '.slick--visual__paging',customPaging: function (slider, i) { return ''+(i + 1.. 2023. 8. 4. 이전 1 다음 728x90 반응형
