전체 글(114)
-
bxSlider 예제17. Custom easing
17. Custom easing JS: $('.bxslider').bxSlider({ mode: 'horizontal', useCSS: false, infiniteLoop: false, hideControlOnEnd: true, easing: 'easeOutElastic', speed: 2000 }); HTML:
2016.07.22 -
bxSlider 예제16. 계속 슬라이드 (Ticker mode)
16. Ticker mode JS: $('.bxslider').bxSlider({ minSlides: 4, maxSlides: 4, slideWidth: 170, slideMargin: 10, ticker: true, speed: 6000 }); HTML:
2016.07.22 -
bxSlider 예제15. Responsive video
15. Responsive video JS: $('.bxslider').bxSlider({ video: true, useCSS: false }); HTML:
2016.07.22 -
bxSlider 예제14. Public methods
14. Public methods Click me to go to the next slide Click me to see the total slide count JS: var slider = $('.bxslider').bxSlider({ mode: 'fade' }); $('#slider-next').click(function(){ slider.goToNextSlide(); return false; }); $('#slider-count').click(function(){ var count = slider.getSlideCount(); alert('Slide count: ' + count); return false; }); HTML: Click me to go to the next slide Click me..
2016.07.22 -
bxSlider 예제13. Callback API
13. Callback API JS: $('.bxslider').bxSlider({ onSliderLoad: function(){ // do funky JS stuff here alert('슬라이더 로딩을 완료했습니다. 계속 하려면 확인 클릭!'); }, onSlideAfter: function(){ // do mind-blowing JS stuff here alert('슬라이드 전환이 완료되었습니다. 계속 하려면 확인 클릭!'); } }); HTML:
2016.07.22 -
bxSlider 예제12. 복수(멀티) 슬라이드
12. Multiple slideshows Slideshow 1 Slideshow 2 JS: $('#slider1').bxSlider({ mode: 'fade', autoControls: true, pause: 2000 }); $('#slider2').bxSlider({ autoControls: true, pause: 3000, slideMargin: 20 }); HTML: Slideshow 1 Slideshow 2
2016.07.22