Slider8 Swiper 두개 이상 사용하여 슬라이더 만들기 Swiper 두개 이상 사용하여 슬라이드 만들기 텍스트와 이미지 등 swiper 여러개를 활용한 예제입니다. HTML 삽입 미리보기할 수 없는 소스 2023. 12. 30. Swiper 슬라이드 샘플 Swiper 슬라이드 샘플 swiper슬라이드와 탭기능을 활용한 예제입니다. HTML 삽입 미리보기할 수 없는 소스 2023. 12. 28. 바로 사용 가능한 Swiper Pallallax 이미지 슬라이드 바로 사용 가능한 Swiper Pallallax 이미지 슬라이드 Swiper Parallax 이미지 슬라이드 구현한 샘플입니다. 시각적 효과와 부드러운 애니메이션으로 사용자들에게 뛰어난 경험을 제공합니다. 다층적으로 구성된 Parallax 효과는 콘텐츠를 더욱 생동감 있게 만들어줍니다. HTML 삽입 미리보기할 수 없는 소스 2023. 11. 21. Swiper Parallax(패럴랙스) Swiper 패럴랙스 Swiper의 Parallax(패럴랙스) 효과를 사용하면 슬라이드 요소의 배경이나 내용이 슬라이드 되는 동안에도 다르게 움직이도록 만들 수 있습니다. 아래는 Swiper의 Parallax 효과를 적용하는 간단한 예제입니다. HTML 구조 작성 Swiper 및 Parallax 효과를 적용할 요소를 HTML에 추가합니다. 여기서 data-swiper-parallax 속성은 해당 슬라이드의 패럴랙스효과 정도를 나타냅니다. 스크립트 Parallax 효과를 활성화합니다. parallax: true 옵션을 설정하여 패럴랙스 효과를 활성화하고, 필요에 따라 speed 옵션을 조절하여 패럴랙스의 속도를 설정할 수 있습니다. 예제 HTML 삽입 미리보기할 수 없는 소스 2023. 11. 10. Swiper 반응형 Swiper 반응형 적용 방법 Swiper의 반응형 옵션은 breakpoints를 통해 설정할 수 있습니다. breakpoints는 특정 뷰포트 크기에서 적용되는 Swiper 옵션을 정의합니다. 아래는 간단한 예제입니다. var swiper = new Swiper('.swiper-container', { // 기본 옵션 slidesPerView: 1, spaceBetween: 10, // 반응형 옵션 breakpoints: { // 768px 이상에서는 3개의 슬라이드를 보여줌 768: { slidesPerView: 3, spaceBetween: 20 }, // 1024px 이상에서는 5개의 슬라이드를 보여줌 1024: { slidesPerView: 5, spaceBetween: 30 } } }); 위의.. 2023. 11. 10. Swiper 슬라이드 탭 예제 Swiper 슬라이드 탭 예제 Swiper를 탭 페이지에 응용시 display: none 상태로 초기화하면 슬라이드가 정상적으로 작동하지 않을 수 있습니다. 이는 Swiper가 초기화될 때 컨테이너의 크기와 레이아웃 정보를 제대로 계산하지 못하기 때문입니다. Swiper의 observer와 observeParents 옵션은 Swiper 컨테이너 내에서 DOM 변경을 감지하고 슬라이드를 업데이트하는 데 사용됩니다. 이 옵션을 사용하면 슬라이드 내용이 동적으로 변경될 때 Swiper가 자동으로 감지하여 슬라이드를 업데이트할 수 있습니다. observer: true 이 옵션은 Swiper 컨테이너 내에서 DOM 요소의 변경을 감지합니다. 슬라이드 내부의 요소가 동적으로 추가, 제거 또는 변경될 때 Swiper.. 2023. 11. 8. Swiper 다양한 옵션 Swiper 다양한 옵션 Swiper 라이브러리는 다양한 옵션을 제공합니다. slidesPerView 한 번에 표시할 슬라이드 수를 지정합니다. 예를 들어, slidesPerView: 2로 설정하면 2개의 슬라이드가 화면에 표시됩니다. spaceBetween 슬라이드 간의 간격을 지정합니다. 슬라이드 간의 여백을 설정하려면 이 값을 조정할 수 있습니다. loop 슬라이드 루프(무한 회전)를 활성화합니다. 첫 번째 슬라이드 다음에 마지막 슬라이드가 나타납니다. autoplay 자동 재생을 활성화하고 재생 간격을 설정합니다. 예를 들어, autoplay: { delay: 3000 }로 설정하면 3초마다 슬라이드가 자동으로 전환됩니다. navigation 이전 및 다음 슬라이드로 이동하는 네비게이션 버튼을 사.. 2023. 11. 8. Swiper 기초 사용법 Swiper 설명 Swiper는 모바일 및 데스크톱 슬라이드 쇼 또는 캐러셀을 만들 수 있는 JavaScript 라이브러리 중 하나로 개발자와 디자이너가 사용하는 인기 있는 라이브러리 중 하나입니다. Swiper의 주요 장점은 아래와 같습니다. 1. 사용이 쉽고 유연한 API Swiper는 사용이 간단하고 직관적인 API를 제공합니다. 초기화 및 구성이 쉽고, 다양한 옵션을 통해 슬라이드의 동작을 쉽게 제어할 수 있습니다. 2. 다양한 슬라이드 유형 Swiper는 일반적인 이미지 슬라이드뿐만 아니라 텍스트, 비디오, 사용자 지정 HTML 요소 등 다양한 유형의 슬라이드를 지원합니다. 이로써 다양한 콘텐츠를 보여주기에 용이합니다. 3. 반응형 디자인 Swiper는 반응형 웹 디자인을 지원하여 다양한 화면 .. 2023. 11. 6. 이전 1 다음
