2017-10-28 76 views
0

我的引导旋转木马幻灯片似乎没有工作,即使我尝试了其他答案在这里(其中一个是this引导旋转木马幻灯片按键不灵

但几乎所有的人都没有工作,过时的,即使它解决大多数人的问题(这似乎对我不起作用)

大部分来自引导片段包从Visual Studio 2017年(扩展)

<!-- Image Slider w/ Captions --> 
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#my-carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#my-carousel" data-slide-to="1"></li> 
     <li data-target="#my-carousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

     <div id="#my-carousel" class="item active"> 
      <img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide"> 
      <div class="carousel-caption"> 
       <h3>Caption heading 1</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      </div> 
     </div> 

     <div id="#my-carousel" class="item"> 
      <img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide"> 
      <div class="carousel-caption"> 
       <h3>Caption heading 2</h3> 
       <p>Morbi eget libero quis metus consectetur semper.</p> 
      </div> 
     </div> 

     <div id="#my-carousel" class="item"> 
      <img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide"> 
      <div class="carousel-caption"> 
       <h3>Caption heading 3</h3> 
       <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p> 
      </div> 
     </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
<script src="js/animations.js"></script> 

JS代码:(复制的代码here

$(document).ready(function() { 
    console.log("Main Content finished loading!"); 
}); 

$("#myCarousel .slider-pager a").click(function (e) { 
    var index = $(this).index(); 
    slider.carousel(index); 
    e.preventDefault(); 
}); 

我也在其他网站尝试了其他的代码,我似乎无法找到答案或我的问题的解决方案。

回答

0

您的标记有几个错误。 Bootstrap CSS CDN链接丢失。标记中的每张幻灯片都有一个ID id="#my-carousel"。 ID必须是唯一的。

这里是Bootstrap滑块的两个工作示例。一个使用数据属性,另一个使用JavaScript init和外部控件。

var sliderTwo = $('#carouselExampleIndicators2').carousel({ 
 
    /* your options for slider #2 */ 
 
}) 
 

 
$(".slider-pager li").click(function (e) { 
 
    var index = $(this).data('slide'); 
 
    sliderTwo.carousel(index); 
 
    e.preventDefault(); 
 
});
.slider-pager { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
.slider-pager li { 
 
background-color: #333; 
 
color: #FFF; 
 
padding: 1em; 
 
margin: 0 0 1em 0; 
 
cursor: pointer; 
 
text-align: center; 
 
border-radius: 4px; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 

 
    <h2>Slider via data attributes</h2> 
 

 
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
 
    <!-- Your controls --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
 
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
 
    </ol> 
 
    <!-- Your slides --> 
 
    <div class="carousel-inner"> 
 
    <div class="carousel-item active"> 
 
     <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=First+slide" alt="First slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Second+slide" alt="Second slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Third+slide" alt="Third slide"> 
 
    </div> 
 
    </div> 
 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
</div> 
 

 
<hr> 
 

 
<div class="container"> 
 

 
    <h2>Slider via JavaScript,<br>external controls</h2> 
 

 
    <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel"> 
 
    
 
    <!-- Your slides --> 
 
    <div class="carousel-inner"> 
 
    <div class="carousel-item active"> 
 
     <img class="d-block w-100" src="http://placehold.it/1200x675/FF851B/FFFFFF&text=First+slide" alt="First slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block w-100" src="http://placehold.it/1200x675/0074D9/FFFFFF&text=Second+slide" alt="Second slide"> 
 
    </div> 
 
    <div class="carousel-item"> 
 
     <img class="d-block w-100" src="http://placehold.it/1200x675/F012BE/FFFFFF&text=Third+slide" alt="Third slide"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</div> 
 

 
<hr> 
 

 
<div class="container"> 
 
    
 
    <ul class="slider-pager"> 
 
    <li data-slide="0" class="active">First slide</li> 
 
    <li data-slide="1">Second slide</li> 
 
    <li data-slide="2">Third slide</li> 
 
    </ul> 
 
</div>

+0

都尝试你的代码(W/O JS),仍然没有运气:https://i.imgur.com/MbAGzaj.jpg –

+0

按 “运行的代码片断” 看它正在工作。 很难从图像中发现产生错误的原因 - 请提供链接到实时网站,代码操场等。 –

+0

我明白了,它现在起作用了。产生错误的是当我用carouselIndicator替换carouselExampleIndicator(*)时。 –

1

我通过摆弄bootstrap依赖来让你的代码工作。

  • 您发布的代码没有bootstrap css。不知道你是否在自己的项目中错过了它,但我添加了一个链接到CDN。
  • 链接到引导js似乎是抛出一个错误(寻找一个Popper对象?)。我从测试版转换到bootstrap的稳定版本,它工作。
  • 我完全忽略了您的自定义的jQuery:引导CSS可以使用HTML标记来知道什么时候下一张幻灯片,幻灯片上一页等

最后要注意:我并没有改变它,但为什么每个项目都有id="#my-carousel"?我认为只有外部股利(类carousel)需要id="my-carousel"(没有散列符号),其余的可以删除。

<!-- Image Slider w/ Captions --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#my-carousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#my-carousel" data-slide-to="1"></li> 
 
     <li data-target="#my-carousel" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 

 
     <div id="#my-carousel" class="item active"> 
 
      <img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide"> 
 
      <div class="carousel-caption"> 
 
       <h3>Caption heading 1</h3> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
      </div> 
 
     </div> 
 

 
     <div id="#my-carousel" class="item"> 
 
      <img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide"> 
 
      <div class="carousel-caption"> 
 
       <h3>Caption heading 2</h3> 
 
       <p>Morbi eget libero quis metus consectetur semper.</p> 
 
      </div> 
 
     </div> 
 

 
     <div id="#my-carousel" class="item"> 
 
      <img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide"> 
 
      <div class="carousel-caption"> 
 
       <h3>Caption heading 3</h3> 
 
       <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

相关问题