이미지 슬라이더에 Layui의 회전 목마 구성 요소를 사용하려면 다음을 수행해야합니다.
Layui 포함 : Layui가 프로젝트에 포함되어 있는지 확인하십시오. CDN을 통해 포함 시키거나 로컬로 파일을 다운로드하여 호스팅 할 수 있습니다.
<code class="html"><link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script></code>
HTML 구조 : 회전 목마의 HTML 구조를 만듭니다. 회전 목마 용기 내부에 이미지를 추가 할 수 있습니다.
<code class="html"><div class="carousel-demo" id="test1"> <div carousel-item> <div><img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="이미지 슬라이더에 Layui의 회전 목마 구성 요소를 어떻게 사용합니까?" ></div> <div><img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="이미지 슬라이더에 Layui의 회전 목마 구성 요소를 어떻게 사용합니까?" ></div> <div><img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="이미지 슬라이더에 Layui의 회전 목마 구성 요소를 어떻게 사용합니까?" ></div> </div> </div></code>
회전 목마 초기화 : JavaScript를 사용하여 Layui 회전 목마를 초기화하십시오.
<code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; //Carousel rendering carousel.render({ elem: '#test1' ,width: '100%' ,height: '300px' ,interval: 3000 }); });</code>
이 코드에서 #test1
은 회전식 컨테이너의 ID, width
및 height
회전 목마의 치수를 설정하고 interval
전환 사이의 시간을 지정합니다.
Layui의 회전식 구성 요소는 이미지 슬라이더의 동작과 모양을 조정하기위한 몇 가지 사용자 정의 옵션을 제공합니다.
너비와 높이 : 회전 목마의 치수를 조정하십시오.
<code class="javascript">width: '100%', height: '300px'</code>
간격 : 자동 전환 사이의 시간 간격을 설정하십시오.
<code class="javascript">interval: 3000 // 3 seconds</code>
화살표 : 내비게이션 화살표의 가시성을 제어하십시오.
<code class="javascript">arrow: 'always' // Options: 'always', 'hover', 'none'</code>
표시기 : 슬라이드 표시기의 가시성을 제어하십시오.
<code class="javascript">indicator: 'inside' // Options: 'inside', 'outside', 'none'</code>
애니메이션 : 전환을 위해 애니메이션 유형을 선택하십시오.
<code class="javascript">anim: 'fade' // Options: 'default', 'updown', 'fade'</code>
자동 재생 : 자동 재생을 활성화 또는 비활성화합니다.
<code class="javascript">autoplay: true</code>
전체 : 회전 목마가 컨테이너의 전체 높이로 확장하도록합니다.
<code class="javascript">full: 'true'</code>
이러한 옵션은 carousel.render
로 전달할 수 있습니다. 렌더 메소드 구성 객체의 일부로 회전 목마의 동작과 모양을 사용자 정의합니다.
Layui의 회전 목마에서 자동 이미지 전환을 구현하려면 다음 단계를 따르십시오.
회전식 초기화 : 회전 목마를 초기화 할 때는 자동 전환을 활성화하기위한 interval
옵션을 포함하십시오.
<code class="javascript">layui.use('carousel', function(){ var carousel = layui.carousel; carousel.render({ elem: '#test1' ,width: '100%' ,height: '300px' ,interval: 3000 // This sets the interval for transitions }); });</code>
자동 재생 옵션 : 필요한 경우 자동 재생을 명시 적으로 활성화 할 수 있습니다.
<code class="javascript">autoplay: true</code>
interval
매개 변수는 자동 전환 사이의 밀리 초로 시간을 지정합니다. 위의 예에서, 회전 목마는 3 초마다 자동으로 전환됩니다.
Layui의 회전 목마가 올바르게 작동하지 않는 경우 이러한 문제 해결 단계를 고려하십시오.
carousel.render
로 회전 목마가 올바르게 초기화되어 있는지 확인하고 elem
매개 변수가 회전식 컨테이너의 ID와 일치하는지 확인하십시오.이러한 측면을 체계적으로 확인함으로써 Layui의 회전식 구성 요소와 관련된 모든 문제를 식별하고 해결할 수 있어야합니다.
위 내용은 이미지 슬라이더에 Layui의 회전 목마 구성 요소를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!