如何使用 JavaScript 或任何方法在移動設備中停止引導 4 輪播自動滑動
[英]How to stop bootstrap 4 carousel automatic sliding in mobile using JavaScript or any
問題描述
我正在嘗試停止我的輪播以僅針對移動設備自動滑動。 你能幫我解決這個問題嗎？ 我在此門戶中發現了一些相關問題，但這些問題對我不起作用。 請提出答案。 下面的示例是示例引導輪播代碼。
我正在嘗試停止我的輪播以僅針對移動設備自動滑動。 你能幫我解決這個問題嗎？ 我在此門戶中發現了一些相關問題，但這些問題對我不起作用。 請提出答案。 下面的示例是示例引導輪播代碼。
<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>
1 個解決方案
解決方案1
0 2020-07-06 13:31:47
使用.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>
如何在手機中停止引導輪播自動滑動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.