Today : 82
Yesterday : 114
Total : 860,530
«   2021/10   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Archives
Today
82
Yesterday
114
Total
860,530
관리 메뉴
프로필사진 방명록
Today:82     Yesterday:114     Total:860,530

호기심 가득! 모지모지!

슬라이딩 배너, bxslider로 해결하세요~ 본문

IT디자인 | 늘배우는자세

슬라이딩 배너, bxslider로 해결하세요~

2016. 5. 20. 15:19
728x90

bxslider, 여러 슬라이딩 배너효과 스크립트들을 찾아보고해도 이만한 스크립트가 없네요. 왠만한 형태의 슬라이딩 배너는 이거 하나면 끝인거 같군요.

 

 

 

지난번 bxslider게시글에 올린 파일의 수정본을 새로 올릴 겸 추가로, 영역내에 여러 배너를 하나씩 이동시키는 효과를 포함시켰습니다. 그리고, 페이지버튼의 이벤트를 클릭에서 마우스오버로 바꾸었습니다.

 

 

내용요약

 

1. bxslider기본은 페이지버튼에 클릭이벤트가 적용되어있지만, 제가 올린 건 마우스오버이벤트 적용되어 있음.

 

2. 영역안, 여러개의 배너를 하나씩 슬라이딩시키는 효과 추가

 

3. 클릭이나 마우스오버 시 슬라이딩이 아예 멈추는 오류 추가 수정

 

이번에 추가된 내용은 위의 그림 맨 아래쪽 3개의 박스가 한개씩 슬라이딩되는 효과입니다.

 

 

 var slider_03 = $('.bxslider_03').bxSlider({
   auto: true,controls:false,pager:false,maxSlides: 3,moveSlides:1,  slideWidth: 100,slideMargin:0,autoHover:true,
  });

 

소스를 보시면 위와 같이 추가되어있을겁니다. 간단히 설명을 드려보면,

 

maxSlides: 3, -> 영역안의 배너 숫자

moveSlides:1, -> 한개씩 이동하라는 의미

slideWidth: 100, -> 개별배너의 좌우폭

slideMargin:0, -> 배너간의 간격

autoHover:true, -> 오버되어있을때 슬라이딩이 멈춤

 

 

bxslider_sample_new.zip

(첨부파일은 이 게시물에 첨부된 파일이 최신입니다. 참고하세요)

 

말로 설명하는 것보다 직접 숫자를 바꿔가며 해보시는게 100배 빠를겁니다.

 

 

 

 

지난 bxslider 게시물 : http://www.mojimoji.co.kr/604 

 

 

가장보편적인 배너형태추가

sample_more_simple.html

 

 

*추가:방명록 문의 by 지누님 참고파일 첨부

bxslider_sample_jinoo.zip

 

 

 

공감 하트 버튼 눌러주실꺼죠?

728x90
댓글달고 친해지기 (62)
  • 이전 댓글 더보기
  • 모가 2016.07.28 10:10 아 탭에서 위로뜨는 서브는 필요없구요, 좌우화살표와 아래 빨간줄탭이 바뀌는 모양만 하면되거든요, bxslider로 가능할까요?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.07.28 13:13 신고 글아래 급한대로 일반적인형태 하나 추가해놓았으니 참고해보세요. 기본적인 CSS속성만 알고 계시면 충분히 수정하실 수 있을겁니다. 도움되셨길..
  • 모가 2016.07.28 13:31 고맙습니다!
  • 모가 2016.08.02 13:12 안녕하세요 또 질문이 있어서 방문했습니다; 새로추가해주신 형태에서 탭부분 말고 색상부분에 이미지를 넣을건데요, 색상부분에 마우스오버시 슬라이드를 멈추고 싶으면 어떻게 해야할지... 현재는 탭부분에 마우스오버하면 슬라이드가 멈추고, 떼면 슬라이딩되고.. 근데 색상부분에는 그냥 슬라이딩되버려서요
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.02 15:03 신고 autoHover:true
    이 옵션을 추가해주시면 됩니다.
  • 모가 2016.08.02 16:02 감사합니다. 좌우버튼 눌렀을 때는 롤링이 멈추네요. control:false 로 해도 마찬가지구요. 이에 대한 옵션값이 있을까요? 아니면 쿼리문을 써줘야할까요?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.03 13:51 신고 $(document).on('click','.bx-next, .bx-prev',function() {
    slider.stopAuto();
    slider.startAuto();

    });
    이걸 좀 응용하시면 되긴하는데... JS를 전혀 모르시죠?ㅜㅜ
  • 모가 2016.08.05 11:11 응용이 아니라 그냥 알려주신대로 하니까 잘 동작하네요. 감사합니다^^
  • 모가 2016.08.11 16:59 안녕하세요~ 오랜만에 다시 방문했어요, 계속 이거저거 만져보고 있는데요, 한가지 또 새로운 옵션을 알게되서 해보는 중인데, .bsx-next 와 .bx-prev 가 bxslider.css에 정의가 되있더라구요. 이거 모양을 바꾸고싶은데요, 그냥 .bx-next { background:url(~~~)} 로 하면 바뀌긴 하는데, 만약에 bxslider를 한 페이지에서 두번이상 사용을 하게 될 경우에는 클래스를 어떻게 주어야 할지 궁금해서요, 혹시 아시는지 궁금합니다
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.11 17:34 신고 어려운 문제네요.
    직접제가해본건아니지만, 이러면 되지않을까요? 스크립트에서 만드는 html의 정확한 속성이 아래와 같이 정의 되어질겁니다.
    .bx-wrapper .bx-next{}
    html상에서 .bx-wrapper를 <div class="aaa">..</div>식으로 한번더 감싸고,
    .aaaa .bx-wrapper .bx-next{}
    위와 같이 속성을 주면 되지않을까요?
    어디까지나 이론상입니다.


  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.11 17:35 신고 .aaaa .bx-wrapper .bx-next{}

    .bbbb .bx-wrapper .bx-next{}

    ....
  • 모가 2016.08.11 18:34 와 해결됐네요 class로 하니까 부모값이 아니라서 적용이 안되는데, id로 줬더니 먹히네요 #aaaa .bx-wrapper .bx-next {} 덕분에 또 배우고가네요, 이렇게 간단한것을; nextSelector: 랑 nextText로 해보려고 구글 엄청 검색하다가 모지님께 글 남겼는데 역시 모지님 짱짱맨이셔요~~ㅎㅎ
  • 세황이 2016.08.12 01:24 소스가 있어도 예제가 없어서 애먹었는데, 예제까지 올려주셔서 덕분에 해결했습니다. 너무나 감사합니다^^
    그런데 익스플로러 8버전등의 하위버전에서도 이 소스는 문제가 없는걸로 아는데요. 올려주신 예제는 깨져서 나오네요.
    (가령 배너가 3개라면 롤링이 되는게 아니라 아애로 쭉 3개가 나옵니다.) 왜 그런걸까요?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.12 09:01 신고 스크립트로 그려지는 부분이라서 저도 잘 모르겠네요.
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <!--[if lt IE 9]>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--<![endif]-->
    뭐 이런걸로 버전문제를 해결해야하는게 아닐까 싶으네요.
  • 모가 2016.08.23 11:50 안녕하세요! 정말 오랜만에 찾아뵙네요~~ 여러가지 slider 찾아다녀봤는데요, 뭔가 궁금한게 있어서 해보고 있는데 잘 안되네요;; 제가 질문드리던 부분에 이어지는 내용인데요, 이미지부분에 좌우화살표는 슬라이드가 좌우로 움직이고요 (탭과 슬라이드가 같이 움직이고요), 아래 탭의 좌우화살표는 탭만 이동하게 할 수 있을까요? 그래서 예제는 탭이 5~6개가 화면에 보여지는데, 만약 탭이 10개라면 5개씩 짤라서 탭화살표를 움직이면 다음 5개탭이 보여지도록요
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.23 14:17 신고 안녕하세요. 제 생각엔 이것만으로는 구현하기가 쉽지 않을거 같네요. 아래 텝부분에 대해서만 별도의 스크롤 스크립트를 써야하지 않을까 생각되어집니다. bx.이것 자체엔 그런 기능이 없는걸로 알고 있어요.
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.23 14:20 신고 근데 열씸히시네요?ㅎㅎ 회사 일하시나바요?
  • 모가 2016.08.25 13:27 네 회사다니구있는데 디자인하고 있구요, 코딩쪽은 아닌데 제이쿼리에 관심이 생겨서 공부해보고 있어요, 질문드린내용에 대해서는 다른 slider를 찾긴 찾았는데 bxslider로 해놓은게 아까워서 고쳐서 써보고싶은 마음인데 안타까워요ㅜ 모지님은 개발일을 하시나요?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.25 14:42 신고 아니요~ 저도 디자인합니다.ㅎㅎ
  • 모가 2016.08.25 15:36 아~~ 근데 제이쿼리 엄청 잘하시네요! 전 책사서 보는중인데 어려운부분도 있고, 샘플 이거저거 고쳐보고 뜯어보고 그러고 있어요ㅎㅎ;
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.08.25 16:34 신고 전 제이쿼리를 잘 몰라요~ 감으로 카피하고 붙여넣고 하는것 뿐; ㅎㅎ
  • 모가 2016.08.26 13:02 그건 제가 하고 있는건데;; 저보다 뛰어나신데요?ㅎㅎ;
  • 모가 2016.08.26 18:32 제가 얘기한 내용 구현될 수 있지 않을까요???, 일단 이미지슬라이딩좌우버튼은 제외하고요, 좌우버튼을 누르면 pager하고 이미지가 같이 움직이잖아요, 여기서 그냥 pager 부분을 5개보여주고, 5개째에서 좌우버튼 누르면 그다음 pager가 6,7,8,9,10을 보여주게 하는거.. 이부분만 어떻게 고쳐보면 될것도 같은데..어렵네요@_@
  • ra 2016.11.22 14:47 안녕하세요. 덕분에 슬라이드를깔끔하게 사용하고있습니다.
    사용하다 궁금한점있어서 댓글드립니다.
    슬라이드 전환속도를 변경하고싶은데 jquery.bxslider.min.js 여기서 speed항목이있길래 수정해봤는데 속도조정이 안되더라구요.
    따로 수정해야될부분이있은건가요?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2016.11.22 19:37 신고 위 글에서 var slider_03 = $('.bxslider_03').bxSlider({
    auto: true,controls:false,pager:false,maxSlides: 3,moveSlides:1, slideWidth: 100,slideMargin:0,autoHover:true,
    }); 이 부분의 괄호안에 한번 넣어보세요
  • kw 2017.01.24 14:26 소스 잘보고 갑니다 :) 많은 도움 된것 같아요!!!
    혹시 이소스 모바일도 적용 가능한가요 ?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.01.24 15:09 신고 예 모바일에서 드래그로 슬라이딩도 되고 합니다. 알아두시면 매우 유용합니다
  • 김지우 2017.01.31 20:45 몰라서 물어보는건데요 사이즈변경은 어떻게하나요?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.01.31 22:07 신고 기억이 가물가물하지만 css 속성을 보시면 될거같으네요 width height , 지금 제가 모바일이라서 확인을 못해보네요
  • 천사당 2017.02.21 19:24 안녕하세요? 잘 활용하려고 하는데 안되는 부분이 있어서 도움 요청 드립니다. 질문 2가지가 있는데 답변 부탁드리겠습니다.

    질문1. bxslider_02 를 활용해서 배너를 만들려고 하는데 기존 메뉴를 2개에서 5개로 늘렸는데 마우스 롤오버를 하고 나면 자동으로 가는 부분이 멈추는데 어디를 손봐야 할까요?

    질문2. 역시bxslider_02 를 사용하면서 아래 번호를 5개까지 늘려 사용중인데 번호를 이동할때 반응 속도가 느려서 숫자에 불은 들어와있는데 메인 칼라가 변경되지 않네요. 반응속도를 높이려면 어느 부분을 수정해야 될까요?

    꼭 도움 좀 부탁드리겠습니다.
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.02.21 23:42 신고 에구 평일엔 제가 늦게 퇴근하고 집에 오는지라 볼 시간이 있을지 모르겠네요. ㅠㅡㅠ 주말에 시간되면 함 살펴보고 답은 찾아봐드릴게요~ 2번째는 이 소스자체가 약간 딜레이가 있어서 그럴수도 있습니다. 어디까지나 짐작이지만, 배너슬라이드 효과를 간단한걸로 바꿔보세요.
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.02.22 22:04 신고 1번의 경우.
    $(document).on('mouseover','.bx-pager, #bx-pager1',function() {
    slider_02.stopAuto();
    slider_02.startAuto();
    });
    이걸 넣으셨나요? 이게 클릭시 멈추는걸 방지하는 소스인데...
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.02.22 22:08 신고 2번의 경우
    var slider_02 = $('.bxslider_02').bxSlider({
    각종 파라미터들...
    });
    파라미터 넣는 부분에 speed: 500 식으로로 속도조절을 해봐도 좋고, 그래도 안되면 속도를 줄이고 mode:fade를 써서 전환효과를 빠르게 줘도 좋을거같네요. 이 부분은 위에도 말씀드렸듯이 약간 문제가 있긴한거 같더라고요.
  • bjssh12 2017.03.16 15:10 감사합니다~ 잘 썼어요.ㅎㅎㅎ
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.03.17 08:05 신고 감사합니다
  • 시그너스 2017.06.17 20:02 bxslider 때문에 수많은 사이트를 뒤져봤는데 이곳에서 제일 많은 도움을 받았습니다.
    올려주신 자료와 친절한 설명으로 많은 공부가 되고 있습니다. 감사합니다.
    그런데 아직까지 이해를 못한 것이 있는데요.

    1. 배너 이미지를 클릭하면 다른페이지로 이동할 수 있도록 링크를 걸고 싶은데 어떻게 해야하는지 모르겠습니다. 예제에도 링크가 걸린 부분이 없어서 도통 모르겠네요. ^^;
    2. 배너가 보여지는 시간.. 즉 딜레이 설정을 하고 싶은데 어떻게 해야하는지 궁금합니다.

    시간이 되신다면 댓글로 알려주시면 정말 감사하겠습니다. (__)

  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.06.19 22:46 신고 링크는 <a href="#">...</a>를 이용해서 이미지 혹은 <li>..</li>를 감싸서 사용하시면 될거 같은데요...

    딜레이의 경우,
    var slider_01 = $('.bxslider_01').bxSlider({
    auto: true,autoControls: true, mode:'vertical',
    ,pause:4000
    });
    위와같이 'pause:값'을 추가하면 되는걸로 기억하네요. pause였는지 speed였는지 가물가물하네요^^
  • 투나잇 2017.06.19 12:01 bxslider 질문있습니다.
    다중으로 bxslider를 사용하는데
    .bxslider, .bxslider_01, .bxslider_02 3가지를 동시에 사용하는데
    .bxslider의 경우는 bx-page만 사용하고, .bxslider_01, .bxslider_02는 bx-prev, bx-next만 사용하고 있는데
    // 클릭시 멈춤 현상 해결 //
    $(document).on('click','.bx-next, .bx-prev',function() {
    slider1.stopAuto();
    slider1.startAuto();
    slider2.stopAuto();
    slider2.startAuto();
    });
    $(document).on('mouseover','.bx-pager, #bx-pager1',function() {
    slider.startAuto();
    slider.stopAuto();
    });
    사용하고 있는데
    1. 개체가 'startAuto' 속성이나 메서드를 지원하지 않습니다.
    2. 개체가 'stopAuto' 속성이나 메서드를 지원하지 않습니다.
    콘솔에러가 뜨고 있습니다. 이건 어떤경우인가요?
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.06.19 22:52 신고 저도 스크립트를 잘아는게 아니라서...정확한 답을 드리진 못할거 같구요.

    혹시
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="jquery.bxslider.min.js"></script>

    위와 같이 js파일들을 제대로 불러왔나요? 별거 없는데...이상하네요. 브라우저버전을 탈만한 소스도 아니고...저도 잘 모르겠네요.

  • 콜리콜리 2017.07.04 13:21 혹시 맨아래 추가하신 것에서 이전, 다음 버튼 넣어서 수동으로 전환 원할때는 전활할수 없나요?ㅠㅠ
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.07.04 19:56 신고 위 네가지 예 중에서 첫번째 두번째 처럼 좌우에 생기는 버튼을 말하는건가요?
  • 끙끙 2017.08.24 17:04 감사합니다 잘 응용해서 쓰고있네요 ㅠ________ㅠ~!
    그런데 슬라이드배너 왼쪽오른쪽 움직이는걸 키보드 방향키 ←→를 눌렀을때 이동할수있게끔 수정하고싶은데 그부분은 어떻게 하는걸까요 ㅠ
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2017.09.29 19:36 신고 키입력은 제가 잘 모르겠네요 ㅠㅜ
  • 채선 2018.10.12 12:29 정말 최고에요!!!!!!!!!!!!!!!
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2019.08.26 18:34 신고 감사합니다.
  • ss 2019.08.26 18:17 진짜 찾던 자료 올려주셔서 감사합니다ㅎㅎ
  • Favicon of https://www.mojimoji.co.kr BlogIcon 모지모지 2019.08.26 18:34 신고 좋게 봐주셔서 감사합니다.
  • 신입개발자 2021.02.02 16:39 와 대박... 완전 유용해요... 열심히 공부해보겠습니다!
댓글쓰기 폼