로그
에루라보
블로그 작업노트 3: 이미지 슬라이더
377 views as of April 20, 2021.
⚠ 이 글은 2년 이상 지난 이야기에요. 읽으실때 참고!
글쓰다보면 이미지를 여러개 나열해야하는 경우가있다.
이런거야 뭐 천천히 하나씩 나열해도 스크롤을 많이 먹지않지만 사진크기가 좀만커져도 이게 웹툰인지 포스팅인지 모를 현상이 일어난다.
그러므로 에디터에서 이미지를 줄바꿈없이 나열로 작성하면 앞단에서 이를 분석해 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은 구조만 잘 짜주면 동적으로 슬라이더를 잘 만들어준다.
끝.
241217 추가
제목 정리하러 왔는데 현재는 이 슬라이더 기능을 비활성화해놨다. 다른 기능으로 이미지를 나열하기로 사양을 변경해서...
#블로그
0
개의 댓글
에루라보 콜렉션의 다른 글
로그 카테고리의 다른 글
04/21/2021
3자 어항 일기 2편: 수초 식재
무균 배양 수초가 왔다. 알테난테라 레이네키 미니와 스트로징 레펜스이다.뭔 이름이 이렇게 어려운지 모르겠네. 이전 어항때는...
04/19/2021
3자 어항 일기 1편: 어항 리셋
집에 3자어항이 있다3자래봤자 깊이가 짧아서 물량은 많아야 자반수준의 용량이긴하다. 예전에 쿠바펄 수초항으로 세팅해뒀으나...
04/12/2021
블로그 작업노트 2: 리뉴얼
블로그 리뉴얼을 또했다. 기존에 둥글둥글한 레이아웃이 넘나 맘에 안들어서 걍 박스타입으로 냘럽한 느낌을 주면서 패딩을 많이...
