블로그 리뉴얼 v2.1 - 이미지 슬라이더

글쓰다보면 이미지를 여러개 나열해야하는 경우가있다.

이런거야 뭐 천천히 하나씩 나열해도 스크롤을 많이 먹지않지만 사진크기가 좀만커져도 이게 웹툰인지 포스팅인지 모를 현상이 일어난다.

그러므로 에디터에서 이미지를 줄바꿈없이 나열로 작성하면 앞단에서 이를 분석해 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은 구조만 잘 짜주면 동적으로 슬라이더를 잘 만들어준다.

끝.

>> 다음 리뉴얼 로그 보기

>> 이전 리뉴얼 로그 보기