임의의 초기 이미지가있는 전체 스크린 부트 스트랩 회전 목마

이 기사에서는 두 개의 간단한 부트 스트랩 회전 목마 확장을 구축하는 것을 보여줍니다 : 전체 화면 슬라이드 쇼와 무작위 초기 슬라이드가있는 회전 목마. 우리는 기본 회전 목마로 시작하여 향상시킬 것입니다.

주요 개념 :

전체 화면 회전 목마 : 는 사용자 정의 jQuery를 사용하여 창 높이와 일치하도록 캐 러셀 항목 높이를 동적으로 조정하고 배경 이미지와 색상을 설정합니다. "전체 화면"CSS 클래스는 배경 스타일을 처리합니다 무작위 초기 슬라이드 : 총 슬라이드 수를 결정하고 임의의 숫자를 생성 한 다음 "활성"클래스를 해당 슬라이드 및 표시기에 적용합니다.

기본 회전 목마 구축 :
• 부트 스트랩은 핵심 회전식 구조를 제공합니다. 각 이미지에는 이미지 로딩이 실패하면 폴백 배경 색상의 속성이 포함되어 있습니다. JavaScript 회전 목마를 초기화하고 간격을 설정하고 일시 정지를 비활성화합니다. 전체 화면 슬라이드 쇼 생성 :
이 향상은 사용자 정의 jQuery를 사용합니다 :
• 및 CSS : 이 코드는 이미지를 통해 반복하고, 모 컨테이너에 배경 이미지와 색상을 설정하고, 요소를 제거하고 (배경이 사용됨에 따라) 창 크기 조정에서 높이를 조정합니다. 초기 슬라이드의 클래스는 부드러운 전환을 위해 jQuery를 통해 추가됩니다.
초기 슬라이드 무작위 :

하중에 임의의 슬라이드를 표시하려면 HTML에서 하드 코드 클래스를 제거 하고이 jQuery를 추가하십시오. 이 코드는 랜덤 슬라이드를 선택하고 해당 슬라이드와 표시기 모두에

클래스를 적용합니다.

추가 커스터마이징 아이디어 : data-color

CSS 전환 또는 JavaScript 애니메이션 라이브러리를 사용하여 애니메이션 효과 (페이드, 스케일) 추가. 이미지 오버레이 구현

<code class="language-html"><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="0">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="1">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="2">
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/000/173958517524890.jpg" alt="A Full-screen Bootstrap Carousel with Random Initial Image ">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Image</h5>
      </div>
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
  </div>
  <a class="carousel-control-prev" href="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div></code>

이벤트를 사용하여 다음/이전 슬라이드를 무작위 화하십시오

이 향상된 접근 방식은보다 역동적이고 매력적인 회전 목마를 제공합니다. 필요한 부트 스트랩 CSS 및 JavaScript 파일을 포함해야합니다.

위 내용은 임의의 초기 이미지가있는 전체 스크린 부트 스트랩 회전 목마의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!