Home  >  Article  >  Web Front-end  >  Is it possible to use bootstrap carousel image without internet connection?

Is it possible to use bootstrap carousel image without internet connection?

angryTom
angryTomOriginal
2019-07-29 10:18:092379browse

Is it possible to use bootstrap carousel image without internet connection?

If you want to know more about bootstrap, you can click: Bootstrap Tutorial

Someone asked if bootstrap carousel images can be displayed without an internet connection? If you are developing locally, this is of course possible, because the carousel chart is implemented using js and css. We only need to download the bootstrap development package, and then reference its js and css files in the files we need. Let me introduce to you how to create bootstrap recording images.

A carousel is a looping slideshow:

How to create a carousel

The following example creates a simple image carousel effect:

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e569459bb7121.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e56afa458d274.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e56a3e68b7503.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 </div>

Add descriptions to carousel images

Add 6e2d82e80b0c31677b4036fd29ee2df6 ; To set the description text of the carousel image:

<div class="carousel-item">
  <img src="https://img.php.cn/upload/article/000/000/040/5d3e569459bb7121.jpg">
  <div class="carousel-caption">
    <h3>第一张图片描述标题</h3>
    <p>描述文字!</p>
  </div></div>

Class description used in the above example

Class Description
.carousel Create a carousel
.carousel-indicators Add an indicator to the carousel, which is a small dot under the carousel image. The carousel process can show which picture is currently.
.carousel-inner Add the picture to switch
.carousel -item Specify the content of each image
.carousel-control-prev Add the left side button, click to return to the previous picture.
.carousel-control-next Add a button on the right. Clicking it will switch to the next picture.
.carousel-control-prev-icon Use with .carousel-control-prev to set the left button
.carousel-control-next-icon Use with .carousel-control-next to set the button on the right
.slide Switch the transition and animation effects of the image. If you don’t need such effects, you can delete this class.

The above is the detailed content of Is it possible to use bootstrap carousel image without internet connection?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn