[英]Bootstrap 3 Carousel indicators not functioning and no auto-sliding working
我有一個推薦滑動器，該滑動器一周前滑動得很漂亮，並且似乎在沒有任何更改的情況下已停止工作。 控制指示器也不起作用。 輪播卡在第一個項目上。
我已經檢查了100萬個示例，並驗證了HTML，並且非常瘋狂。 請注意，一個轉盤位於另一個相當靜止的轉盤內。 當我分開它們時，推薦信消失了。 任何幫助，將不勝感激。
這是HTML，CSS只是格式和位置，我沒有更改bootstrap.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Wylie For Weight Loss</title> <!-- Custom stylesheet --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- Custom stylesheet --> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <!-- ====== Header Section ====== --> <header> <!-- ====== Menu Section ====== --> <div id="main-nav1" class="navbar navbar-default navbar-fixed-top navbar-fixed-carousel nav-bar-scroll" role="navigation"> <div class="navbar-collapse collapse navbar-right"> <ul id="ulnav" class="nav navbar-nav target-changer"> <li><a href="wylieformedspa.html" style="font-weight:normal; margin-right: 0px; padding-right: 5px;">For MedSpas</a></li> <li><a href="wylieforweightloss.html" style="font-weight:normal; margin-left: 5px; padding-left: 5px;"><span style="color: #FFB718;">For WeightLoss Clinics</span></a></li> </ul> </div> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img src="images/logo-dark.png" class="img-responsive" id="nav-img"></a> <!-- end .navbar-header --> </div> <div class="navbar-collapse collapse navbar-right"> <ul id="ulnav" class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li><a href="ourpos.html">The System</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <!-- end .navbar-collapse --> </div> <!-- end .container --> </div> <!-- end #main-nav --> <!-- ====== End Menu Section ====== --> </header> <!-- ====== End Header Section ====== --> <div id="top"> <div id="myCarousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active" style="background: url('images/5.jpg') 50% 0 no-repeat fixed;"> <div class="center-container"> <div class="container" style="text-align:center;"> <div class="slider-content"> <h2 class="fadeInUp animated delayTwo" style="margin-bottom:0px;">Wylie Business System</h2> <p class="fadeInUp animated delayThree">The only business management system your weight loss clinic will need.</p> <form class="form-inline" action="weightloss_form-to-email.php" method="post" enctype="multipart/form-data"> <div class="col-md-6"> <input name="name" type="text" id="name" class="sm-form-control required" placeholder="Your name"> </div> <div class="col-md-6"> <input name="email" type="text" id="email" class="required email sm-form-control" placeholder="Your email address"> </div> <div style="text-align:center;"> <input type="submit" name="Send" value="Get a Demo" class="button button-orange" style="margin:0px; font-weight:bold;"> </div> </form> </div> </div> </div> </div> </div> <!-- end .top> .container --> <div id="testimonialSlider" class="carousel slide" data-ride="carousel" style="margin-top: 0px;"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="container"> <div class="col-md-12 text-center"> <div class="testi-content"> <p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p> <div class="testi-meta"> JASON SCHNEIDER <span>Weight Loss Couture, St. Louis, Missouri</span> </div> </div> </div> </div> </div> <div class="item"> <div class="container"> <div class="col-md-12 text-center"> <div class="testi-content"> <p>I love how your POS has made our lives at our multiple locations easier to manage. It is user friendly for those that are not as technically inclined (like me). We love that we can do most record keeping and transactions in one place. Prior to using your POS, we had to use many different types of software and applications. Now everything is more streamlined. As easy as it is to use, there are still some instances where I need a bit of advice on how to navigate or improve upon our day to day record keeping, and you have demonstrated exemplary service by always responding to any 'emergencies' I may have in a friendly, quick and efficient manner!</p> <div class="testi-meta"> JENNIVINE LEE <span>Lumina Skin, San Francisco, CA</span> </div> </div> </div> </div> </div> <div class="item"> <div class="container"> <div class="col-md-12 text-center"> <div class="testi-content"> <p>We purchased WyliePOS for our weight loss clinic here in Wyoming. The system has been a huge help in the operation of the business. Not only has it dramatically simplified things at the point of sale, the 'back-end' functionality has made it easy to track inventories and financials (used to use QuickBooks). Also, 'Wylie' has added some very helpful custom features to the system, most notably a patient reporting tool, which tracks patient progress and enables automated reporting to referring physicians.</p> <div class="testi-meta"> SCOTT POPP <span>Owner - Popp Chiropractic and Rehabilitation</span> </div> </div> </div> </div> </div> <div class="item"> <div class="container"> <div class="col-md-12 text-center"> <div class="testi-content"> <p>Wylie's Point of Sale system has been great for our business! They made sure we got up and going as quickly as possible and continue to have stellar after-service support. We also like that on an on-going basis they optimize the product (recently added the ability to manage employee discounting)</p> <div class="testi-meta"> TAMARA HAWK MPT <span>Director of Therapies, Cardiac Rehab – Wyoming Medical Center</span> </div> </div> </div> </div> </div> <div class="item"> <div class="container"> <div class="col-md-12 text-center"> <div class="testi-content"> <p>I am glad that I connected with Wylie Systems, I think what I like most is their availability to help solve any concerns immediately– they have never let us down. In addition they have provided a constant stream of improvements to an already great product. The POS is great – it really helps me keep track of and analyse sales without being tied to the office. Going back to the traditional cash register – or even the most modern version – would be a nightmare!</p> <div class="testi-meta"> JOHN LESTER <span>Point de Depart, Gatineau, Quebec</span> </div> </div> </div> </div> </div> <div class="item"> <div class="container"> <div class="col-md-12 text-center"> <div class="testi-content"> <p>Wylie Systems Inc. has done several projects for Karrys to help us at the point of sale. The quality of their work and customer support following completion has been excellent.</p> <div class="testi-meta"> PETER KERR <span>VP Sales at Karrys Bros. Limited</span> </div> </div> </div> </div> </div> <div class="item"> <div class="container"> <div class="col-md-12 text-center"> <div class="testi-content"> <p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p> </div> </div> </div> </div> </div> <ol class="carousel-indicators"> <li data-target="#testimonialSlider" data-slide-to="0" class="active"></li> <li data-target="#testimonialSlider" data-slide-to="1"></li> <li data-target="#testimonialSlider" data-slide-to="2"></li> <li data-target="#testimonialSlider" data-slide-to="3"></li> <li data-target="#testimonialSlider" data-slide-to="4"></li> <li data-target="#testimonialSlider" data-slide-to="5"></li> <li data-target="#testimonialSlider" data-slide-to="6"></li> </ol> </div> </div> </div> <!-- ====== End Footer ====== --> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- Bootstrap 3.2.0 js --> <script src="js/bootstrap.js"></script> <!-- jQuery Parallax plugin --> <script src="js/jquery.parallax-1.1.3.js"></script> <!-- jQuery One Page Nav Plugin --> <script src="js/jquery.nav.js"></script> <script src="js/jquery.viewportchecker.js"></script> <!-- Custom JS --> <script src="js/site.min.js"></script> </body> </html>
嘗試把這個：
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 3000
});
});
用以下代碼替換了boostrap.css和bootstrap.js源代碼的本地副本：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
和
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
帶有圖像指示器的Bootstrap輪播，就像縮略圖不工作一樣
[英]Bootstrap carousel with images indicators, like thumbnails not working
Bootstrap 4 Carousel - 指標未出現（控件和 jumbotron 容器工作正常）
[英]Bootstrap 4 Carousel - indicators not appearing (controls and jumbotron container working fine)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.