반응형 slick 슬라이드4 [slick] slick 슬라이드 배경 scale 효과 See the Pen WNrYbqv by wao816 (@hy16) on CodePen. codepen 0.25사이즈로 결과값 확인해주세요! gnb 메뉴는 글씨를 영문/한글 둘다 써서 높이값을 이용하여 마우스 hover했을 때 transformtransform:translateY(-85px); 가 작동하며 아래에 있던 한글 gnb 메뉴 글씨가 보이게 한다. slick 슬라이드는 처음 background-size를 100% 으로 주고 .active 됐을 때 100% 로 설정하면 점점 줄어드는 효과가 생긴다. (html에서 script는 마지막 태그 하단에 작성하였습니다.) 2020. 7. 30. [slick] slick 슬라이드 row html 구조 순서대로 이미지1 -> 이미지2 -> 이미지3 ->이미지4 > 이미지A -> 운동시설B -> 이미지C ->이미지D 입니다. 이미지로 넣었으면 중간에 구간 식별이 더 쉬었을텐데 이미지대신 배경 핑크색을 넣어서 중간 구별이 안가는것 같아 글씨를 추가했습니다. slick slide 옵션 rows : 2 -> 세로로 2줄 slidePerRow:3 -> slidesToScroll 과 같은 옵션인것 같다. ( slidesToShow: 3, -> 보여지는 슬라이드 갯수 slidesToScroll: 3 -> 스크롤 넘겼을때 넘어가는 슬라이드 갯수 ) arrows -> 이전/다음버튼 추가 dots -> 페이징 버튼 infinite -> 슬라이드 갯수에 상관없이 무한반복 $(document).ready(fu.. 2020. 7. 17. [slick] slick 슬라이드 - 기본(+이전,다음버튼) 이전다음 버튼은 slick 슬라이드에서 prevArrow , nextArroow 옵션을 추가하면 된다. $(document).ready(function(){ $('.responsive').slick({ dots: true, prevArrow: $('.prev'), nextArrow: $('.next'), infinite: false, speed: 300, slidesToShow: 3, slidesToScroll: 1 }); }); 맛집사진 갤러리 맛집 & 핫플이 필요하신 경우 연락주세요. 언제든지 환영합니다. slick 슬라이드 왼쪽은 파란색 배경 before 오른쪽을 슬라이드 입니다. 이전 다음 #container{width:1500px; margin:50px auto 0; } #container h2.. 2020. 7. 16. [script] slick 슬라이드 visual 영역(arrow, dots) slick 슬라이드를 이용한 visual 영역 이미지 scale 축소되는 애니메이션효과. slick 슬라이드 next prev 버튼 - 옵션 arrows page 버튼 - 옵션 dots slick script 효과는 코드펜에서 찾아서 적용해봤습니다! $(document).ready(function(){ var $slick_carousel = $(".slide_wrap"); $slick_carousel.on('init', function(event, slick) { $(".slide_li").eq(0).addClass("active"); }); $slick_carousel.on('afterChange', function(event, slick, currentSlide){ $(".slide_li").remo.. 2020. 5. 9. 이전 1 다음 반응형
