naver flicking

#naver flicking

 

캐러셀 = 롤링배너

기존 사용해본 플러그인으로 부트트스랩 캐러셀, bx슬라이더, 슬릭, 스와이퍼 등등

여러 라이브러리를 써봤는대 네이버에서 캐러셀이 나왔다고 해서 한번 써보았다.

 

작업중에 샘플사이트를 확인하던중 네이버에서 만들었다는 캐러셀을 처음봐서 당장 써보았다.

첫 작업이라 익숙하지 않았던 차에 깃허브에 문의 사항을 문의하니 친절하게 예시 작업을 아래와 같이 코드펜으로 

답변을 주셨다!!!😘👍👍

 

2가지 섹션으로 주신것은 답변으로 주신 예시이다.

아래 이미지가 들어간 것은 실제로 작업한 나의 작업!!

두개를 합쳐서 마치 바뀌는것과 같은 효과를 원하셔서 해당작업을 진행했다.

샘플사이트를 올릴려고 했으나 해당사이트는 디자인을 바꿔서 볼수가 없었다..!!

그래도 처음 써본 라이브러리였는대 뿌듯했다!

 

제일큰 차이점은 스와이퍼나 다른 슬라이더를 쓸때 캐러셀에 공통 클래스를 쓰면 같은 여러개의 캐러셀을 돌릴수 있는대 네이버는 같은 기능이라고 해도 캐러셀 아이디나 클래스를 다르게 주고 같은코드를 적으라고 답변주셨다..

이부분이 개선되면 참 좋을거 같다!

 

 

그리고 가장좋은점은 프론트 프레임워크에 npm을 사용하여 설치해서 쓸수 있다는점!!!

한번 써보는것도 나쁘지않을거 같다.

뭔가 오류 사항이나 문의사항도 네이버라서 굉장히 빠르게 답변해준다. 국산사랑👀😚

 

 

 

👀네이버 플리킹 깃허브:https://github.com/naver/egjs-flicking

GitHub - naver/egjs-flicking: 🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel

참고 : https://medium.com/naver-fe-platform/%EC%8B%9C%EC%84%A0%EC%9D%84-%EC%82%AC%EB%A1%9C%EC%9E%A1%EB%8A%94-%EC%BA%90%EB%A1%9C%EC%85%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-flicking-%EC%9D%84-%EC%86%8C%EA%B0%9C%ED%95%A9%EB%8B%88%EB%8B%A4-7ef02e2f7b9c

 

 

반응형

#제이쿼리로 짠 롤링배너

 

 

아주 예전에 퍼블리싱의 퍼자도 모를때 직접 짜면서 배웠던 롤링은 이런거군 하면서 짰던 코드라 한번 올려본다.

캐러셀을 갓다쓰면 아주좋지만 간혹 간단한것은 직접짜는것이 훨씬 가벼울지도 모른다.

원리를 알면 잘 할수 있다. (코드가 5년도 더된거라 좀이상할수도있지만 원리를 이해하는데는 도움이 된다..ㅎㅎ)

무엇이든지 그냥 짜기보단 알고 짜자!! 

 

 

 

+++++ 제이쿼리 이벤트 제거

$("선택자").off("이벤트명"); = 이벤트 제거