-
(HTML / CSS / Javascript / jQuery ) slick 슬라이더 심화 예제 (프로그레스 바 + 재생, 정지 버튼)
2020. 2. 9.
See the Pen 삼성 메인 배너 슬라이더 2차 (slick) by kimyangsun (@kimyangsun) on CodePen.
https://codepen.io/kimyangsun/pen/vYOBgoJ
삼성 공식 사이트의 메인 슬라이더를 연습삼아 따라 만들어봤습니다.
사용한 슬라이더 플러그인은 slick 입니다. 해당 코드는 반응형으로 제작하였으며 모바일 버전은 또 다르게 구현됩니다.
게이지바가 시간에 맞춰 차고 재생 및 정지 버튼을 클릭하면 그에 따라 멈춥니다.
그리고 슬라이더 내용쪽에 마우스를 올려놓으면 또다시 그에 따라 멈춥니다.
마우스를 슬라이더 바깥으로 움직이면 다시 재생이 됩니다.
자세한 코드는 링크를 통해 확인할 수 있습니다.
'코딩 기록 > 코딩 소스 [HTML & CSS & JS]' 카테고리의 다른 글
( HTML / CSS / javascript / jQuery ) 스크롤 매직 예제 - setPin 을 이용하여 스크롤하면서 요소 고정시키기. (0) 2020.02.09 (HTML / CSS / javascript / jQuery) slick 슬라이더 dots 페이지 버튼에 각자 다른 글씨 삽입하기. (3) 2020.02.09 (HTML / CSS) text-overflow : ellipsis 사용 코딩소스 (0) 2020.02.09 (스크롤에 따라 메뉴 표시시키기) 페이지 스크롤 메뉴 [jQuery] (2) 2020.02.02 (jQuery를 이용한 슬라이더) 퍼센트 게이지가 차면 넘어가는 슬라이더 소스 (정지 가능) (0) 2020.02.02 댓글