본문 바로가기

javascript/library5

[slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item .slick-slide { margin: 0 30px; // space(여백)/2 } .slick-list { margin: 0 -30px; // space(여백)/-2 } Parameter for space between slides · Issue #582 · kenwheeler/slick I noticed that all your demos are applying no space between the slides but rather you are creating the appearance of space by using heading tags as the content in each slide, which have equal margi... github.com [slide] slick 사용법(+반응형.. 2021. 10. 23.
[slide] swiper v5부터 ie 미지원! 2020년 3월에는 youtube가 버리더니, 플러그인들도 하나 둘 IE를 버리고 있다. 바라컨데, 이왕 이렇게 된 거 모든 플러그인들이 IE를 버려줬으면 좋겠다. 아예 이도 저도 안되면, 언젠가 IE를 버리지 않겠는가. IE 없는 세상이 오길 바라며. 아래는 swiper 버전 별 CDN을 확인할 수 있는 링크이다(IE 고려시, 무조건 v5 미만으로!) Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fas.. 2021. 1. 16.
[툴팁] tooltip, 쉽고 쉽게 만들기: tippy.js tooltip은 일반적으로 :hover나 toggleClass()로 제어되는데, 플젝에 따라, show/hide 외 스크롤에 따른 액션이 요구될 때가 있다. tippy.js과 함께라면, 스크립트와의 싸움을 피할 수 있다. tippy.js는 popper.js를 기반으로 업그레이드화된 플러그인으로, popper.js의 스크롤 액션이 default로 들어가 있다. 여기서 스크롤 액션이란, 예로, tooltip의 위치를 상단으로 설정(placement: 'top')하였을 때, 스크롤에 의해 tooltip이 안 보이게 될 시, 자동으로 tooltip의 위치를 아래로 내려준다. 또 스크롤을 올리면, 다시 상단으로 올려준다. 1. 플러그인 연결 make tooltip! 2. tippy API 중 placement s.. 2021. 1. 12.
[slide] slick 사용법(+반응형) How to use slick.js 1. css 2. html / script jQuery가 필요한 슬라이더로, 요구되어지는 jQuery의 버전은 최소 1.7 이상이다. 기본형(default) : pager, prev/next button, loop 기능을 가진 full size의 슬라이드가 구현된다. Slide 1 Slide 2 Slide 3 3. 옵션 swiper만큼이나 역시 정~말~ 다양한 옵션들이 있는데, 실무 작업시 자주 사용하는 옵션만 정리해보았다. Parameter Type default 기능 dots boolean false dot 모양의 pager infinite boolean true 무한 스와이프 slidesToShow number 1 한 화면에 보이는 슬라이드 개수 variableWidth boolean false 각.. 2021. 1. 10.
[slide] swiper 사용법(+반응형) [플러그인/슬라이드] swiper v5부터 ie 미지원! 어제 인터넷 사업하는 친구에게서 연락이 왔다. 친 : 야, 플래시 왜 이래? 나 : 12월 31일에 플래시랑 이별인사 안 했어?ㅎ 했어야지~ 보내줘~ 친 : 슬라이드가 안돼! 나 : 응? 에??? 슬라이드가 플래 fresh-mint.tistory.com 1. css 위와 같이 CDN을 가져와도 되고, 다운로드하여 사용해도 된다. 단, 내용 변경은 안되고, 커스텀은 프로젝트.css에서 선택자를 가져와 수정한다. (최신버전의 CDN 혹은 파일다운로드는 공식 사이트: https://swiperjs.com 에서, 이전 버전은 https://cdnjs.com/libraries/Swiper 에서 확인 가능하다) 1-1. scss 2. html / script.. 2021. 1. 10.