boostrap轮播图

最新推荐文章于 2022-05-15 02:25:05 发布

柒丶月

最新推荐文章于 2022-05-15 02:25:05 发布

阅读量296

点赞数

本文链接：https://blog.csdn.net/lin1072368472/article/details/104341900

版权

创建轮播图步骤
1.创建 div.carousel [data-ride=“carousel”](可选）
自己定义一个id名字等会让data-target使用
data-ride 当文件加载完自动轮播轮播间隔好像是5秒

<!--carousel声明轮播  slide两个切换有一个平滑效果   id给后面指示器使用-->
<!--data-ride 自动轮播  间隔5秒-->
<div class="carousel slide" id="myCarousel" data-ride="carousel"></div>

2.创建轮播指示器使用列表 ul 或者ol
ol.carousel-indicators
在ol里创建li 其中要有任意一个li 存在一个active 表示某个图片显示
li 添加 data-target=“#轮播的id” 第一步设置的id
添加data-slide.to="*" *取值数字 0 1 2 3

<!--carousel声明轮播  slide两个切换有一个平滑效果   id给后面指示器使用-->
<!--data-ride 自动轮播  间隔5秒-->
<div class="carousel slide" id="myCarousel" data-ride="carousel">
    <ol class="carousel-indicators">
<!--                active只能设置一个  data-slide-to 切换到第几张图 图片从0依次排序-->
<!--        如果设置数值过大 失效  data-target指向要轮播的id-->
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
        <li  data-slide-to="10" data-target="#myCarousel"></li>
        <li  data-slide-to="2" data-target="#myCarousel"></li>
    </ol>
</div>

指示器就是轮播图中的这个

3.创建图片容器
div.carousel-inner 里面放图片
div.item里面包含一个img标签放图片

<!--    carousel-inner放置图片-->
    <div class="carousel-inner">
<!--        div.item 图片容器  active只能唯一-->
        <div class="carousel-item active">
<!--            d-block设置为块 w-100 设置宽度100%-->
            <img src="img/2.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item ">
            <!--            d-block设置为块 w-100 设置宽度100%-->
            <img src="img/3.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item ">
            <!--            d-block设置为块 w-100 设置宽度100%-->
            <img src="img/4.jpg" class="d-block w-100" alt="">
        </div>
        
    </div>

此时已经可以轮播了还差一步
左右按钮

4.左右按钮书写
a.carousel-control-prev 添加属性data-slide=“prev”
href="指向轮播id”

<!--    href指向轮播的id-->
    <a href="#myCarousel" class="carousel-control-prev" data-slide="prev">
<!--        这个span是三角箭头的样式-->
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#myCarousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0">
    <title>Title</title>
<!--    <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.css">-->
<!--    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!--    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <style>

    </style>
</head>
<body>
<!--carousel声明轮播  slide两个切换有一个平滑效果   id给后面指示器使用-->
<!--data-ride 自动轮播  间隔5秒-->
<div class="carousel slide" id="myCarousel" data-ride="carousel">
    <ol class="carousel-indicators">
<!--                active只能设置一个  data-slide-to 切换到第几张图 图片从0依次排序-->
<!--        如果设置数值过大 失效  data-target指向要轮播的id-->
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
        <li  data-slide-to="1" data-target="#myCarousel"></li>
        <li  data-slide-to="2" data-target="#myCarousel"></li>
    </ol>
<!--    carousel-inner放置图片-->
    <div class="carousel-inner">
<!--        div.item 图片容器  active只能唯一-->
        <div class="carousel-item active">
<!--            d-block设置为块 w-100 设置宽度100%-->
            <img src="img/2.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item ">
            <!--            d-block设置为块 w-100 设置宽度100%-->
            <img src="img/3.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item ">
            <!--            d-block设置为块 w-100 设置宽度100%-->
            <img src="img/4.jpg" class="d-block w-100" alt="">
        </div>
    </div>
<!--    href指向轮播的id-->
    <a href="#myCarousel" class="carousel-control-prev" data-slide="prev">
<!--        这个span是三角箭头的样式-->
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#myCarousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</body>
</html>

柒丶月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
boostrap轮播图

创建轮播图步骤1.创建 div.carousel [data-ride=“carousel”](可选）自己定义一个id名字等会让data-target使用data-ride 当文件加载完自动轮播轮播间隔好像是5秒<!--data-ride 自动轮播间隔5...
复制链接

扫一扫