<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>jQuery响应式图文卡片滑块特效 - 站长素材</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel='stylesheet' href='css/swiper.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="background"><img src="img/b.jpg" alt=""></div>
<div class="item-bg"></div>
<div class="news-slider">
<div class="news-slider__wrp swiper-wrapper">
<div class="news-slider__item swiper-slide">
<a href="#" class="news__item">
<div class="news-date"> <span class="news-date__title">24</span> <span class="news-date__txt">May</span> </div>
<div class="news__title">漂亮山水</div>
<p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
<div class="news__img"> <img src="img/1.jpg" alt="news"> </div>
</a>
</div>
<div class="news-slider__item swiper-slide">
<a href="#" class="news__item">
<div class="news-date"> <span class="news-date__title">25</span> <span class="news-date__txt">May</span> </div>
<div class="news__title">旅游景点</div>
<p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
<div class="news__img"> <img src="img/2.jpg" alt="news"> </div>
</a>
</div>
<div class="news-slider__item swiper-slide">
<a href="#" class="news__item">
<div class="news-date"> <span class="news-date__title">26</span> <span class="news-date__txt">May</span> </div>
<div class="news__title">景区打卡</div>
<p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
<div class="news__img"> <img src="img/3.jpg" alt="news"> </div>
</a>
</div>
<div class="news-slider__item swiper-slide">
<a href="#" class="news__item">
<div class="news-date"> <span class="news-date__title">27</span> <span class="news-date__txt">May</span> </div>
<div class="news__title">城市美景</div>
<p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
<div class="news__img"> <img src="img/4.jpg" alt="news"> </div>
</a>
</div>
<div class="news-slider__item swiper-slide">
<a href="#" class="news__item">
<div class="news-date"> <span class="news-date__title">28</span> <span class="news-date__txt">May</span> </div>
<div class="news__title">旅游景点</div>
<p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
<div class="news__img"> <img src="img/5.jpg" alt="news"> </div>
</a>
</div>
<div class="news-slider__item swiper-slide">
<a href="#" class="news__item">
<div class="news-date"> <span class="news-date__title">29</span> <span class="news-date__txt">May</span> </div>
<div class="news__title">景区打卡</div>
<p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
<div class="news__img"> <img src="img/6.jpg" alt="news"> </div>
</a>
</div>
</div>
<div class="news-slider__ctr">
<div class="news-slider__arrows">
<button class="news-slider__arrow news-slider-prev">
<span class="icon-font">
<svg class="icon icon-arrow-left">
<use xlink:href="#icon-arrow-left"></use>
</svg>
</span>
</button>
<button class="news-slider__arrow news-slider-next">
<span class="icon-font">
<svg class="icon icon-arrow-right">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</span>
</button>
</div>
<div class="news-slider__pagination"></div>
</div>
</div>
</div>
<svg hidden="hidden">
<defs>
<symbol id="icon-arrow-left" viewBox="0 0 32 32">
<title>arrow-left</title>
<path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
</symbol>
<symbol id="icon-arrow-right" viewBox="0 0 32 32">
<title>arrow-right</title>
<path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
</symbol>
</defs>
</svg>
<script src="js/jquery.min.js"></script>
<script src='js/swiper.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
jQuery响应式图文卡片滑块特效.zip （13个子文件） 
jiaoben8577 js 
swiper.min.js 118KB jquery.min.js 85KB script.js 4KB img 
2.jpg 90KB b.jpg 89KB 6.jpg 46KB 1.jpg 27KB 5.jpg 67KB 3.jpg 26KB 4.jpg 26KB css style.css 5KB swiper.min.css 19KB
index.html 5KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5850
最新资源
- 农业大数据平台源码
- 基于python的农业疾病预警系统新版源码+说明
- mockito教程-自整理
- 农业生产管理系统的设计源码+数据库
- 农业水价综合改革平台新版源码+说明
- 可持续性再生能源消纳量（2015-2022年）.zip
- 省级-新质生产力数据（2010-2022年）.zip
- 省级生活垃圾无害化处理率数据.zip
- 人民币汇率相关历史数据（2006-2022年）.zip
- 农产品溯源系统新版源码+说明
- 中介效应模型STATA计算代码（多重中介模型+普通中介效应模型）.zip
- 285个地级市出口产品质量及技术复杂度（2011-2021年）.zip
- 物联网通信协议解析：关键规范、分类与应用场景
- DeepSeek: 高性能多语言代码生成及优化工具，助力高效编程
- 超声影像分割数据集：超声八大组织语义分割数据集（约900张数据和标签）
- dify redis配置
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
