如何使用 JavaScript 或任何方法在移动设备中停止引导 4 轮播自动滑动

Question

I'm trying to stop my carousel to auto slide for mobile devices only.我正在尝试停止我的轮播以仅针对移动设备自动滑动。 Can You please help me out from this query.你能帮我解决这个问题吗？ I found some related questions in this portal but those are not working for me.我在此门户中发现了一些相关问题，但这些问题对我不起作用。 Please suggest the answer.请提出答案。 The below example is the sample bootstrap carousel code.下面的示例是示例引导轮播代码。
I'm trying to stop my carousel to auto slide for mobile devices only.我正在尝试停止我的轮播以仅针对移动设备自动滑动。 Can You please help me out from this query.你能帮我解决这个问题吗？ I found some related questions in this portal but those are not working for me.我在此门户中发现了一些相关问题，但这些问题对我不起作用。 Please suggest the answer.请提出答案。 The below example is the sample bootstrap carousel code.下面的示例是示例引导轮播代码。

 <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>

Answer 1

Use.carousel's pause and cycle to do this.. as shown below.使用.carousel 的暂停和循环来做到这一点.. 如下图。

 // 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'); } })

 /* 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>

如何使用 JavaScript 或任何方法在移动设备中停止引导 4 轮播自动滑动

问题描述

1 个解决方案

解决方案1
0 2020-07-06 13:31:47

如何使用 JavaScript 或任何方法在移动设备中停止引导 4 轮播自动滑动

问题描述

1 个解决方案

解决方案1 0 2020-07-06 13:31:47

解决方案1
0 2020-07-06 13:31:47