부트스트랩 캐러셀이 움직일 수 없으면 어떻게 해야 합니까?

이동할 수 없는 부트스트랩 캐러셀에 대한 해결 방법: 1. 사용된 부트스트랩 버전을 확인합니다. 2. 참조된 js 및 CSS의 순서를 수정합니다. 3. "data-ride="carousel"" 문을 추가합니다. 캐러셀 이미지를 일관성 있게 ID로 변경하면 됩니다.

이 기사의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

캐러셀이 움직일 수 없으면 어떻게 해야 합니까?

부트스트랩이 캐러셀을 할 수 없는 문제에 대한 해결 방법:

1. 우선 임포트 처음에 어떤 버전의 부트스트랩을 사용하고 있는지 주의해야 합니다. 내보낸 템플릿을 직접 검색하고 복사할 수 있습니다. 직접 작성하는 것을 방지하려면 해당 버전의 공식 웹사이트를 방문하세요.

ps: 다른 사람의 예제를 직접 복사하여 가져오지 마세요.

예를 들어 bootstrap 3.3.7 버전의 가져온 템플릿 관련:

　<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
此处引用的插件来自于bootstrap官网！

2. js와 css를 인용하는 순서가 잘못되었습니다. css, jquery.js, 마지막으로 bootstrap.js

입니다. bootstrap.js에서는 jquery를 사용해야 합니다. js

3. 기본적으로 Bootstrap의 Carousel 구성 요소를 사용하려면 data-ride="carousel"만 추가하면 자동 재생이 가능합니다. 초기화된 js 함수를 사용할 필요가 없습니다. 따라서 캐러셀이 자동으로 재생되지 않으면 먼저 이 섹션을 확인하세요. 이미지 회전 시간 간격 설정과 같은 다른 매개변수를 여기에 추가할 수 있습니다.

<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">

4. 캐러셀 이미지에 있는 라벨의 클래스 콘텐츠가 캐러셀 이미지의 div 컨테이너 ID와 일치하지 않습니다. 예: ol 목록의 li 태그, 데이터 대상 값은 "#carousel"이어야 합니다. -example-generic"

왜냐하면 div의 쉬운 ID 속성은 다음과 같습니다: id="carousel-example-generic"

<ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       .....</ol>

권장 학습: "

bootstrap 사용 튜토리얼

"

위 내용은 부트스트랩 캐러셀이 움직일 수 없으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!