본문 바로가기
홈페이지제작

bxSlider 이미지 슬라이드

by 진격의 파파 2022. 10. 21.
반응형

홈페이지를 제작하다 보면 

이미지 슬라이드 기능을 자주 사용하곤 하는데 아주 좋은 bxSlider 입니다.

사용하기도 매우 쉽고  MIT 라이센스로 무상으로 제한없이 누구나 사용 가능하며,

반응형 홈페이지에도 적용되니 이보다 좋을수 없을듯합니다.

 

참고로 MIT 라이센스는 

미국 매사추세츠 공과대학교(MIT)에서 해당 대학의 소프트웨어 공학도들을 돕기 위해 개발한 라이센스입니다.
MIT 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋지만 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 합니다. 그리고 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다.

 

뭐 구글에 bxSlider 검색하면 많이 나오긴 합니다.

아무튼 전 이곳에 남겨 봅니다.

 

사용법은

 

See the Pen Untitled by 박상언 (@zsrcvkwa-the-animator) on CodePen.

상단에 css 및 js 선언을 해주고

<ul class="bxslider">
  <li><img src="images/img01.jpg" /></li>
  <li><img src="images/img02.jpg" /></li>
  <li><img src="images/img03.jpg" /></li>
</ul>

처럼 이미지 내용 넣어주고

 

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.bxslider').bxSlider();
});
//]]>
</script>

처럼 스크립트 적용시키면 됩니다.

차~암 쉽죠?

위 CODEPEN 확인하시고 궁금하면 구글링 더 해보시면 도움 될듯요..

 

암튼 가끔씩 이용하는데 찾으려하면 생각이 잘 안나서 ㅎㅎ;;

 

반응형

'홈페이지제작' 카테고리의 다른 글

css 이미지 수직 정렬  (0) 2022.10.26
css 이미지 가운데 정렬  (0) 2022.10.25
css 자동줄바꿈  (0) 2022.10.19
css 마우스 오버 버튼 효과들  (0) 2022.10.11
CSS 따라다니는 배너 만들기  (0) 2022.10.07