jquery slick实现可横向拖动图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery slick实现可横向拖动图文幻灯片效果代码
代码标签: jquery slick 横向 拖动 图文 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/slick.1.8.css"> <style> .slick-slide { /* Opacity and scale down to place focus on active slide */ opacity: 0.5; transition: all 0.2s ease-in-out; transform: scale(0.9); outline: none; /* Grab Hand Cursor */ cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } /* Default Slick Slide ACTIVE Scale to full size and bring up opacity */ .slick-slide.slick-center { opacity: 0.95; transform: scale(1); cursor: pointer; } /* Add padding between slides */ .slick-slider .slick-slide { padding: 0 15px; } /* Hide defualt slick prev - next text Still accessible. */ .slick-arrow { font-size: 1px !important; color: transparent; } .slider .slick-arrow { position: absolute; background: #3c3b6e; opacity: 0.7; bottom: -40px; z-index: 1; width: 3rem; height: 3rem; transform: translateY(-50%); padding: 0; overflow: hidden; font-size: 20px; background-repeat: no-repeat; background-position: center; background-size: cover; border: 1px solid #fff; border-radius: 0%; cursor: pointer; outline: none; transition: 0.25s; } .slider .slick-arrow:hover, .slider .slick-arrow:focus { border-color: white; color: #b22234; background: #b22234; opacity: 0.95; } .slider .slick-arrow:active { transform: translateY(-50%) scale(0.9); } .slider .slick-prev { right: 180px; } .slider .slick-next { right: 100px; } .slick-prev:before { content: "←"; color: white; font-size: 30px; } .slick-next:before { content: "→"; color: white; font-size: 30px; } .slick-slide img { width: 100%; height: 100%; max-width: 100%; -o-object-fit: cover; object-fit: cover; } /* Position Slick dots container down some */ ul.slick-dots { margin-top: 40px; } .slick-dots button { background: transparent; color: white; border: 1px solid white; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; padding-left: 10px; cursor: pointer; opacity: 0.8; } .slick-dots > li { display: inline-block; margin: 12px; } .slick-dots > .slick-active { color: #b22234; font-weight: bold; } .slick-dots { list-style: none; border-radius: 50%; transition: 0.2s; text-align: center; padding: 0; margin: 0; position: relative; width: 90vw; margin: 0 auto; } .slick-dots li { display: inline-block; vertical-align: top; margin: 0 8px; } .slick-dots li button { border: none; cursor: pointer; font-size: 13px; border: 1px solid #fff; box-shadow: 0 0 0 0 transparent; color: #fff; background-color: transparent; transition: all 0.3s ease; opacity: 0.4; } .slick-dots li button:focus { outline: none; } .slick-dots li button:hover { opacity: 1; background: #3c3b6e; } .slick-dots li.slick-active button { background: #b22234; box-shadow: 0 0 0 1px #fff; opacity: 0.9; } /* SLIDER CARD */ figure.menu-card { color: #fff; position: relative; overflow: hidden; width: 100%; background-color: #262626; text-align: left; font-size: 16px; opacity: 0.95; } figure.menu-card * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } figure.menu-card img { max-width: 100%; vertical-align: top; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } figure.menu-card figcaption { padding: 25px; position: relative; } figure.menu-card .date { background-color: rgba(60, 59, 110, 0.5); top: 0px; color: #fff; right: 0px; position: absolute; text-align: center; font-size: 21px; letter-spacing: 1px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; } figure.menu-card h2 { font-weight: 600; color: white; text-transform: uppercase; line-height: 1; margin: 0; padding-bottom: 5px; letter-spacing: 2px; } figure.menu-card h3 { line-height: 1; letter-spacing: 2px; font-weight: 600; color: white; margin: 0; } figure.menu-card p { padding-top: 15px; padding-bottom: 15px; font-size: 15px; margin-bottom: 20px; line-height: 1.25em; min-height: 90px; } figure.menu-card button { border: medium none; padding: 10px 20px; background-color: rgba(60, 59, 110, 0.95); font-weight: 800; color: #ffffff; letter-spacing: 2px; text-transform: uppercase; font-size: 15px; border: 1px solid white; width: 100%; } figure.menu-card a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.menu-card:hover img, figure.menu-card.hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } figure.menu-card:hover button, figure.menu-card.hover button { background-color: #b22234; border: 1px solid white; } /* DEMO STUFF */ body { background: black; color: white; padding-top: 50px; padding-bottom: 300px; } /* Re-set figure elemnent */ figure { margin: 0; padding: 0; } </style> </head> <body> <!-- SLICK CONTAINER --> <section class="slider">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0