Question

我正在使用一个滑块和easyPaginate插件来获取带有缩略图导航和这些缩略图分页的滑块。一次只能运行一个插件。很难找到它但没有运气。还尝试了jQuery noconflict函数。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="assets/scripts/jquery.easyPaginate.js"></script>
<script src="assets/scripts/jquery.snippet.min.js"></script>    
<script src="assets/scripts/slippry.min.js"></script>
<script src="assets/scripts/main2.js" type="text/javascript"></script>


<div class="slider">
<ul id="thumbnails" class="sy-box" >
 <li>
    <a href="#slide1">
        <img src="assets/images/background.jpg" alt="<h6>01.<span>History</span></h6><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ante viverra, rutrum erat rutrum, consectetur mi. Proin at maximus est. Nullam purus ex, iaculis sed erat sed, blandit tincidunt quam. Cras scelerisque id quam sed dignissim Pellentesque urna nunc, gravida quis hendrerit ac, tristique ut quam. Vivamus suscipit dignissim tortor nec congue. </p>">
    </a>
  </li>
  <li>
    <a href="#slide2">
      <img src="assets/images/001.jpg"  alt="This is caption 2">
    </a>
  </li>
  <li>
    <a href="#slide3">
      <img src="assets/images/002.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
    </a>
  </li>
  <li>
    <a href="#slide4">
      <img src="assets/images/background.jpg" alt="And this is some very long caption for slide 4.">
    </a>
  </li>
</ul>
<div class="thumb-box">
    <div class="wrapper">
        <div class="for_thmb">
        <ul class="thumbs" id="thumbs">
        <li class='thmb_li'><a href="#1" data-slide="1"><img src="assets/images/slider1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
        <li class='thmb_li'><a href="#2" data-slide="2"><img src="assets/images/slider1.jpg"  alt="This is caption 2"></a></li>
        <li class='thmb_li'><a href="#3" data-slide="3"><img src="assets/images/slider1.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
        <li class='thmb_li'><a href="#4" data-slide="4"><img src="assets/images/slider4.jpg" alt="And this is some very long caption for slide 4."></a></li>
         <li class='thmb_li'><a href="#1" data-slide="5"><img src="assets/images/slider1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
        <li class='thmb_li'><a href="#2" data-slide="6"><img src="assets/images/slider1.jpg"  alt="This is caption 2"></a></li>
        <li class='thmb_li'><a href="#3" data-slide="7"><img src="assets/images/slider1.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
        <li class='thmb_li'><a href="#4" data-slide="8"><img src="assets/images/slider4.jpg" alt="And this is some very long caption for slide 4."></a></li>  
        </ul>
        </div>    
   </div>
</div>

</div>

Main.js文件代码在这里

$(document).ready(function() {
var thumbs = jQuery('#thumbnails').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="slippry_box thumbnails" />',
  // options
  transition: 'horizontal',
  pager: false,
  auto: false,
  onSlideBefore: function (el, index_old, index_new) {
    jQuery('.for_thmb a img').removeClass('active');
    jQuery('img', jQuery('.for_thmb li')[index_new]).addClass('active');
  }
})

jQuery('.for_thmb a').click(function () {
    alert('ss');
  thumbs.goToSlide($(this).data('slide'));
  return false;
})

$('.easyPaginateNav a').text('');    


$(function() {
$('.thumbs').easyPaginate({
    paginateElement: 'li',
    elementsPerPage: 4,
    effect: 'climb',
    slideOffset: '100',
    firstButton: false,
    lastButton: false,
    prevButton: false,
    nextButton: false
})

});  
});

我也尝试更改在页眉/页脚中加载的脚本序列。我也改变了div的类名。正如你所看到的，两个插件都使用相同的div.Little帮助将不胜感激。感谢

同一个div上的两个插件导致冲突

0 个答案: