bootstrap4.0制作轮播图代码以及轮播图不能自动播放或不能点击问题的解决

最新推荐文章于 2024-05-30 11:50:13 发布

bentou_

最新推荐文章于 2024-05-30 11:50:13 发布

阅读量5.4k

点赞数 9

分类专栏：前端文章标签：轮播图 bootstrap4.0 轮播图点不了轮播图不自动播放

本文链接：https://blog.csdn.net/bentou_/article/details/96774421

版权

前端专栏收录该内容

24 篇文章 2 订阅

订阅专栏

bootstrap4.0制作轮播图代码以及轮播图不能自动播放或不能点击问题的解决

首先来看效果

目前呢，市面上的轮播都很普遍，利用bootstrap4.0也能很迅速很准确地实现轮播效果在PC端和移动端的响应式布局。写这篇博客主要是因为当时我在写博客的时候纠结了很久，我的轮播图播放不了，previous和next两个按钮也点不了，但是经过询问老师终于解决了，其实是很小的一个点，希望大家在做的时候可以避免入坑。

我的效果图也跟大家千篇一律，不过这里还是给大家展示一下哈。

首先是PC端
在这里插入图片描述

然后是移动端
在这里插入图片描述

代码

我呢是直接在https://hackerthemes.com/bootstrap-cheatsheet/ 这个bootstrap4.0的class索引拷贝的代码，关于这个网站，我在上一篇博客里也有介绍，总之就是很好用，这里再点名一次，对了今天才发现上一篇的导航栏这个网站里在nav插件里面也直接有介绍。

上代码了

首先是html

<!--轮播-->
    
<div id="ad-carousel" class="carousel slide" data-ride="carousel" >
	 <ul class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
     </ul>
        <!-- 轮播图片 -->
     <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../images/记录-轮播01.jpg" alt="1 slide">
        </div>
        <div class="carousel-item">
            <img src="../images/记录-轮播02.jpg" alt="2 slide">
        </div>
    	<div class="carousel-item">
            <img src="../images/记录-轮播03.jpg" alt="3 slide">
        </div>
     </div>
	 <!-- 左右切换按钮 -->
     <a class="carousel-control-prev" href="#ad-carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="false"></span>
            <span class="sr-only">Previous</span>
     </a>
            <!-- 向右滑动 -->
     <a class="carousel-control-next" href="#ad-carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
      </a> 
</div>

然后是css,大部分样式引用了bootstrap4.0的类名之后基本上就没问题了，这里我为了让图片百分百显示，所以给图片加了一个样式。

 /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }

为了防止有比我还小白的小白，再给大家看一眼head和body里面的bootstrap引入

<head lang="en">
    <meta charset="utf-8">
    <!--使ie浏览器正常浏览-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--实现响应式布局，用viewport获取设备宽度，再根据这个设置网页宽度，使width=device-width，initial-scale=1代表缩放比例是1-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>轮播</title>
    <!--link min代表引入一个压缩版样式，rel="stylesheet"代表引入外部样式表-->
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <!--引入bootstrap4.0的css外部样式表--> 
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
     <!--引入font-awesome的图标--> 
    <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css"/>
    <!-- ================== END BASE CSS STYLE ================== -->
<head>

<body>

    <!--在body部分引入bootstrap4.0的js和jquery--> 
 <script src="../assets/js/jquery-slim.min.js" rel="stylesheet" ></script>
    <script src="../assets/js/bootstrap.min.js" rel="stylesheet"></script>
</body>

重头戏！很多人会问为什么我的轮播图点不了，而且也不自动播放呢？？

如果你的轮播图点不了，可能有以下两个原因

1.引用的是bootstrap的css和JS版本不一致，比如js引入的是3.7，而css用的4.0。
2.引用的是bootstrap的css和JS版本一致了，但类名不属于当前bootstrap版本，比如引入的4.0的bootstrap，但是引用的类名还是3.7的版本。
如果你的轮播图不自动播放，那么在解决了第一个问题的基础上，只有一个原因，就是你没有在html5里轮播图的第一行代码引入类 data-interval，我上面的代码就没有引入，这代表轮播图片播放的间隔，设置一个int值就好啦，也就是这一行<div id="ad-carousel" class="carousel slide" data-ride="carousel" data-interval="2000">。

拜拜了，西盗盗要睡了，大家晚安！

bentou_

关注

9
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
bootstrap4.0制作轮播图代码以及轮播图不能自动播放或不能点击问题的解决

bootstrap4.0制作轮播图代码以及轮播图不能自动播放或不能点击问题的解决首先看一下效果代码重头戏！很多人会问为什么我的轮播图点不了，而且也不自动播放呢？？首先看一下效果目前呢，市面上的轮播都很普遍，利用bootstrap4.0也能很迅速很准确地实现轮播效果在PC端和移动端的响应式布局。写这篇博客主要是因为当时我在写博客的时候纠结了很久，我的轮播图播放不了，previous和next两个...
复制链接

扫一扫

专栏目录