LIBRARY8 Slick-slide : 슬라이드 일시정지 아이콘 만들기 시작 정지 버튼을 감싸는 div를 만들어 위치를 조정하면 편하게 이동할 수 있습니다. .slide-btn-wrap { position: absolute; bottom: 30px; left: 50%; transform: translateX(60px); .slide-btn-pause { color: $wh; text-shadow: 1px 1px 3px rgba($bk, 0.6); font-family: 'Line Awesome Free'; font-weight: 900; font-size: 3.5em; &:hover { color: $pt; } } .slide-play { &::before { content: "\f144"; } } .slide-pause { &::before { content: "\f28b.. 2021. 1. 29. Slick-slide : 도트 수정하기 기본 토드가 가상클래스에 문자로 입력되어 있기 때문에 우선 가상클래스를 안보이게 해줍니다. .slick-dots { button { &::before { display: none; } } } 도트의 위치는 .slick-dots에서 이동시켜줍니다. .slick-dots { bottom: 20px; button { &::before { display: none; } } } button 에서 비활성화된 토트의 디자인을 만들어 줍니다. .slick-dots { bottom: 20px; button { width: 10px; height: 10px; border: 2px solid $pt; border-radius: 50%; box-shadow:1px 1px 3px rgba($bk, 0.6); &::before .. 2021. 1. 28. Slick-slide : 슬라이드 화살표 변경하기 기본값 화살표는 버튼 부분이 잘 보이지 않아 변경해주어야 합니다. 개발자 창을 열어 버튼 안쪽 가상클래스 ::before를 선택해 보면 기본 화살표를 확인할 수 있습니다. .slick-top { .slick-arrow{ // 두 화살표의 공통요소를 입력합니다. } .slick-prev { // 좌측 화살표의 위치값을 넣어줍니다. ::before { // 좌측 화살표의 요소를 입력합니다. } } .slick-next { // 우측화살표의 위치값을 넣어줍니다. &::before { //우측 화살표의 요소를 입력합니다. } } } icons8.com/line-awesome Download 158k Free Icons + Illustrations, Photos, and Music Download design e.. 2021. 1. 28. Slick-slide : 주요 기본 Setting 값 Speed in millisecondsAutoplay Speed in millisecond setting default play autoplay false 자동으로 다음이미지 보여주기 autoplaySpeed 3000 다음이미지로 넘어갈 시간 arrows true Prev/Next 화살표 dots false 아래점 fade false 페이드인/아웃 initialSlide 0 첫번째 슬라이드 이미지 pauseOnFocus true 포커스가 들어오면 슬라이드 이동 멈춤 pauseOnDotsHover false 마우스 호버시 슬라이드 이동 멈춤 responsive none 중단 점 및 설정 개체를 포함하는 개체 (데모 참조). 주어진 화면 너비에서 설정 세트를 활성화합니다. 지정된 중단 점에서 슬릭을 비활성화.. 2021. 1. 28. library - slick slide : single item 수정하기(기본형) 기본형 슬라이드를 만들기 위해 슬릭 슬라이드 라이브러리를 링크시켜 줍니다. 준비된 이미지를 넣어줍니다. 기본형 코드를 comm.js에 입력합니다. $(function () { $('.slick-top').slick(); }); 변형 1. 자동으로 넘겨주기 + 2초마다 실행 + 슬라이드 도트 만들기 추가 $(function () { $('.slick-top').slick({ autoplay: true, autoplaySpeed: 2000, dots: true, }); }); 변형 2. 자동으로 넘겨주기 + 5초마다 실행 + 슬라이드 토트 만들기 추가 + 슬라이드 화살표 제거 $(function () { $('.slick-top').slick({ autoplay: true, autoplaySpeed: 500.. 2021. 1. 28. library - slick slide 시작하기 1. CDN 으로 연결 title 밑에 아래 주소를 붙여넣어줍니다. //CSS //JS 2. 다운 받아서 링크 아래 사이트에서 파일을 다운받아 줍니다. kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 꼭 필요한 파일만 복사하여 내폴더 안에 붙여넣기 한 후 html파일에서 링크합니다. *jquery 파일이 있어야만 슬라이드가 실행됩니다. 함께 링크 시켜주세요.. 2021. 1. 28. Bootstrap - container (컨테이너) Fixed Container 고정 컨테이너 .container : 반응형 고정 너비 컨테이너를 제공 너비(max-width)가 화면의 크기에 따라서 바뀝니다. 매우작음 2021. 1. 23. Bootstrap link 하기 MaxCDN css는 에 안에 넣어줍니다. script는 안 또는 밑에 넣어줄 수 있습니다. bootstrap의 css 파일은 나의 css 파일보다 윗쪽에 넣어줍니다. (위에서 부터 순서대로 읽어오기 때문에) 파일 다운받은 후 링크 시켜 사용할 수 있습니다. getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 2021. 1. 23. 이전 1 다음
