제이 쿼리 슬라이드 예제 - jei kwoli seullaideu yeje

개인적으로 가장 잘되있다고 생각하는 이미지 슬라이드 플러그인입니다.

플러그인 자체에 사용 예제도 많고 사용법도 간단해서 자주 사용합니다.

또한 반응형까지 지원해줍니다.

우선 kenwheeler.github.io/slick/ 사이트에 가서 플러그인을 다운 받습니다.

상단 메뉴의 get it now > 다운로드에서 다운로드받으시면 됩니다.

01. 추가

사용방법은 가장 먼저, jqurey와 js, css를 추가해줍니다.

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="slick/slick.min.js"></script>

혹은 설치하지 않고 사용할때에는 아래 소스를 이용하여 추가해줍니다.

CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm//slick/slick.css"/>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/npm//slick/slick.min.js"></script>

그 다음 html에 div이나 ul을 사용하여 마크업해줍니다.

<ul class="slick">
	<li>이미지1</li>
    <li>이미지2</li>
    <li>이미지3</li>
</ul>

그 다음에는 js를 추가해줍니다. 아래항목은 기본적인 코드입니다 :)

$('.slick').slick();

다음은 slick 슬라이드의 옵션입니다.

$('.slick').slick({
  dots: true, //페이지 네비게이션
  arrows:true, // next, prev 이동 버튼
  autoplay:ture // 자동 넘김 여부
  infinite: false, //반복설정
  speed: 300, //슬라이드 속도
  autoplaySpeed : 10000,   // 자동 넘김시 슬라이드 시간
  pauseOnHover : true,// 마우스 hover시 슬라이드 멈춤
  vertical : false,  // 세로 방향 슬라이드 옵션
  prevArrow : "<button type='button' class='slick-prev'>Previous</button>",        
  nextArrow : "<button type='button' class='slick-next'>Next</button>", //화살표 커스텀
  slidesToShow: 4, //보여질 슬라이드 수
  slidesToScroll: 4, //넘겨질 슬라이드 수
  responsive: [ // -> 반응형 옵션
    {
      breakpoint: 1024, // 반응형 ~ 1024
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,// 반응형 ~ 600
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,// 반응형 ~ 480
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

이외의 다양한 옵션과 예제들이 있어서 따로 커스텀해주지 않아도 좋아요 :)

하단의 사이트에서 관련 예제 확인하시고 참고하여 작업하면 좋을거같아요~

kenwheeler.github.io/slick/

슬라이드 예제

관련 글

Frontend

mobx 메모..

— mobx란? 상태관리 라이브러리 중 하나로 Redux에 비해 러닝커브가 낮으며 보일러플레이트 소스가 거의 없다는 장점이 있음 — 데코레이터 드랍 이전 버전에는 데코레이터를 활용하는 형태를 취하면서 복잡한 설정 방법이 필요했으나 mobx6부터는 데코레이터 형태가 드랍되면서 간결한 소스코드 더보기…

Frontend

빌드 용량 최적화 경험 메모

환경 React + Typescript + Antd  CRA 사용 eject 없이 craco 사용 1. 상황 빌드 시 시간소요가 크고 cpu 사용량이 급격하게 올라가서 컴퓨터가 버벅이는 현상 발생 2. 원인 분석 webpack-bundle-analyzer를 사용해서 빌드된 파일을 분석해보니 page 더보기…

Angular

svg path 상황에 따라 다른클래스 부여

svg path에 상황에 따라 다른 클래스를 부여하고 싶은 상황이 있었는데 svg는 [class] 속성이 먹지 않는 이슈가 있어.. 삽질을 좀했음 상황 —– 발전왕 지도에서 발전량에 따라 색상을 클래스(css)를 변경 적용하고자 하였음 발전량이 0~1이면 .level1 발전량이 1~2이면 더보기…

개인프로젝트를 하며 jquery로 이미지 슬라이드를 구현하기위해 lightslider를 이용해서 구현했다.

가이드

JQuery lightSlider

JQuery lightSlider JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation

sachinchoolur.github.io

[GITHUB 주소] https://github.com/sachinchoolur/lightslider

GitHub - sachinchoolur/lightslider: JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navig

JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation - GitHub - sachinchoolur/lightslider: JQuery lightSlider is a lightweight responsive Content slider...

github.com

플러그인 호출

<link rel="stylesheet" href="../css/slider.css" type="text/css">
<script type="text/javascript" src="../js/slider.js"></script>

플러그인을 호출할때는 github 주소를 직접 쓰지 말고, 위처럼 소스를 다운받아서 내부에서 호출되도록 사용해야한다.

당연히 다들 알고 있겠지만 네트워크가 안되는 환경에서는 해당 플러그인을 사용할 수 없고,

github소스는 업데이트 될 수 있으므로 알맞는 버전으로 다운받아 사용하도록 하자.

JAVASCRIPT

$('#image-gallery').lightSlider({
	gallery:true,
	item:1, // 대표이미지 갯수
	thumbItem:5, // thumbnail 노출될 이미지 갯수
	slideMargin: 50, // 이미지별 margin
	speed:500,
	loop:true, // 마지막사진에서 자동으로 처음으로 다시 돌아갈것인지에 대한 여부
	adaptiveHeight:true, 
	onSliderLoad: function() {
		$('#image-gallery').removeClass('cS-hidden');
	}
});

아래의 html을 작성 후 위의 javascript를 선언해주면 이미지 슬라이드는 간단하게 작성완료된다. 

HTML

<div class="item">            
	<div class="clearfix" style="max-width:474px;">
		<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
			<li data-thumb="../images/thumbnail/photo01.jpg">
				<img src="../images/real/photo01.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo02.jpg">
				<img src="../images/real/photo02.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo03.jpg">
				<img src="../images/real/photo03.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo04.jpg">
				<img src="../images/real/photo04.jpg" />
			</li>
			<li data-thumb="../images/thumbnail/photo05.jpg"> <!-- thumbnail 위치 -->
				<img src="../images/real/photo05.jpg" /> <!--실제파일위치 -->
			</li>
		</ul>
	</div>
</div>

주석에 표기한것과 같이 li의 자식요소인 img의 src는 이미지가 상단에 띄워질때 실제 파일의 경로를 작성해주면 되고

li의 data-thumb 속성으로는 해당 파일의 thumbnail이미지의 경로를 작성해주면 된다.

li의 data-thumb 속성으로 썸네일을 노출했다가, 마우스 클릭이나 온로드 이벤트시 img의 경로를 불러와 호출하게 된다.