有两个功能两个转盘

这里的问题，我想要两个转盘在一个页面这意味着第一个旋转木马会自动幻灯片和第二轮播将手动点击两个不同的功能，但我得到了这个问题：有两个功能两个转盘

当第一个传送带滑动时，第二个传送带将消失。
当第二个传送带点击时，第一个传送带没有响应。

所以，这里是我的代码

$(document).ready(function() { 
 
    $('#carousel-1').carousel({ 
 
    interval: 5000 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('#carousel-2').carousel({ 
 
    interval: false 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 

 
<div id="carousel-1" class="carousel slide"> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/350x150" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/350x150" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/350x150" alt="" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div id="carousel-2" class="carousel slide"> 
 
     <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <img src="http://placehold.it/350x150" alt="" /> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/350x150" alt="" /> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/350x150" alt="" /> 
 
     </div> 
 
     </div> 
 
     <a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a> 
 
     <a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a> 
 
    </div> 
 
    </div>

这里也是我的小提琴https://jsfiddle.net/za9un2wc/

我使用Twitter的引导对我的工作在这里。任何建议/解决方案，你们可以给我吗？由于

来源

2017-01-23 ShafiqqAziz

你''

' has not yet closed... you should add '

。 – tkhm

导航，您应该第二轮播前加</div>。我不确定这对你来说是否够用，但在我看来看起来不错。

<div id="carousel-1" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://placehold.it/350x150" alt="" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
    </div> 
    </div> 
</div><!-- Added div --> 
<div class="container"> 
    <div id="carousel-2" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="http://placehold.it/350x150" alt="" /> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
     </div> 
     <div class="item"> 
     <img src="http://placehold.it/350x150" alt="" /> 
     </div> 
    </div> 
    <a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a> 
    </div> 
</div>

来源

2017-01-23 01:07:00 tkhm

我真的很傻，谢谢你解决我的谜语@tkhm非常感谢你 – ShafiqqAziz

只需添加HREF =“＃转盘-2”的第二个

来源

2017-01-23 00:57:51 Payal2299

https://jsfiddle.net/za9un2wc/2/ – Payal2299

有两个功能两个转盘

回答

相关问题