⚠ 이 글은 2년 이상 지난 이야기에요. 읽으실때 참고!
기록
eruLabo
블로그 리뉴얼 v2.1 - 이미지 슬라이더
345 views as of April 20, 2021.
글쓰다보면 이미지를 여러개 나열해야하는 경우가있다.
이런거야 뭐 천천히 하나씩 나열해도 스크롤을 많이 먹지않지만 사진크기가 좀만커져도 이게 웹툰인지 포스팅인지 모를 현상이 일어난다.
그러므로 에디터에서 이미지를 줄바꿈없이 나열로 작성하면 앞단에서 이를 분석해 slick slider
를 적용하는 방식을 강구해보았다.
결과물
이제 짱큰 이미지 파일을 연속으로 적으면 자동으로 슬라이더가 적용된다.
소스코드
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
});
});
}
Copy
내 로그의 구조는 #postBody > p
이기 때문에 p
태그가 가지는 자식중에 img
태그가 2개이상인 경우에 대해서 슬라이더를 적용할 수 있도록 셀렉터를 구성했다.
slick은 구조만 잘 짜주면 동적으로 슬라이더를 잘 만들어준다.
끝.
#기록 #eruLabo #이미지 슬라이더
0
개의 댓글
Collection. eruLabo
01.
블로그 리뉴얼
2021
02.
블로그 리뉴얼 ver2
2021
03.
블로그 리뉴얼 v2.1 - 이미지 슬라이더
2021
04.
블로그 리뉴얼 v2.2 - 애드센스
2021
05.
로그인이 안되서 진행한 블로그 리뉴얼
2023
06.
블로그 개편 2024
2024
07.
블로그에 다시 광고를 달게되었다
2024
08.
블로그 디자인 리뉴얼 및 광고 적용 완료
2024
09.
블로그 사이드바 및 통계 추가
2024
10.
사이트(블로그) 댓글 설계 및 기능 기획
2024