코드노트

슬릭슬라이더에 display: none > block 해주면높이 값 제대로 설정 안되는데아래 코드 넣어주면 제대로 뜸$('.slider').slick('setPosition');   https://c0de-n0te.tistory.com/102 block 되는 탭에서 슬릭슬라이더 로딩 안될 때" data-og-description="function sliderSet(slickfor,slicknav){ slickfor.slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor:slicknav }); slicknav.slick({ slidesToScroll: 1, slidesToShow: 5, arrows: true, cent..

- input type=range 로 만드는 것 - dots: true, cont cont cont cont const IndexEquip = $('#index .facIntro .equip ul, #overview .history article > ul'); const IndexEquipPro = $('#index .facIntro .equip .progress, #overview .history article .progress'); IndexEquip.on('beforeChange', function(event, slick, currentSlide, nextSlide) { let calc = ( (nextSlide) / (slick.slideCount - 1) ) * 100; IndexEquipPro..

function sliderSet(slickfor,slicknav){ slickfor.slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor:slicknav }); slicknav.slick({ slidesToScroll: 1, slidesToShow: 5, arrows: true, centerMode: true, focusOnSelect: true, asNavFor: slickfor }); } $('.facility_pannel').each(function(i,el){ i+=1; var slickfor = $(el).find('.facility_slider').addClass('slider'+ i) var slick..

$("슬라이더").on('wheel', function(e) { e.preventDefault(); if (e.originalEvent.deltaY < 0) { $(this).slick('slickPrev'); } else { $(this).slick('slickNext'); } }); 출처

메인슬라이드이미지1 메인슬라이드이미지2 메인슬라이드이미지3 메인 텍스트 서브 텍스트 일시정지 및 재생 버튼 현재페이지01 전체페이지수03 좌/우버튼 /* index */ #index{width: 100%;} #index .mainSlider{width: 100%; height: 100vh; position: relative;} #index .mainSlider .slideWrap{position: absolute; z-index: -1; width: 100%; height: 100vh;} #index .mainSlider .slideWrap div{background: url(/asset/images/index/visual-main-1.png) no-repeat center / cover; width: ..

ul에 슬라이더를 적용하고 슬라이더 각 리스트 사이를 20 띄우고 싶을때 ul 에는 margin: 0 -10px; li 에는 margin: 0 10px;

텍스트 애니메이션 $('#mainSlider .slider .textWrap').addClass('active'); $('#mainSlider .slider').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){ $('#mainSlider .slider .textWrap').removeClass('active'); $('#mainSlider .slider .slick-current .textWrap').addClass('active'); }); 2022.05.10 - [🕹 스크립트] - 슬릭슬라이더 일시정지/재생, 현재페이지/전체페이지, 프로그레스바 슬릭슬라이더 일시정지/재생, 현재페이지/전체페이지, 프로그레스바 메..

$('#mainSlider .slideWrap').slick({ autoplay : false, arrows : false, fade : true, pauseOnFocus : false, pauseOnHover : false, pauseOnDotsHover : false, }); $('#mainSlider .slideWrap').slick('slickPause'); $(".dWrap>article").each(function(){ $(this).mouseenter(function(){ $(this).find(".slideWrap").slick("slickPlay"); }); $(this).mouseleave(function(){ $(this).find(".slideWrap").slick("slickPau..