glide实现可拖动层叠式大标题图片幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:glide实现可拖动层叠式大标题图片幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Ultra&display=swap" rel="stylesheet"> <style> /********************** Glider styles ***********************/ .glide { position: relative; width: 100%; box-sizing: border-box; } .glide * { box-sizing: inherit; } .glide__track { overflow: hidden; } .glide__slides { position: relative; width: 100%; list-style: none; backface-visibility: hidden; transform-style: preserve-3d; touch-action: pan-Y; overflow: hidden; margin: 0; padding: 0; white-space: nowrap; display: flex; flex-wrap: nowrap; will-change: transform; } .glide__slides--dragging { user-select: none; } .glide__slide { width: 100%; height: 100%; flex-shrink: 0; white-space: normal; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .glide__slide a { user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; } .glide__arrows { -webkit-touch-callout: none; user-select: none; } .glide__bullets { -webkit-touch-callout: none; user-select: none; } .glide--rtl { direction: rtl; } .glide__arrow { position: absolute; display: block; top: 50%; z-index: 2; color: white; text-transform: uppercase; padding: 9px 12px; background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 4px; box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); opacity: 1; cursor: pointer; transition: opacity 150ms ease, border 300ms ease-in-out; transform: translateY(-50%); line-height: 1; } .glide__arrow:focus { outline: none; } .glide__arrow:hover { border-color: white; } .glide__arrow--left { left: 2em; } .glide__arrow--right { right: 2em; } .glide__arrow[data-disabled=true] { opacity: 0.33; pointer-event: none; } /********************** styles ***********************/ body { padding: 0; background: #181726; font-family: "Ultra", serif; } .slider__container { width: 100%; padding-bottom: 5rem; position: relative; overflow: hidden; } .slider__wrapper { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: nowrap; margin-left: -25vw; } .slider__title { font-size: 3rem; color: white; } .glide { width: 40vw; height: 40vw; } .glide__main { width: 50vw; height: 50vw; margin: 0 10vw; } .glide__main .glide__slide { width: 100%; height: 100%; } .glide__main .glide__slide .img__cover { min-height: 50vw; } .glide__main .glide__slide:not(.active) .img__bg { transform: scale3d(1.2, 1.2, 1); transition: transform 0.9s 0.3s cubic-bezier(0.345, 0, 0, 1); } .glide__main .glide__slide.active .img__bg { transform: scale3d(1, 1, 1); transition: transform 0.9s 0.3s cubic-bezier(0.345, 0, 0, 1); } .glide__text { width: 100vw; position: absolute; top: 50%; left: 0; z-index: 1; } .glide__text .slider__title { width: 100vw; padding-left: 20vw; } .glide__slide { position: relative; } .glide__slide .img__cover { width: 100%; height: 100%; min-height: 40vw; position: relative; overflow: hidden; } .glide__slide .img__cover img { width: 100%; height: auto; object-fit: cover; } .glide__slide .img__bg { width: 50vw; height: 50vw; position: absolute; left: 0; right: 0; bottom: 0; transform: scale3d(1.2, 1.2, 1); background-size: cover; z-index: 1; } .glide__arrow { width: 2.875rem; height: 2.875rem; position: relative; left: auto; right: auto; border-radius: 50%; border-color: #555; color: #ed6062; z-index: 2; } .glide__arrow--left { margin-bottom: 1rem; } .glide__arrows { position: absolute; right: 0; bottom: -6.5rem; display: flex; justify-content: space-between; width: 50vw; } @media screen and (min-width: 1000px) { .glide .slider__title { font-size: 5rem; } .glide__arrows { right: -5rem; bottom: -1rem; flex-wrap: wrap; width: 2.875rem; } } </style> </head> <body> <!-- partial:index.partial.html --> <div class="slider__container"> <div class="slider__wrapper"> <div class="glide glide__text"> <div class="glide__track" data-glide-el="track"> <ul class="glide__slides"> <li class="glide__slide"> <h2 class="slider__title">Title 1</h2> </li> <li class="glide__slide"> <h2 class="slider__title">Title 2</h2> </li> <li class="glide__slide"> <h2 class="slider__title">Title 3</h2> </li> </ul> </div> </div> <div class="glide glide__small glide__prev"> <div class="glide__track" data-glide-el="track"> <ul class="glide__slides"> <li class="glide__slide"></li> <li class="glide__slide"> <div class="img__cover"> <div class="img__bg" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/64a4cd81c7470.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_600,/quality,q_90)"> </div> </div> </li> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0