[bxslider.js] current, total index값 얻기
var mainSlider = $('.mainSlide > .slider').bxSlider({ auto: true, pause: 2000, pager: false, controls: true, autoControls: true, stopAutoOnClick: true, //prev, next 누르면 stop됨 autoControlsCombine: true, autoControlsSelector: '#main-control .stop', prevSelector: '#main-control .prev', nextSelector: '#main-control .next', infiniteLoop: true, onSlideBefore: function ($slideElement, oldIndex, newInde..
2020. 4. 6.
[rangeslider.js] 범위 선택 바 만들기
~ var rangeSlider = document.getElementById('rangeSlider'); noUiSlider.create(rangeSlider, { start: [0, 500000], step: 10000, connect: true, range: { 'min': [ 0 ], 'max': [ 500000 ] }, format: wNumb({ decimals: 0, thousand: ',' }) }); var skipValues = [ document.getElementById('skip-value-lower'), document.getElementById('skip-value-upper') ]; rangeSlider.noUiSlider.on('update', function( values..
2020. 4. 4.
bxslider.js 를 이용하여 tab menu 만들기
메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 currentSlide = $('.tab-wrap .now').parent().index()-5; //.index() 로 하면 5 더 크게 나와서 -5 /*alert($('.tab-wrap .now').parent().index()-5);*/ $('.tab-wrap .tab7').bxSlider({ auto: false, pager: false, minSlides: 1, maxSlides: 6, slideWidth: 120, responsive: false, controls: false, touchEnabled: true, infiniteLoop: false, startSlide: currentSlide, onSliderLoad: function(curr..
2020. 4. 4.
anime.js를 이용한 text animation 만들기
$('.a').on('mouseenter', function(){ ... $('.a .title').each(function(){ //텍스트가 들어있는 class $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "$&")); //텍스트를 쪼개서 각각 넣을 class }); anime.timeline({loop: 1}) //마우스오버시 한 번만 실행 .add({ targets: '.a .title-lt', //쪼갠 텍스트 각각에 적용 scale: [0.3,1], opacity: [0,1], translateZ: 0, easing: "easeOutExpo", duration: 400, delay: function(el, i) { return 70 * (..
2020. 4. 4.
