程序员经验分享-hwhale

单独的数据间隔 bootstrap 轮播 4

2024-05-30

我想为 Bootstrap 4 轮播上的每张幻灯片设置单独的数据间隔。我尝试了一些其他的 javascript 片段，但是它们似乎不适用于我的代码，例如Bootstrap 4 轮播堆栈溢出 https://stackoverflow.com/questions/50968181/bootstrap-4-carousel-individual-data-interval-on-each-slide

任何人都可以提出建议，我们将不胜感激。

#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}
.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
   Testimonial 1
    </div>
    <div class="carousel-item">
     Testimonial 2
    </div>
    <div class="carousel-item">
     Testimonial 3
    </div>
  </div>
  </div>

我根据Zim的回答做了一个实现：Bootstrap 4 Carousel：每张幻灯片上的单独数据间隔 https://stackoverflow.com/questions/50968181/bootstrap-4-carousel-individual-data-interval-on-each-slide，并且运行良好，除了轮播的起点（即第一张幻灯片在第一次迭代时使用默认间隔）。要使用此扩展，您必须添加data-interval赋予每个carousel-item设置间隔的毫秒数。检查下一个示例：

$(document).ready(function()
{
    // Extend the Bootstrap carousel implementation.

    $.fn.carousel.Constructor.prototype.cycle = function (event)
    {
        if (!event)
            this._isPaused = false;

        if (this._interval)
        {
            clearInterval(this._interval);
            this._interval = null;
        }

        if (this._config.interval && !this._isPaused)
        {
            var item = $('.carousel-item-next');
            var newInterval = item.data('interval') || this._config.interval;

            this._interval = setInterval(
                (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
                newInterval
            );
        }
    };
});
#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

或者，如果前面的方法不起作用，您可以将代码包装在里面<script> and </script>包含后的标签引导程序文件，像这样：

#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script>
$.fn.carousel.Constructor.prototype.cycle = function (event)
{
    if (!event)
        this._isPaused = false;

    if (this._interval)
    {
        clearInterval(this._interval);
        this._interval = null;
    }

    if (this._config.interval && !this._isPaused)
    {
        var item = $('.carousel-item-next');
        var newInterval = item.data('interval') || this._config.interval;

        this._interval = setInterval(
            (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
            newInterval
        );
    }
};
</script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

更新支持多个轮播

下一个示例展示了如何正确实现支持多个轮播。基本上我们在选择时需要使用下一行item:

var item = $(this._element).find('.carousel-item-next');

#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

#top-bootstrap-slider2{
    width: 80%;
    margin: auto;
    background: skyblue;
    color: white;
    height: 50px;
    margin-top: 25px;
    overflow: hidden;
    font-size: 14px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script>
$.fn.carousel.Constructor.prototype.cycle = function (event)
{
    if (!event)
        this._isPaused = false;

    if (this._interval)
    {
        clearInterval(this._interval);
        this._interval = null;
    }

    if (this._config.interval && !this._isPaused)
    {
        // This next line does the trick.
        var item = $(this._element).find('.carousel-item-next');
        var newInterval = item.data('interval') || this._config.interval;

        this._interval = setInterval(
            (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
            newInterval
        );
    }
};
</script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

<div id="top-bootstrap-slider2" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="3000">
      Testimonial 4
    </div>
    <div class="carousel-item" data-interval="1000">
      Testimonial 5
    </div>
    <div class="carousel-item" data-interval="1000">
      Testimonial 6
    </div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

twitterbootstrap

单独的数据间隔 bootstrap 轮播 4 的相关文章

随机推荐

  • PostgreSQL安装错误——无法分配内存

    我正在尝试从 sqlite3 切换到 PostgreSQL 以在 Rails 中进行开发 这样我就不会遇到任何 heroku 问题 我遵循了heroku和链接到的Railscast上给出的建议 但是在brew安装postgresql后遇到了

  • python 类工厂继承随机父类

    我有一些这样的代码 class Person object def drive self f t raise NotImplementedError class John Person def drive self f t print Jo

  • 如何加快 Java VM (JVM) 的启动时间？

    我正在运行启动多个 JVM 进程的测试 与 JVM 内运行的实际测试时间相比 JVM 的总结启动时间非常重要 我怎样才能加快速度 我已经使用了 client 选项 这确实有帮助 但没有我想要的那么多 还有其他方法吗 比如预加载一堆 JVM

  • Google Apps 脚本触发器 - 每当将新文件添加到文件夹时运行

    我想在任何时候执行谷歌应用程序脚本new文件被添加到特定文件夹 目前 我使用的是每 x 分钟运行一次的时钟触发器 但我只需要在向文件夹添加文件时运行脚本 有没有办法做到这一点 与this https stackoverflow com qu

  • 如何获取 64 位的 pshome 路径？

    32 位的主文件夹路径可以使用 PSHome多变的 c Windows System32 WindowsPowerShell v1 0 如何访问包含 64 位版本路径的变量 c Windows SysWOW64 WindowsPowerSh

  • xhtml 文档 - Lang 选项问题

    下面显示的两行有什么区别 如果我没有meta标签 会有什么后果 元版本是否会影响屏幕阅读器而顶部版本则不会 我对他们到底做什么有点困惑 预先感谢您的任何帮助 此致 Skip 深入研究辅助功能识别您的语言页面 http diveintoacc

  • 理解 scala 的 _ 与 Any/Nothing

    如果一个类具有协变类型参数 例如Iterable A http www scala lang org archives downloads distrib files nightly docs 2 10 1 library index ht

  • 使用 NUnit 或 XUnit 时如何将参数传递给 dotnet test 命令

    我正在使用 C 和 NET Core Selenium 和 NUnit 开发一些端到端测试 现在我想写一个登录测试用例 我的测试是从控制台开始的 只需使用dotnet test命令 我只想将用户名和密码传递给此命令并在我的测试中获取它们 我

  • Django LoginForm 中间件打破了基于类的视图

    据几其他答案 https stackoverflow com questions 2734055 putting a django login form on every page 我使用中间件在项目的每个页面上显示登录表单 以便用户可以就

  • 如何从java程序的main方法调用Scala程序的main方法？

    假设我在 Java 项目中有一个 Scala 类和一个 Java 类 scala 类如下所示 class Sam def main args Array String Unit println Hello 如何从同一项目中存在的 java

  • 如何禁用 WebBrowser 控件中的点击声音

    我使用 Javascript 单击网络浏览器控件中的链接 但我不想听到IE的 咔哒 声 有什么办法可以做到这一点吗 P S 我不想更改系统设置 我见过这个 如何仅在您的应用程序中禁用网络浏览器 点击声音 https stackoverflo

  • 通过包含在盐堆栈中传递变量

    我有几个状态几乎相同 他们都部署项目 创建 virtualenv 并配置主管 区别仅在于存储库 项目名称和一些附加操作 很多代码都是重复的 是否可以将相同的部分放入文件中并包含其他变量 在 Ansible 中可以这样完成 tasks inc

  • 我应该如何处理 Vuex 中的事件？

    我习惯使用全局事件总线来处理跨组件方法 例如 var bus new Vue Component A bus emit DoSomethingInComponentB Component B bus on DoSomethingInComp

  • CRT 虚拟析构函数

    我今天遇到了由于我的 dll 和实际项目中的不同 CRT 设置 MTd MDd 导致的堆损坏 我发现奇怪的是 只有当我将 dll 中的析构函数设置为虚拟时 应用程序才会崩溃 有一个简单的解释吗 我知道我无法释放不在堆上的内存 但是当我将析构

  • 如何在iOS8自定义键盘上方添加工具栏？

    My problem is write picture I really need you help Maybe inputAccessoryView inputAccessoryViwController can be used but

  • Python Tkinter 在 GUI 中嵌入 Matplotlib

    我正在尝试将绘图嵌入到用 Python 编码的 Tkinter GUI 中 我相信下面的代码成功地将图形放入画布中 但我无法控制 GUI 网格中的画布位置 我希望能够将 GUI 的一部分作为情节 而不是全部 我怎样才能定位这个画布小部件 u

  • 基于连接表的 Django 过滤器

    我有两张桌子 class Client models Model name models TextField lastname models TextField class Meta managed False db table clien

  • MVC 4 - 如何关闭默认的 Error.vbhtml 页面？

    有人知道如何关闭默认错误页面或它的引用位置吗 好吧 我想通了 事实证明 在我的自定义 ElmahHandleErrorAttribute 类中 OnException 方法确实被重写了 应该如此 但第一行代码是 MyBase OnExcep

  • aspx页面中的if语句

    我想在我的网站上编写一个基本的 if 语句 以根据变量是否设置为 true 来显示项目 1 或项目 2 我对 NET 不太熟悉 需要一些关于如何让 if 语句在 aspx 页面上工作的基本结构的帮助 如果目的是显示或隐藏页面的一部分 那么您

  • 单独的数据间隔 bootstrap 轮播 4

    我想为 Bootstrap 4 轮播上的每张幻灯片设置单独的数据间隔 我尝试了一些其他的 javascript 片段 但是它们似乎不适用于我的代码 例如Bootstrap 4 轮播堆栈溢出 https stackoverflow com q

热门标签