slick图片轮换效果
代码语言:html
所属分类:幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - Split Slick Slideshow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'> <style> body, html { height: 100%; background: #110101; font-family: 'Roboto', sans-serif; overflow: hidden; } .slideshow { position: absolute; z-index: 1; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; } .slideshow .slider { width: 100vw; height: 100vw; z-index: 2; } .slideshow .slider * { outline: none; } .slideshow .slider .item { height: 100vh; width: 100vw; position: relative; overflow: hidden; border: none; } .slideshow .slider .item .text { display: none; } .slideshow .slider .item img { min-width: 101%; min-height: 101%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .slideshow .slick-dots { position: fixed; z-index: 100; width: 40px; height: auto; bottom: auto; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: auto; color: #fff; display: block; } .slideshow .slick-dots li { display: block; width: 100%; height: auto; } .slideshow .slick-dots li button { position: relative; width: 20px; height: 15px; text-align: center; } .slideshow .slick-dots li button:before { content: ''; background: #fff; color: #fff; height: 2px; width: 20px; border-radius: 0; position: absolute; top: 50%; right: 0; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all .3s ease-in-out; opacity: 0.6; } .slideshow .slick-dots li.slick-active button:before { width: 40px; opacity: 1; } .slideshow.slideshow-right { left: 0; z-index: 1; width: 50vw; pointer-events: none; } .slideshow.slideshow-right .slider { left: 0; position: absolute; } .slideshow-text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; font-size: 80px; width: 100vw; text-align: center; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight: 100; pointer-events: none; text-transform: uppercase; letter-spacing: 20px; line-height: 0.8; } @media (max-width: 767px) { .slideshow-text { font-size: 40px; } } .the-most { position: fixed; z-index: 1; bottom: 0; left: 0; width: 50vw; max-width: 200px; padding: 10px; } .the-most img { max-width: 100%; } </style> </head> <body translate="no"> <div class="split-slideshow"> <div class="slideshow"> <div class="slider"> <div class="item"> <img src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png" /> </div> <div class="item"> <img src="//repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png" /> </div> <div class="item"> <img src="//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png" /> </div> <div class="item"> <img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" />.........完整代码请登录后点击上方下载按钮下载查看
网友评论0