bxslider js 이미지 슬라이드 만들기

이미지 슬라이드 관련 javascript 플러그인 종류가 상당합니다. slick, swiper, bxslider 등 많은데 이번에 bxslider를 활용해 한번 만들어봤습니다. 최종 결과물입니다. 물론 이미지는 저작권 때문에 다른 이미지로 변경 후 캡처했습니다. 이번 디자인의 요점은 좌 우 이미지의 흑백 처리와 페이지네이션(가운데 이미지 왼쪽 아래의 동그라미) 스타일 수정입니다. 가운데 이미지는 전부 보이게 하고 좌우 이미지는 화면에 따라 조금만 보이게 만들고 나면 이렇게 보이게 됩니다. 1. 페이지네이션 . bx-wrapper. bx-pager에 absolute 속성을 준 다음 위치를 조정합니다. 그리고 아래처럼 동그라미 모양을 변경해 주면 됩니다. .bx-wrapper .bx-pager.bx-defa..

2024.03.30