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%;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0