OOQ

우리가 홈페이지를 만들다 보면 슬라이드 기능이 필요할 때가 있다. 홈페이지 메인화면에 종종 쓰이는 그러한 슬라이드 기능들 말이다. 나 역시도 그런 기능들을 찾다가 우연히 반응형 웹을 지원하는 슬라이더 라이브러리를 발견하게 되어서 이번에 공유를 해보고자 한다. ​ 만들 수 있는 슬라이더의 형태는 다양하니 꼭 홈페이지에 들어가서 원하는 스타일을 찾아 적용하길 바란다. Slick 다운로드 및 파일 URL 먼저 slick 의 링크는 다음과 같다. https://kenwheeler.github.io/slick slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple brea..

$('.slider_area').slick({ rows: 1, //이미지를 몇 줄로 나타낼건지 (int) dots: false, //네비게이션버튼 (boolean) -default:false appendDots: $('#dots'), //네비게이션버튼 변경 (선택자 혹은 $(element)) dotsClass: 'custom-dots', //네비게이션버튼 클래스 변경 infinite: true, //무한반복 (boolean) -default:true slidesToShow: 4, //한번에 보여줄 사진의 갯수(int) slidesToScroll: 4, //한번에 넘길 사진의 갯수(int) slidesPerRow: 1, //보여질 행의 수 (한 줄, 두 줄 ... ) autoplay: true, //자동시..

#jQuery #empty .empty() .empty() clears the contents of the selected element. Note that the tag remains, just deleting the content. (Use .remove() to remove the entire element including the tag.) grammar .empty() for example Lorem $( 'h1' ).empty() Then it becomes: example Clicking the button clears the contents of the p element. Click To Empty Lorem Ipsum Dolor

#jQuery #each() .each() .each() will repeat the function for each of the selected elements if there are multiple. grammar .each( function ) To break out of a repeat operation when certain conditions are met return false Use the. example 1 Add a different class to each p element. Lorem Ipsum Dolor Amet example 2 Repeat the work only twice to exit. Lorem Ipsum Dolor Amet

#jquery #detach() .detach() .detach() removes the selected element from the document. Same as .remove() in that it removes, but .detach() saves the removed elements for reuse. grammar .detach( [selector ] ) for example var jb = $( 'h1' ).detach(); will remove the h1 element from the document and store it in the variable jb. example Clicking the Cut button will cut the Dolor, and clicking the Pas..

#jQuery #delay() .delay() .delay() causes a running function to pause (defer) for a given amount of time. grammar .delay( duration [, queueName ] ) duration contains the time to stop. The unit when deciding by number is 1/1000 second, and you can decide by slow or fast. Slow corresponds to 600 and Fast corresponds to 200. example When the button is clicked, the paragraph disappears upwards and c..

#jQuery #css .css() Get the css attribute value of the selected element with .css() or add the style attribute. grammar 1 .css( propertyName ) Add a style property. for example $( "h1" ).css( "color", "green" ); adds a style attribute to the h1 element and replaces the text color with green. ... example 1 Prints the value of the color attribute of the h1 element. Lorem ipsum dolor. example 2 Set..

#jquery #clone() .clone() .clone() clones the selected element. grammar .clone( [withDataAndEvents ] ) for example $( '.ab' ).clone().appendTo( 'h1' ); will duplicate the element with ab as the class value and put it in the h1 element. example Duplicate the span element and place it inside the h1 tag. Lorem ipsum dolor. Here is the rendered result: Lorem ipsum dolor. Lorem ipsum dolor.

#jquery #click() .click() .click() is a property that allows you to perform certain actions when you click on the selected element. grammar .click( handler ) For example, if you want a function to run when a button element is clicked, do the following: $( 'button' ).click( function() { // function } ); example Click on a paragraph to see its borders. Click again to remove the border. Lorem ipsum..

#jquery #children() .children() .children() selects the child elements of any element. grammar .children( [selector] ) for example $( 'div' ).children().css( 'color', 'blue' ); will make the color of the child elements of the div element blue. $( 'div' ).children( 'p.bl' ).css( 'color', 'blue' ); will change the color of the p element that has bl as the class value among the child elements of th..