Skip to content

Commit

Permalink
npm初始化包、添加swiper初始化文件和样式文件
Browse files Browse the repository at this point in the history
  • Loading branch information
@sumumm
sumumm committed May 11, 2021
0 parents commit 12573b1
Show file tree
Hide file tree
Showing 3 changed files with 336 additions and 0 deletions.
24 changes: 24 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "hexo-qidaink-swiper_bar",
"version": "1.0.0",
"description": "The swiper bar of Cloud And Sea.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/qidaink/hexo-qidaink-swiper_bar.git"
},
"keywords": [
"swiper",
"butterfly",
"next"
],
"author": "qidaink",
"license": "ISC",
"bugs": {
"url": "https://github.com/qidaink/hexo-qidaink-swiper_bar/issues"
},
"homepage": "https://github.com/qidaink/hexo-qidaink-swiper_bar#readme"
}
34 changes: 34 additions & 0 deletions src/swiper-init.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/* =====================================================================
* FileInstructions：swiper 参数初始化文件
* RelatedLinks: https://www.swiper.com.cn/
* =====================================================================*/
var swiper = new Swiper('.blog-slider', {
passiveListeners:true,
spaceBetween: 30,
effect: 'fade',
loop: true,
autoplay: {
disableOnInteraction: true,
delay:3000
},
observer:true, //修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
mousewheel:false,
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
clickable: true,
}
});

if(document.getElementById('swiper_container')){
var comtainer = document.getElementById('swiper_container');
comtainer.onmouseenter = function () {
swiper.autoplay.stop();
};
comtainer.onmouseleave = function () {
swiper.autoplay.start();
}
}


278 changes: 278 additions & 0 deletions src/swiperbar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
/*=======================================================================================
* FileName：swiperbar.css
* FileInstructions：文章置顶轮播图样式文件
* RelatedLinks: https://www.swiper.com.cn/
* https://codepen.io/JavaScriptJunkie/pen/WgRBxw
* Attention: 此样式文件当作 CDN 引用无问题，若本地引用，则 pagination 部分间距很小，这是因为 swiper 官方的
* css 文件中也有该样式，而本地修改样式似乎不能覆盖官方 css 文件样式，但是使用 CDN 链接引入就可以，
* 暂时也还不知道为什么。
=======================================================================================*/

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
/* ----------------------------------------------- */
* {
box-sizing: border-box; /* box-sizing 属性允许以某种方式定义某些元素，以适应指定区域。
border-box 表示指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/
}
/* ----------------------------------------------- */
.blog-slider {
width: 100%;
position: relative;
border-radius: 12px 8px 8px 12px;
margin: auto;
background: var(--global-bg);
padding: 10px;
transition: all .3s;
}
@media screen and (max-width: 768px) {
.blog-slider {

min-height: 350px;
height: auto;
margin-top: 110px;
margin-bottom: 10px;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider {
height: 350px;
}
}
.blog-slider__item {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.blog-slider__item {
flex-direction: column;
}
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
opacity: 1;
transition-delay: .3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
opacity: 1;
transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
transition-delay: 1.7s;
}
.blog-slider__img {
width: 200px;
flex-shrink: 0;
height: 200px;
padding:10px;
border-radius: 5px;
transform: translateX(0px);
overflow: hidden;
}
.blog-slider__img:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

border-radius: 5px;
opacity: 0.8;
}
.blog-slider__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
border-radius: 5px;
transition: all .3s;
}
@media screen and (max-width: 768px) {
.blog-slider__img {
transform: translateY(-50%);
width: 90%;
}
}
@media screen and (max-width: 576px) {
.blog-slider__img {
width: 95%;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider__img {
height: 270px;
}
}
.blog-slider__content {
padding-right: 50px;
padding-left: 50px;
}
@media screen and (max-width: 768px) {
.blog-slider__content {
margin-top: -80px;
text-align: center;
padding: 0 30px;
}
}
@media screen and (max-width: 576px) {
.blog-slider__content {
padding-left: 10px;
padding-right: 10px;
}
}
.blog-slider__content > * {
opacity: 0;
transform: translateY(25px);
transition: all .4s;
}
.blog-slider__code {
color: var(--font-color);
margin-bottom: 0px;
display: block;
font-weight: 500;
}
.blog-slider__title {
font-size: 18px;
font-weight: 700;
color: var(--font-color);
margin-bottom: 15px;
-webkit-line-clamp: 1;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
.blog-slider__text {
color: var(--font-color);
-webkit-line-clamp: 1;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
margin-bottom: 15px;
line-height: 1.5em;
}
.blog-slider__button {
display: inline-flex;
background-color: var(--btn-bg);
padding: 4px 14px;
border-radius: 8px;
color: var(--btn-color);
text-decoration: none;
font-weight: 500;
justify-content: center;
text-align: center;
letter-spacing: 1px;
}
.blog-slider__button:hover{
background-color: var(--btn-hover-color);
color: var(--btn-color);
}
@media screen and (max-width: 576px) {
.blog-slider__button {
width: 100%;
width: 100%;
}
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
.blog-slider__pagination {
position: absolute;
z-index: 21;
right: 20px;
width: 11px !important;
text-align: center;
left: auto !important;
top: 50%;
bottom: auto !important;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.blog-slider__pagination {
transform: translateX(-50%);
left: 50% !important;
top: 320px;
width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 8px 0;
}
@media screen and (max-width: 768px) {

.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
}
.blog-slider__pagination .swiper-pagination-bullet {
width: 11px;
height: 11px;
display: block;
border-radius: 10px;
background: #858585;
opacity: 0.2;
transition: all .3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
opacity: 1;
background: var(--btn-bg);
height: 30px;
}
@media screen and (max-width: 768px) {
.blog-slider__pagination .swiper-pagination-bullet-active {
height: 11px;
width: 30px;
}
}
.blog-slider__button{display:none}
@media screen and (max-width: 768px) {
.blog-slider__button{display:inline-flex}
.blog-slider__text{margin-bottom:40px}
}

0 comments on commit 12573b1

Please sign in to comment.