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.4.5.1.css"> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #fff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; background-color: #212121; margin: 0; padding: 0; } .swiper-container { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { background-position: center; background-size: cover; width: 320px; background-color: #fff; overflow: hidden; border-radius: 8px; } .picture { width: 320px; height: 320px; overflow: hidden; } .picture img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .detail { padding: 25px 20px; font-weight: 600; text-align: center; } .detail h3 { margin: 0; font-size: 20px; } .detail span { display: block; font-size: 16px; color: #f44336; } </style> </head> <body> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"> <div class="picture"> <img src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt=""> </div> <div class="detail"> <h3>Marie Edwards</h3> <span>Web Designer</span> </div> </div> <div class="swiper-slide"> <div class="picture"> <img src="//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt=""> </div> <div class="detail"> <h3>Kelly Woods</h3> <span>Web Designer</span> </div> </div> <div class="swiper-slide"> <div class="picture"> <img src="//repo.bfw.wiki/bfwrepo/image/62.........完整代码请登录后点击上方下载按钮下载查看
网友评论0