swiper实现新闻卡片轮播图轮换效果代码-html代码-BFW代码库

swiper实现新闻卡片轮播图轮换效果代码

代码语言：html

所属分类：幻灯片

代码描述：swiper实现新闻卡片轮播图轮换效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <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__arrow:focus {
          outline: none !important;
        }
        .news-slider__arr.........完整代码请登录后点击上方下载按钮下载查看