Question

我在视差设计中使用Cslider，我很喜欢它，但是当我为2个实例应用cslider（对于2个不同的div）时，我用这个来解决这个问题，这在我尝试申请时工作正常1个实例（1个div）。我想要的是我需要为1 div应用cslider autoplay true而对另一个div应用cslider autoplay false，就像下面这样

<script type="text/javascript">

$(function() {

    $('#div1').cslider({
    autoplay    : false

     });

    $('#div2').cslider({
    autoplay    : true,
    bgincrement : 450
     });

});

</script>

我的Html代码：

<div id="div1" class="da-slider">
    <div class="da-slide">
    <h2>Some description</h2>
    <p>Some description Some description Some description Some description Some description Some description Some description Some description Some description</p>
    <a href="#" class="da-link">Read more</a>
        <div class="da-img"><img src="css/slider/images/2.png" alt="image01" /></div>
        </div>

        <div class="da-slide">
    <h2>Some description</h2>
    <p>Some description Some description Some description Some description Some description Some description Some description Some description Some description</p>
    <a href="#" class="da-link">Read more</a>
        <div class="da-img"><img src="css/slider/images/2.png" alt="image01" /></div>
        </div>  

     <nav class="da-arrows">
    <span class="da-arrows-prev"></span>
    <span class="da-arrows-next"></span>
     </nav>
</div>  




 <div id="div2" class="da-slider" style="height:270px;">
      <div class="da-slide">
         <div class="scrollyeah" data-centerIfFit="true">
         <div class="item1">
               <a class="vlightbox3" href="images/01.jpg" >
                 <img src="images/img01.gif" />
               </a>
            </div>
             <div class="item1">
               <a class="vlightbox3" href="images/01.jpg" >
                 <img src="images/img01.gif" />
               </a>
            </div>
          </div>
       <h5>Scroll through all of the screenshots of the website and admin backend above</h5>
     </div>

     <div class="da-slide">
         <div class="scrollyeah" data-centerIfFit="true">
         <div class="item1">
               <a class="vlightbox3" href="images/01.jpg" >
                 <img src="images/img01.gif" />
               </a>
            </div>
             <div class="item1">
               <a class="vlightbox3" href="images/01.jpg" >
                 <img src="images/img01.gif" />
               </a>
            </div>
          </div>
       <h5>Scroll through all of the screenshots of the website and admin backend above</h5>
     </div>
     <nav class="da-arrows">
    <span class="da-arrows-prev"></span>
        <span class="da-arrows-next"></span>      
      </nav>
  </div>

这里在我的情况下div1不起作用。但当我将div cslider autoplay选项设置为true时，那些工作正常。

任何人都可以帮助我。

Answer 1

所以，这是我对这个主题的看法：

你有一个slider从外部采取，不会在同一页上执行多个instances，对吗？

好吧，使用CSS，您可以修改单个属性所需的任何内容，但JS将始终生效。

您遇到同一properties inherited的原因很可能是因为JS文件是从您上次调用它时获得的。{/ p>

要根据需要创建plugin，不打算（不支持multiple instances），您需要hard-code您的插件接受多个值。如果您的CSS hack占优势，我认为您无法实施任何plugin。

我知道这不是你想听到的答案，但不幸的是这是真的。

唯一真正的办法是重新映射您的插件，或者写下JS来抵消它并将其加载到body的基础上。

Answer 2

据说autoplay:true正在发挥作用，但是当你放autoplay:false它不能正常工作？我认为你的下一个和上一个事件并不紧张。哦，在这种情况下你有两个输出，

某些div与导航按钮重叠。
您在浏览器控制台中遇到任何错误。

尝试检查html代码或在控制台中找到错误。

当我尝试申请两个ID（div）时滑块自动播放不起作用

2 个答案:

所以，这是我对这个主题的看法：