问题：

如何停止bootstrap 4轮播自动滑动在移动中使用JavaScript或任何

华鹭洋

2023-03-14

我正在尝试停止我的旋转木马自动滑动仅用于移动设备。你能帮我解决这个问题吗。我在这个门户网站上发现了一些相关的问题，但这些都不适合我。请提出答案。下面的示例是示例引导轮播代码。
我正在尝试停止轮播以仅用于移动设备的自动滑动。你能帮我解决这个问题吗。我在这个门户网站上发现了一些相关的问题，但这些都不适合我。请提出答案。下面的示例是示例引导轮播代码。

null

<script>
        
        // set breakpoint width
var BP = 362;

// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:500 });

// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
  if( window.innerWidth < BP ){ 
    $('.carousel').carousel({ interval: false });
  } else {
    $('.carousel').carousel({ interval: 500 });
  }
})
    
    </script>

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>

<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://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>We had such a great time in LA!</p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>   
    </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>

null

共有1个答案

杨成礼

2023-03-14

使用。carousel的暂停和循环来执行此操作。如下所示。

null

// set breakpoint width
var BP = 362;

// start carousel
$('.carousel').carousel({
  interval: (window.innerWidth < BP) ? false : 500
});

// if user rotates phone orientation | window resite
$(window).on('resize', function(ev) {
  if (window.innerWidth < BP) {
    $('.carousel').carousel('pause');
  } else {
    $('.carousel').carousel('cycle');
  }
})

css lang-css prettyprint-override">/* Make the image fully responsive */

.carousel-inner img {
  width: 100%;
  height: 100%;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>

<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://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>We had such a great time in LA!</p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>   
    </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>

类似资料：

如何在鼠标进入时停止滑动自动播放和在鼠标离开时开始自动播放？

如何在鼠标进入时停止滑动自动播放和在鼠标离开时开始自动播放？我尝试了.stopAutoPlay（）和.startautoPlay（）函数，但对我不起作用。谢谢。这是代码。
Android：如何停止滑动菜单？

我不知道怎么才能停止滑动菜单。我想删除可以滑动的幻灯片菜单。我试着用代码注释。但我无法停止扮演slidemenu。下面是我的代码。你能帮助我吗？非常感谢！：）
停止滑动鼠标自动播放进入和开始自动播放鼠标离开

如何在鼠标进入时停止滑动自动播放和在鼠标离开时开始自动播放？我尝试了和函数，但对我无效。谢谢。这是代码。我面临控制台错误未捕获的TypeError：swiper.StartautoPlay不是函数
停止在sails.js中自动迁移架构

问题内容：在sails.js中，我们如何停止将模式自动迁移到数据库中。有时，由于迁移会产生错误。有没有一种方法可以使迁移仅在部署应用程序时运行？问题答案：您也可以尝试如下操作：
Android使用ViewPager实现自动轮播

本文向大家介绍Android使用ViewPager实现自动轮播，包括了Android使用ViewPager实现自动轮播的使用技巧和注意事项，需要的朋友参考一下很多APP中都实现了类似引导页的自动轮播，不由得想到昨天的引导页上修改一下代码实现轮播。其实大体上只需要添加一个线程循环执行就可以了。项目已同步至：https://github.com/nanchen2251/viewpagerDem
如何使用PHP启动/停止cronjob？

问题内容：如果我在命令行中键入，则可以看到以下行：要启动此cronjob，我需要使用命令编辑文件，删除该行开头的注释字符，保存已编辑的文件，然后退出编辑器。要停止此cronjob，请执行相同的步骤，但在该行的开头添加注释字符。我想使用 PHP脚本实现完全相同的效果，而不是手动编辑文件。问题答案：我进行了一些研究，并在论坛中找到以下消息：将EDITOR环境变量设置为php脚本
释放移动键时如何使矩形停止？

问题内容：我创建了一个JFrame，它的中央有一个矩形，当我按某些键时，该矩形会移动。一切都很好，但当我松开按键时，矩形会继续前进。实际上，如果我多次按一个键，则矩形会加速。这可能是（肯定），因为在按下某个键时，我正在使用计时器来避免令人讨厌的0.5秒输入延迟。我认为我必须在该方法中添加一些内容，但是我对放置在其中的内容一无所知。有小费吗？谢谢。 PS：请不要对我不使用按键绑定大吼大叫。我
Bootstrap4 轮播

主要内容：如何创建轮播,实例,轮播图片上添加描述,实例轮播是一个循环的幻灯片：如何创建轮播以下实例创建了一个简单的图片轮播效果：实例 <div id="demo" class="carousel slide" data-ride="carousel">  <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="a

如何停止bootstrap 4轮播自动滑动在移动中使用JavaScript或任何

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档