slider实现自适应炫酷滑动图文卡片幻灯片效果代码-html代码-BFW代码库

slider实现自适应炫酷滑动图文卡片幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：slider实现炫酷滑动图文卡片幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式新闻卡片滑块</title>
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css">
    <style>
@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext");
        html {
            position: relative;
            overflow-x: hidden !important;
        }

        body {
            font-family: "Quicksand", sans-serif;
        }

        a, a:hover {
            text-decoration: none;
        }

        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            stroke-width: 0;
            stroke: currentColor;
            fill: currentColor;
        }

        .background {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        .background:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(45deg, rgba(209, 0, 42, 0.6) 0%, #0E5DC4 100%);
            opacity: 0.9;
        }
        .background img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            user-select: none;
        }

        .item-bg {
            width: 300px;
            height: 500px;
            position: absolute;
            top: 30px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
            opacity: 0;
            transition: all 0.3s;
            left: -30px;
        }
        .item-bg.active {
            left: 0;
            top: 0;
            opacity: 1;
        }

        .news-slider {
            z-index: 2;
            max-width: 1300px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 60px;
        }
@media screen and (max-width: 1300px) {
            .news-slider {
                max-width: 1000px;
            }
        }
@media screen and (max-width: 576px) {
            .news-slider {
                margin-top: 45px;
            }
        }
        .news-slider__wrp {
            display: flex;
            align-items: flex-start;
            position: relative;
            z-index: 2;
        }
        .news-slider__item {
            width: 400px;
            flex-shrink: 0;
        }
@media screen and (max-width: 992px) {
            .news-slider__item {
                width: 340px;
            }
        }
        .news-slider__item.swiper-slide {
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s;
        }
        .news-slider__item.swiper-slide-active, .news-slider__item.swiper-slide-prev, .news-slider__item.swiper-slide-next {
            opacity: 1;
            pointer-events: auto;
        }
        .news-slider__ctr {
            position: relative;
            z-index: 12;
        }
        .news-slider__arrow {
            background: #fff;
            border: none;
            display: inline-flex;
            width: 50px;
            height: 50px;
            justify-content: center;
            align-items: center;
            box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            z-index: 12;
            cursor: pointer;
            outline: none !important;
        }
        .news-slider__arr.........完整代码请登录后点击上方下载按钮下载查看