jQuery/jQuery 슬라이더16 스와이퍼 슬라이더 제이쿼리 설정코드 정리 기본 설정 slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수 spaceBetween : 6, // 슬라이드 사이 여백 loop : false, // 슬라이드 반복 여부 loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정 pagination : false, // pager 여부 autoplay : { // 자동 슬라이드 설정 , 비 활성화 시 false delay : 3000, // 시간 설정 disableOnInteraction : false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음 }, navigation: { // 버튼 사용자 지정 nextEl: '.swiper-bu.. 2022. 12. 9. 스와이퍼 슬라이더 - 페이지네이션(pagination) 숫자 커스텀 스와이퍼 슬라이더의 페이지네이션과 숫자 부분을 커스텀 해보자 . 이너가 작아진 이유? position: absolute; 줄어드니까 max-width: 1280px; 여도 이너가 작아진다. width: 100%; 설정한다. 그럼 이너가 100% 꽉 찬다 페이지네이션 타입을 프로그래스 바로 변경 (길게) pagination: { el: '.swiper-pagination', type: 'progressbar', }, 슬라이더의 선택자가 프로그래스바로 변경된것을 확인하고 class 명을 가져온다 .main_slider .swiper-pagination-progressbar { position:relative; background: rgba(255, 255, 255, 1); height: 10px; } 포인트.. 2022. 12. 9. 슬라이더 비율에 맞춰 크기조정할때 vw 가로가 100% 잡혀있으니 높이를 vw 로 잡으면 부모의 가로 높이 대비 비율로 창크기를 설정할수있어서 편리하다 이런 큰 비디오를 .main_slider { border: 5px solid red; /* 가로대비 높이 설정 35%조정*/ height: 35vw; } 가로 대비 비율에 맞춰 35% 만 보이게 조정 *단 창을 줄였을떄 영상이 같이 줄어드는게 아니라서 밀려남 .main_slider video { width: 100%; } 그럼 하위요소 비디오에 width:100% 높이만큼 줄어들게하자 그럼 비율에 맞춰 같이 줄어드는 모습 단 영상의 높이가 높기 때문에 다른 부분을 잘린다... 이부분 은 어쩔수없지만 가운데만 보여주게 해주자 height: 100%; 높이를 고정해주고 .main_slider vi.. 2022. 12. 9. 스와이퍼슬라이드 비디오 첫장면부터 재생하기 slideChangeTransitionStart 슬라이더에 들어간 비디오를 슬라이드를 넘겼다가 다시 돌아왔을때 처음부터 재생되도록 해보자 html 코드 연결 video 소스 코드와 autoplay 등 태그 삽입 스와이퍼에서 코드 찾기 var swiper = new Swiper('.main_slider', { loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', }, autoplay: { delay: 3000, }, on: { slideChangeTransitionStart: function () { console.log($('.main_slider .swiper-slide-active video').attr('src')); },.. 2022. 12. 9. 슬라이더 반응형 비율계산으로 칸수 조절하기 breakpoints PC버전에서 3칸으로 보이는 슬라이더가 줄어들떄 칸수를 변하게 하기 제이쿼리 슬라이더 분기점 별로 칸수를 줄어들게 하는 메서드 breakpoints slidesPerView 칸수를 보이는걸 적용하자 var liveSlider = new Swiper('.live_slider', { slidesPerView: 3, spaceBetween: 40, pagination: { el: '.swiper-pagination', }, // 분기점 breakpoints: { // 1200이하 1200: { slidesPerView: 2, }, // 767 이하 767: { slidesPerView: 1, }, }, }); 가변처리가 되어있기 때문에 2칸으로 줄으면 이미지가 깨진다 이미지의 크기가 비율에 맞춰 늘어날 수 있.. 2022. 12. 5. 슬라이더에 각각 다른 텍스트 그룹 연결하기 슬라이드가 체인지 벼경됬을때 이벤트가 바뀐다. 방법은 2가지 작성방식만 다름 2번째 이름을 밖으로 빼는게 좋음 swiper 는 슬라이더에서 지정한 변수명 lifeSlider.on('slideChange', function () { console.log('lifeSlider.activeIndex'); }); eq()로 연결하라. lifeSlider.on('slideChange', function () { $('.main_life .txt_area .txt_wrap').eq(lifeSlider.activeIndex).show().siblings().hide(); }); 2022. 11. 11. 제이쿼리 슬라이더 응용 동일하게 html 구성 후 제이쿼리 초기화 코드 복붙 > 클래스명 새로 지정하기 var characterSwiper = new Swiper('.main_character .swiper-container', { slidesPerView: 'auto', spaceBetween: 30, scrollbar: { el: '.swiper-scrollbar', }, 슬라이더 가운제부터 시작하게 하기 var characterSlider = new Swiper('.main_character .swiper-container', { slidesPerView: 'auto', spaceBetween: 50, // active슬라이더 가운데로 centeredSlides: true, scrollbar: { el: '.swiper-.. 2022. 10. 26. 제이쿼리 슬라이더 위치변경 / 초기화 상태에서 만들기 스와이퍼에서 Add Swiper HTML Layout html 복붙 https://swiperjs.com/get-started 지금 신상 지금 바로 입고된 따끈따끈한 신상품 과자 이번 주 핫 신상 보러가기 Slide 1 Slide 2 Slide 3 2022. 10. 25. 제이쿼리 swiper 슬라이더 응용 100% 디자인에서 텍스트 목록과 슬라이더가 bar 와 함께 나올수 있도록 적용해보자 1. swiper 에서 원하는 디자인 찾기 2. get started 에서 html layout 태그 복붙 (예외없음) 3. 본인에 맞는 디자인으로 태그 수정 를 꼭 container 추가 지정할 이름 추가 더보기 KT VIP 고객 생일달해피버스데이 도넛+아메리카노 FREE! 매주 금요일 글레이즈드팩6개입 6,900원, 12개입 12,900원! LGU+ 멤버십 행사추석 맞이 5천원 금액권 증정 T멤버십 VIP/GOLD 15%할인 적립SILVER 5% 할인/적립! KT VIP 고객 생일달해피버스데이 도넛+아메리카노 FREE! 매주 금요일 글레이즈드팩6개입 6,900원, 12개입 12,900원! LGU+ 멤버십 행사추석 맞.. 2022. 10. 24. 제이쿼리 슬라이더 페이지 네이션 커스텀 (swiper) 페이지 네비게이션 커스텀 해보자 Pagination custom 먼저 html. css로 자리 잡아놓기 더보기 /* 일시정지 버튼 */ .main_slider2_wrap .btn_wrap { position: absolute; left: 0; bottom: 100px; width: 295px; height: 89px; background: url(../images/main_label.png) no-repeat; z-index: 100; text-align: center; padding-top: 40px; } .main_slider2_wrap .btn_wrap .btn_arrow { width: 24px; height: 34px; border: 1px solid black; display: inline-b.. 2022. 10. 20. 제이쿼리 swiper 슬라이더 스와이프 이미지 커스텀 스와이프 이미지로 변경 해보자 기본 제공 기능 없음 html 에 버튼 태그추가해주기 /* 메인슬라이더 일시정지 버튼 */ .main_slider_wrap .btn_pause { border: 1px solid red; position: absolute; left: 50%; bottom: 40px; z-index: 100; margin-left: 420px; width: 37px; height: 37px; border-radius: 50%; text-indent: -9999px; background: #fff; } .main_slider_wrap .btn_pause:before { content: ''; position: absolute; left: 50%; top: 50%; transform: trans.. 2022. 10. 20. 제이쿼리 슬라이더 용어정리 + 화살표 커스텀 기존코드 화살표 네비게이션 커스텀해주기 기존 코드에 이미 버튼이 들어가있지만 우리스타일로 바꾸기 위해 공통 클래스를 지정해준다. 슬라이더 단추 이미지 하나로 양쪽 바꿔서 사용해주기 기존 코드 확인후 위치 조절 이미 margin-top 에 -22px 적용되어있으므로 중앙 배치를 위해 배너높이 확인후 margin-top:-31px; 적용 반대쪽 슬라이더 버튼 뒤집어서 사용해주기 .main_slider_wrap .swiper-button-next { left: auto; right: 30px; transform: rotateZ(180deg); } 기존코드에 left 가 걸려있기때문에 right 가 적용안됨 이땐 left 를 auto 로 초기화해준다. (left는 aoto가 기본값) 페이지네이션 수정해주기 페이.. 2022. 10. 20. 이전 1 2 다음
