# Slick
slick 스와이핑 역방향 안되는 문제 해결법
slick 옵션중에 infinite와 swipeToSlide 로 스와이핑 가능하게 설정한 경우에index 1번인 슬라이드 뒤로는 스와이핑이 안되는 버그가 있다.slick.min.js를 열어보자(b=-1a.options.slidesToScroll ,c=-1a.option

react-slick breakpoint, customPaging 설정하기
프론트엔드 개발을 하다보면 캐러쉘이라고도 불리는 slider를 구현할 일이 정말정말 많은데 이 때 우리를 정말 편리하게 해주는 갓갓갓라이브러리가 있다. 바로 ✨slick✨이다. https://www.npmjs.com/package/react-slick WOW…! 어

react slick 구현
slick라이브러리로 요새 슬라이더랑 캐러셀 많이 구현한다고하길래메인 구현하면서 공부할겸 한번 설치해봤다.npm 통해서 slick설치하고코드 적용하면 완료되어야하는데 에러메시지가 떴다.react-slick should be listed in the project's d
React-Slick 뭐가 문제야!!
React Slick 을 공부하면서 써보았었다. 당시 때 는 잘 작동하여, 그냥 저냥 API 보고 만들면 되겠거니 했지만, 오늘 요상스럽게 작동하기 시작한것이 마음에 걸려 정리하고자 글을 쓴다React Slick 은 매우 잘 정의되어 있는 Carousel 이다.하지만

[초보 중의 초보] 초보 공부를 시작하다 15
제이쿼리의 가장 많이 사용하는 라이브러리 중 하나가 slick이다. slick의 기본 버튼이 있긴 한데, 이전과 다음버튼은 css를 수정하기가 어렵게 느껴졌다. 구글을 뒤지다가 찾은 방법이 새로운 클래스를 만들고 slick의 기능에다가 내가 지정한 클래스로 바인딩을 해
jQuery slick-paging custom + option
arrow : //화살표 넘기기 여부 (default: false), dots : //네비게이션버튼 (default: false), slidesToShow : //한번에 보여줄 사진의 수, slidesToScroll : //한번에 넘길 사진의 수, autoplay :

react-slick으로 slick 구현하기 - feat.useRef 잘쓰기
react-slick을 이용해서 한페이지에 여러개의 carousel(slick) 구현하는 과정을 기록한 글입니다. 다소 부족한 점이 있으나 공부의 목적으로 작성하는 글이니 여러 배움을 주시는 피드백을 환영합니다!
slick on('init', function) 이벤트가 동작 안할때
afterChange나 beforeChange는 동작하는데init 이벤트가 동작을 안한다면 다음과 같은 순서로 코드를 정렬해보세요
slick responsive 때문에 jQuery가 동작 안할때
breakpoint에서 리렌더링 되는건지 jQuery선택자로 잡아놓은게 풀려버린다.그래서 첫 렌더링시에 없었던 element여서$().click() 같이 작성하면 선택자가 리렌더링 된 element를 못찾는다.위와같이 document를 선택자로 잡고나서 on(이벤트,

[리액트] react-slick 캐러셀
💡 react-slick은 캐러셀을 간단히 구현하게 해주는 라이브러리다.무한 캐러셀, 표시 점, 버튼 등등 다양한 옵션을 선택하여 캐러셀 구현 시간을 상당히 줄여준다.react-slick 사이트에서 slick 사용 방법과 다양한 캐러셀, 샘플 코드가 있다.아래는 그중
React-slick Custom
단지 쉽게 구현하려고 라이브러리를 이용하는 것은 아니라고 한다. 특히안정성 측면에서 내가 직접 만든 것보다 나을 수도 있다고 한다. reacr-slick은 이번주에만 908,386건이나 다운로드 되었다! 와우... 설치하기 https://www.npmjs.com/package/react-slick 여기를 보고 따라하면 된다. 고르기 https://r...

React-nodebird -05
현재 내가 만들고 있는 트위터 비슷한 이 노드버드 프로젝트에는 사람들이 게시글을 올릴 수 있고, 그 게시글에는 기본 글 외에도 이미지,해쉬태그 등을 올릴 수 있을 것이다.이미지 작업을 해보자.우선 post reducer의 맨 처음 게시글에는 3종류의 이미지를 넣어주었다

slick 슬라이더 적용하기.
퍼블리셔가 유용하게 사용할 수 있는슬릭 (slick)슬라이더 적용 방법을 알아보자.슬릭 공식홈페이지 :http://kenwheeler.github.io/slick/슬라이더를 적용시키는 방법은 두가지가 있다.1\. Download Now 버튼으로 파일을 다운받아
slick(슬릭) 슬라이더 정지, 재생 버튼 추가하는 함수 (스위치) addClass, removeClass
클래스 추가하는 함수클래스를 제거하는 함수제이쿼리 재생 정지버튼 할때 함수에 쓰임// CSS에 .on 붙여쓰기 (띄어쓰기 X)이 방법은 슬릭에서만 쓰인다.스와이퍼는 다른 방법으로 적용된다.
React | react-slick (library)
이번 2차프로젝트에서 슬라이드를 구현해야했는데, 이전에 캐러셀을 바닐라 자바스크립트로 만들어봤었고, 라이브러리는 한번도 사용해보지 않았기 때문에 궁금증이 컸다. 한편으로는 직접 만들어서 사용하는 것이 라이브러리의 사용법을 익히는 것보다 빠르고 편하지 않을까? 라고 생각

[TIL]_React - Slick slide
리액트 슬라이드 라이브러리📝 SimpleSlider 사용법공식 사이트 👉 https://react-slick.neostack.com/👉 기본 설치와 슬라이더의 css작업을 위한 npm 두가지 모두 설치해야한다. ✅ 슬라이더의 기본 형태는 공식문서에 들어

SHOE-KREAM 메인페이지
메인부분의 케러셀 부분은 1차와 달리 라이브러리 사용이 가능했기에, slick 라이브러리를 통해서 쉽게 구현할 수 있었다. slick 라이브러리를 구현할때 주의해야할 점은 css 부분인데, 처음 slick 라이브러리를 갖다 붙였을땐 화살표가 안보일 수도 있고, 밑에 .