728x90 swiper3 [HTML/SCSS] Swiper 썸네일 갤러리 with 텍스트 슬라이더 메인 슬라이더와 연동되어 동작하는 작은 썸네일 슬라이더 (설명이 이상하네요 간단한 말로 뭐라 하지?) 레이아웃을 여기저기서 많이 보셨을 것입니다. Swiperjs에서는 Thumbs Gallery라는 이름으로 해당 기능 데모를 제공하고 있습니다. 데모 코드를 응용해 아래와 같은 슬라이더를 만들어 보았습니다. 우선 두 개의 Swiper가 필요합니다. 메인으로 사용할 슬라이더와 썸네일 갤러리로 만들 슬라이더(thumbsSlider)입니다. 스크립트에도 두 개의 Swiper를 정의해야 합니다. var swiperMini = new Swiper(".swiper-mini", { spaceBetween: 10, slidesPerView: 4, watchSlidesProgress: true, }); var swiper.. 2024. 2. 29. [HTML/SCSS] Swiper 하나에 여러 pagination(fraction+progressbar) 커스텀 적용하는 방법 이전에 Slick 슬라이더로 https://selinak.tistory.com/74 [javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 호락호락하지 않다. 근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데 dots는 슬라이 selinak.tistory.com 다양한 Pagination을 만든 적이 있습니다. 이번엔 더 활용도가 높은 Swiper에서 다양한 Pagination을 만들어보겠습니다. Swiper는 기본 API와 CSS만으로 충분히 원하는 시안을 구현할 수 있을만큼.. 2024. 2. 23. [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. 이전 1 다음 728x90
