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

我正在使用一个滑块和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
})

});  
});

$（文档）.ready（函数（）{
var thumbs=jQuery（“#缩略图”）.slipply({
//通用元素和包装器
拖鞋，
//选择权
过渡：“水平”，
传呼机：错，
汽车：错，
onSlideBefore：函数（el、索引旧、索引新）{
jQuery（'.for_thmb a img'）.removeClass（'active'）；
jQuery（'img'，jQuery（'for_thmb li'）[index_new]）.addClass（'active'）；
}
})
jQuery（'.for_thmb a'）。单击（函数（）{
警报（“ss”）；
thumbs.goToSlide（$（this.data（'slide'））；
返回false；
})
$（'.easyPaginateNav a'）。文本（''；
$（函数（）{
$（“.thumbs”）.easyPaginate({
paginateElement:'li'，
元素页面：4，
效果：“爬升”，
滑块偏移：“100”，
第一个按钮：错误，
lastButton:false，
prevButton:错误，
下一个按钮：false
})
});  
});

---

我还尝试更改加载在页眉/页脚中的脚本顺序。我还更改了div的类名称。正如您所看到的，这两个插件使用的是同一个div。我们将非常感谢您的帮助。谢谢

也许这个链接可以帮助你：不，这是不同的。尽管谢谢你的帮助：）