Swiper实现炫酷图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:Swiper实现炫酷图文幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.3.3.1.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.3.3.1.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> .centerx, .header__basic--black .header__img, .section__crazy__color .wrapper__color .wrapper__panel .color .color__el h3, .section__handsketch__color .wrapper__audrio .color .color__el h3, .section__handsketch__color .wrapper__audrio img, .section__woy__color .wrapper__audrio .color .color__el h3, .section__woy__color .wrapper__audrio img { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .centery, .header__basic--studio .header__img, .section__404 .title__block, .section__jobs .jobs__ul .jobs__ul__li .jobs__ul__li__a i, .section__site .site__template .site__template__bar .template__button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .centerxy, .flux__el--twitter p, .job__title .close--profil i, .job__title .title__block, .loading .loading__elements #display, .loading .loading__elements #progress, .navigation__project .navigation__project__block .content__text, .navigation__project .navigation__project__block:nth-child(2) .link, .other__team .profil__team .profil__team__li a img, .section__404 .overlay__404, .section__about .background__about .play i, .section__customer .customers .customers__li img, .section__projets .awards .awards__li a img, .section__projets .swiper-projets .swiper-slide .swiper-slide-block-content .text__content, .section__team .swiper-slide .slide__img .overlay, nav .center__navigation { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } a { text-decoration: none; color: #21272b; cursor: pointer; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } ul { padding: 0; margin: 0; list-style: none; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } [type=reset], [type=submit], button, html [type=button] { -webkit-appearance: button; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } body { background-color: transparent; padding: 0; transition: padding 0.3s ease-in-out; } .main__title { color: #f2f3f3; text-transform: uppercase; font-family: Montserrat, sans-serif; font-weight: 900; font-size: 2.6em; letter-spacing: 1px; margin: 0; } .main__title span { color: #ff2d71; } .main__subtitle { margin: 2px 0; font-weight: 700; font-family: Montserrat, sans-serif; font-size: 0.9em; color: #f2f3f3; } @media (min-width: 768px) { .main__subtitle { font-size: 1.1em; } } .main__subtitle span { font-family: "Patua One", cursive; color: #00a8af; font-style: italic; } .link { display: inline-block; width: auto; position: relative; text-decoration: none; color: #21272b; font-family: Montserrat, sans-serif; font-size: 0.7em; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #00a8af !important; transition: all 0.3s ease-in-out; } .link:hover { letter-spacing: 2px; } .link__apply { display: block; width: 150px; padding: 16px 12px; background-color: #00a8af; border: 2px solid #00a8af; border-radius: 1px; color: #f2f3f3; text-decoration: none; text-transform: uppercase; text-align: center; font-weight: 700; font-family: Montserrat, sans-serif; font-size: 0.813em; letter-spacing: 1px; transition: all 0.3s ease-in-out; } .link__apply:hover { background-color: transparent; letter-spacing: 3px; border-radius: 1px; } .link__apply:active { background-color: transparent; letter-spacing: 3px; border-radius: 1px; } .link__apply:focus { background-color: transparent; letter-spacing: 3px; border-radius: 1px; } .swiper-container { width: 100%; height: auto; margin-left: auto; margin-right: auto; position: relative; cursor: -webkit-grab; cursor: grab; } @media (min-width: 1200px) { .swiper-container { height: 550px; } } .swiper-button-next, .swiper-button-prev { width: 50px; height: 50px; background-image: none; background-color: #e4e4e4; z-index: 2; cursor: pointer; } .swiper-button-next i, .swiper-button-prev i { position: relative; left: 50%; top: 50%; color: #21272b; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; } @keyframes arrowRight { 0% { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } 50% { -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); } 100% { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } .swiper-button-next:hover i, .swiper-button-prev:hover i { -webkit-animation: arrowRight 1s infinite; animation: arrowRight 1s infinite; } .swiper-button-next { position: absolute; top: 0; right: 0; margin-top: 0; } @media (min-width: 1200px) { .swiper-button-next { right: 300px; background-color: #f2f3f3; } } .swiper-button-prev { position: absolute; top: auto; bottom: 0; left: 0; } @media (min-width: 1200px) { .swiper-button-prev { bottom: 74px; background-color: #f2f3f3; } } .swiper-slide { text-align: center; font-size: 18px; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .swiper-slide__block { width: 100%; margin: 0 auto; height: 100%; text-align: left; } .swiper-slide__block .swiper-slide__block__img { width: 100%; height: auto; overflow: hidden; } .swiper-slide__block .swiper-slide__block__img a { display: block; width: 100%; height: 100%; } @media (min-width: 1200px) { .swiper-slide__block .swiper-slide__block__img { width: 65%; max-height: 476px; height: 476px; max-width: 735px; overflow: hidden; position: relative; } } .swiper-slide__block .swiper-slide__block__img img { width: 100%; height: auto; transition: all 0.3s ease-in-out; } @media (min-width: 1200px) { .swiper-slide__block .swiper-slide__block__img img { position: absolute; top: 0; left: 0; width: auto; height: 100%; } } .swiper-slide__block .swiper-slide__block__img:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-filter: brightness(0.5); filter: brightness(0.5); } .swiper-slide__block .swiper-slide__block__text { width: 85%; height: auto; margin: 0 auto; margin-top: 50px; position: relative; } @media (min-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0