자신의 웹 사이트에 많은 사람들이보고 싶어합니다.슬라이더는 콘텐츠의 한 요소를 화면에 표시하는 블록으로 일정 기간이 지나면 콘텐츠를 다른 콘텐츠로 변경합니다. 당연히 모든 웹 개발자는 HTML, CSS 및 JavaScript를 사용하여 독자적으로 슬라이더를 만들 수 있지만 이것이 항상 의미있는 것은 아닙니다. 당신은 상당히 많은 시간을 보낼 것입니다. 인터넷에 당신의 삶을 크게 촉진시키고 당신의 웹 사이트를 훨씬 더 매력적인 것으로 만들 수있는 기성의 솔루션이 많이 있습니다. 이 기사에서는 Owl Carousel이라는 이러한 솔루션 중 하나에 대해 설명합니다. 이 슬라이더를 설정하는 것은 매우 간단하므로 초보자조차도 이에 대처할 수 있습니다. 이제이 슬라이더가 나타내는 내용과 기타 중요한 세부 사항을 확인할 수 있습니다. 올빼미 회전 목마를 단계별로 설정하므로이 자료 만 순서대로 연구해야합니다.
왜이 슬라이더를 선택해야할까요?
올빼미 회전 목마, 설정 될 것입니다이 기사에서 고려 된 것은 매우 효과적인 플러그인으로 사이트에서 작업하는 데 도움이되는 편리하고 편리한 슬라이더를 페이지에 추가하여 많은 시간과 노력과 비용을 절약 할 수 있습니다. 이 특정 플러그인의 장점은 웹에 많은 슬라이더가 있기 때문입니다. 사실이 슬라이더는 사용자 정의를위한 수십 가지 옵션을 제공하므로 페이지를 고유하고 반복 할 수 없게 만들 수 있습니다. 이것은 모든 버전의 브라우저에서 작동하는 적응 형 플러그인이며 WordPress 및 기타 유명한 CMS에 쉽게 연결할 수 있습니다. 일반적으로이 슬라이더의 장점은 대단히 많기 때문에 선택의 폭을 넓혀야합니다. 그러나 Owl Carousel을 설정하기 전에이 플러그인을 다운로드해야합니다.
다운로드
올빼미 회전 목마 2를 설정하는 것은 불가능합니다.컴퓨터에 다운로드 한 후 단계별 지침이므로 처음부터 시작하는 것이 좋습니다. 따라서 프로그램은 패키지 관리자의 도움을 받아 다운로드 할 수 있지만 고급 개발자 도구이므로이 플러그인을 표준 방식으로 가져 오는 방법을 알려줍니다. 플러그인의 공식 사이트로 이동하여 최신 버전을 다운로드해야합니다. 그런 다음 다운로드 한 모든 파일을 사이트 디렉토리로 전송하여 플러그인 자체와 동일한 편리한 폴더를 준비해야합니다. 이 플러그인은 jQuery와 연결되어 있으므로이 라이브러리를 사용할 수 있어야합니다. 음,이 플러그인을 다운로드하면 다음 단계 인 Owl Carousel 2의 슬라이더 설정이 필요합니다.
CSS
올빼미 회전 목마 1.3 설정은 새로운 두 번째 버전과 거의 동일하게 유지되며 새 기능 만 추가됩니다. 그러나 기본 정보는 CSS를 문서에 추가하는 것부터 시작됩니다. 첫 번째 단계는 HTML 코드에 줄을 추가하는 것입니다. <link rel = "stylesheet"href = "owlcarousel / owl.carousel.min.css">... 그것은 당신에게 무엇을 제공합니까? 슬라이더를 표시하는 데 필요한 스타일을 사이트에로드하는 선입니다. 이 시점에서 시각적 처리를 직접 수행하여 완료 할 수 있습니다. 그러나 더 편리하고 빠른 솔루션이 있습니다. 줄을 추가 할 수도 있습니다. <link rel = "stylesheet"href = "owlcarousel / owl.theme.default.min.css">기본 테마도로드합니다.슬라이더를 사용하여 즉시 사용할 수 있습니다. 일부 스타일을 편집하여 슬라이더를 더 독특하고 독특하고 콘텐츠에 더 적합하게 만들 수 있습니다. 당연히 러시아어로 된 Owl Carousel 설정은 매우 편리 할 것이지만 사이트를 만드는 모든 사람은 영어에 대한 지식 없이는 할 수 없다는 것을 이해해야합니다.
JavaSpript 연결
당연히 슬라이더는 JS 없이는 작동하지 않습니다.따라서 필요한 코드가 포함 된 적절한 파일을 포함하도록주의해야합니다. 이를 위해 코드 줄을 삽입해야합니다. 문서에서 그러나 하나의 조건이 충족되어야합니다. 모든 사람은 JS가 모든 명령을 순서대로 실행하는 프로그래밍 언어라는 것을 알고 있으므로이 경우 문서에 jQuery 라이브러리를 추가하는 줄 뒤에이 코드 줄을 추가해야합니다. 이 슬라이더의 경우 JS로 다른 작업을 수행 할 필요가 없습니다.
HTML 서식
슬라이더를 연결 했으니 이제 시간입니다그것을 정렬하고 사용자 정의하십시오. 먼저, 슬라이더가 페이지에 전혀 나타나도록 HTML 코드를 작성해야합니다. 이렇게하려면 슬라이드를 보관할 컨테이너를 만들어야합니다. 이는 owl-carousel 클래스에 할당되어야하는 div 태그를 사용하여 수행 할 수 있습니다. 슬라이더와 관련된 모든 스타일이 활성화되도록하는 것은이 클래스입니다. 부엉이 테마 클래스를 하나 더 추가 할 수도 있습니다. 기본 디자인을 사용하거나 추가 작업의 기초로 슬라이더의 표준 버전을 사용하기로 결정한 경우 유용합니다.
그런 다음 div 태그가있는 별도의 컨테이너에 각 슬라이드를 추가해야합니다. 당연히 다른 태그도 사용할 수 있지만이 태그는 슬라이더에 가장 적합합니다.
플러그인 호출
기성 슬라이더가 사이트에 나타나기 위해 마지막으로해야 할 일은 다음 코드 블록을 사용하는 것입니다.
$ (문서) .ready (기능 () {
$ ( ". owl-carousel"). owlCarousel ();
});
슬라이더가 시작되는지 확인합니다.즉, 페이지가로드 될 때 콘텐츠를 스크롤합니다. 동일한 코드로 Owl Carousel을 WordPress에 연결할 수 있습니다. 이 플러그인의 설정은 다양하고 다양하며 이제 가장 중요한 사항에 대해 배우게됩니다.
슬라이더의 모양과 기능 사용자 지정
따라서 어떤 명령을 사용할 수 있습니까?슬라이더를 사용자 정의하려면? 우선 항목 명령을 기억해야합니다. 슬라이더에서 특정 수의 슬라이드를 설정할 수 있기 때문입니다. loop 명령을 사용하면 슬라이더를 반복할지 또는 마지막 요소에서 스크롤을 중지할지 선택할 수 있습니다. 마우스 및 터치와 같은 여러 옵션이있는 드래그 명령도 있습니다. 첫 번째 경우에는 마우스를 누른 상태에서 슬라이더의 요소를 뒤집을 수 있고, 두 번째 경우에는 터치 (이 명령은 모바일 장치에 적합)를 사용하여 뒤집을 수 있습니다. 또 다른 중요한 명령은 탐색 화살표를 표시 할 수있는 nav입니다. 이와 함께 navText 명령을 사용하여 탐색 버튼에 레이블을 추가 할 수 있습니다. 또한 페이지로드시 슬라이더 슬라이드 자동 시작을 켜고 끌 수있는 autoplay 명령을 잊지 말아야합니다. 이 명령과 함께 autoplayTimeout을 사용할 수도 있습니다. 특정 값을 밀리 초 단위로 설정하면 각 슬라이드의 자동 뒤집기 사이의 시간이 결정됩니다.
반응 형 웹 디자인을 사용하는 경우페이지가 표시되는 장치에 따라 페이지 디자인이 자동으로 변경되는 경우 페이지가 표시되는 화면의 너비에 따라 표시되는 슬라이드 수를 설정할 수있는 반응 형 명령을 기억해야합니다.
