⚠ 이 글은 2년 이상 지난 이야기에요. 읽으실때 참고!
일기
블로그 리뉴얼 v2.1 - 이미지 슬라이더
글쓰다보면 이미지를 여러개 나열해야하는 경우가있다.
이런거야 뭐 천천히 하나씩 나열해도 스크롤을 많이 먹지않지만 사진크기가 좀만커져도 이게 웹툰인지 포스팅인지 모를 현상이 일어난다.
그러므로 에디터에서 이미지를 줄바꿈없이 나열로 작성하면 앞단에서 이를 분석해 slick slider
를 적용하는 방식을 강구해보았다.
결과물
이제 짱큰 이미지 파일을 연속으로 적으면 자동으로 슬라이더가 적용된다.
소스코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
window.onload = function() {
slickInit();
};
function slickInit() {
console.log('slick', 'slickInit');
var imagePacks = $('#postBody p:has(img + img)');
imagePacks.each(function() {
$(this).slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
adaptiveHeight: true
});
});
}
|
내 로그의 구조는 #postBody > p
이기 때문에 p
태그가 가지는 자식중에 img
태그가 2개이상인 경우에 대해서 슬라이더를 적용할 수 있도록 셀렉터를 구성했다.
slick은 구조만 잘 짜주면 동적으로 슬라이더를 잘 만들어준다.
끝.
D.2021-04-20
V.289