[jQuery] 간단한 이미지 슬라이더

뭐 대단한 것은 아니다. 여러 장의 이미지를 이전, 다음 버튼을 클랙할 때마다 좌, 우로 슬라이딩 되면서 보여주는 게 전부이다. 이런 간단한 것을 간만에 했더니 좀 시간이 걸렸는데.. 자주 쓰던 것들도 한동안 안쓰니 머리 속에서 시원스레 지워지나 보다. ㅋ

먼저 jQuery 코드이다.

다음은 HTML 코드이다.

그리고 마지막으로 CSS 코드이다.

 

이렇게 만들어 놓고.. 문득 든 생각이 슬라이딩 방향이 맞는 건가 하는.. 쓸데없을 수도 있는 생각이 들기 시작했다. 맞는 것 같기도 하면서 사람들마다 생각하는 게 다를 수도 있기 때문에.. 일단 방향을 바꿔달라고 하면 바꾸면 되니까.. 방향 바꾸는 거야 앉아서 밥먹기다. ㅋ

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

6 thoughts to “[jQuery] 간단한 이미지 슬라이더”

  1. 선생님~ 너무 감사해요~
    해외 구글링으로 짜집기 해서 사용하던 소스가 버그가 나서 다시 망망대해를 뒤지던 중에
    (딱 원하는 UI의 플러그인이 전혀 없더라구요. ㅠㅠ)
    선생님 블로그에서 팁을 얻고 가요~!!! 잘 고쳤습니다!!! 너무 고맙습니다!!! 사랑해요!!!

  2. api를 이용해서 받아온 이미지랑 글자를 div 넘기기를 해서 사용했는데 넘길때 이전의 페이지가 같이 나오는데 이건 어떻게 바꿔야하나요??혹시 자문을 구할 수 있을까요???

  3. 편리님 감사합니다. 슬라이드를 플러그인 사용하지 않고 직접 만들어서 사용하고 싶었는데요..
    초보인 저에게는 넘 어려웠습니다. 그러다 찾다 찾다 여기까지 들어오게 되었네요..
    편리님 코드로 사용해 보니 잘됩니다.. 정말원했던 거였어요.. 무한 슬라이드..
    코드를 이해하려고 했지만… 어렵네요.. idx idx2를 선언해서 한개는 보여지게 한개는 숨기게 하는거같은데 코드를 이해가 안되네요.. 초보는 힘들군요.. 암무튼.. 감사합니다~

    1. 댓글 남겨주셔서 감사합니다.
      저두 처음엔 이렇게 직접 코드를 작성하곤 했는데요..
      요즘은 귀찮음에 그냥 플러그인 사용하는 경우가 많아지고 있습니다. ^^;

Leave a Reply

Your email address will not be published. Required fields are marked *