JQuery easy Paginate图片集没有功能

Question

我试图在我的Blogspot单独页面上使用这个jquery轻松分页。https://st3ph.github.io/jquery.easyPaginate/

图像显示，但没有分页显示，也没有css！我需要调整我的css在这个jQuery分页，并使它工作！谁能帮我把这件事做好吗？更新代码*

https:// jsfiddle.net/Anon13/4syqnavw/

Answer 1

如果基于您的实现链接到的jsfiddle，那么问题是如何引用JS文件。您不能直接链接到github上的脚本文件，因为它们不提供具有适当内容类型(有关更多信息，请看这里)的脚本文件。基本上，他们不想让你把github当作cdn对待。

在更新小提琴之后，我可以看到插件可以工作。

这里有一个片段，其代码与小提琴上的代码相同：

​

$('#easyPaginate').easyPaginate({
  paginateElement: 'img',
  elementsPerPage: 3,
  effect: 'climb'
});

    body {
  font-family: Arial, sans-serif;
  text-align: center;
  max-width: 1170px;
  margin: 3rem auto;
  background-color: #101010;
  color: #fff;
}

/* Cosmetic only */
#easyPaginate {display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;max-width: 1000px;
height: auto
margin: 0 auto;}
#easyPaginate img {width: 100%;
height: 150px;
padding: 5px;
border: none;
background: transparent;
object-fit: cover;
position: relative;
}
@media only screen and (max-width: 600px) {
.easyPaginate {
  grid-template-columns: repeat(3, 1fr);
}
}
.easyPaginate img:hover {
z-index: 9;
transform: scale(1.3);
transition: transform ease 0.5s;
}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://st3ph.github.io/jquery.easyPaginate/js/jquery.easyPaginate.js"></script>

<div id="easyPaginate" class="easyPaginateList">
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
</div>

​