swiper实现图文组合轮播幻灯片代码-html代码-BFW代码库

swiper实现图文组合轮播幻灯片代码

代码语言：html

所属分类：幻灯片

代码描述：swiper实现图文组合轮播幻灯片代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.4.5.1.js"></script>
    <style>
        @charset "utf-8";
    *{ box-sizing:border-box; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none;}
    *:focus { outline: none; }
    html {  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%;}
    body { margin: 0;font-size:14px;line-height:1.5;  font-family:"΢���ź�",microsoft yahei; color:#333; background:#fff; }
    body, div, span, object, iframe, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, q, dl, dt, dd, ol, ul, li, fieldset, form, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section{ padding:0; margin:0;}
    img {  border: 0;vertical-align: middle; max-width:100%;}
    .clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden;}
    .clearfix{ zoom:1;}
    
    .sec1{background: #f2f2f2;}
    .main{max-width:1200px; margin:0 auto; padding:40px 0;}
    .title{font-size:24px; margin-bottom: 1em; text-align: center;}
    .img-count,.img-count img{position:relative;}
    .img-count-in{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;height:100%; *height:100%;}
    
    .w-newsList1{position: relative;}
    .w-newsList1 a{ display: block; text-decoration: none; color: #333;}
    .w-newsList1 .news-item{ position:relative;}
    .w-newsList1 .news-imgbox{ width:58%;}
    .w-newsList1 .news-imgbox img{ transition:transform 3.5s; -webkit-transition:transform 3.5s;transform:scale(1.1); -webkit-transform:scale(1.1);}
    .w-newsList1 .swiper-slide.swiper-slide-active .news-imgbox img{ transform:scale(1); -webkit-transform:scale(1);}
    .w-newsList1 .aspectRatio{padding-bottom:450px;}
    .w-newsList1 .news-text{ position: absolute; right:0; width:50%; top: 50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); background: #fff; padding: 30px 15px 40px 4%; overflow:hidden;}
    :root .w-newsList1 .news-text{ top:50%;}
    .w-newsList1 .date{ line-height: 1.4; margin-bottom: 0.8em;}
    .w-newsList1 .date .year{ font-size:46px; font-weight: bold; color: #000; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
    .w-newsList1 .date .day_month{font-size:17px; color: #bebebe;}
    .w-newsList1 .news-h{font-size:24px; font-weight: bold; line-height: 1.4; height:2.8em; overflow: hidden; margin-bottom: 0.3em;}
    .w-newsList1 .news-sum{ line-height: 1.8; height:3.5em; overflow: hidden; color:#aaa;}
    .w-newsList1 .more{margin-top:20px; width: 45px; height: 24px; float: right; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAABIUlEQVQ4jb3VMUscQRQH8J+yNgaLFAoPJSBnKaTRUhDBRoiVpBG09mMIljY2geuCIH4GG7FKE7BRSxGPyCtstLJQxGYPTr1D3LvNHxb2McP7McPO7FCz2dRPMhNExDec4gormXnbbf5wX9rrjOEr5nAcEeO1gpl5gQ08Y7YXOsgVysyDLuhEbWAP9E9ETNUGdqBreEQDJ220wBfMYKhK84joNXSFHWx3oIsFzjBdBftkGjgaxsN/wNoZLfAdkypu6QdZxV75foPlAk+4rtqxfdO8TUT8xG5ZXmIpM1u1fKURsY5DjJTYYma2qOFYRMQm9sve51jIzH/t8YGCEbGF3x3YUr7Z84.........完整代码请登录后点击上方下载按钮下载查看