特效描述：利用js实现 swiper 宽屏滑块 时间线 代码，利用js实现swiper宽屏滑块时间线代码

代码结构

1. 引入CSS

<link rel=’stylesheet’ href=’https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800′>

<link rel=’stylesheet’ href=’css/swiper.min.css’>

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src=’js/swiper.min.js’></script>

<script src="js/script.js"></script>

3. HTML代码

<div class="container">
<div class="timeline">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url(img/1.jpg);" data-year="2011">
<div class="swiper-slide-content"><span class="timeline-year">2011</span>
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(img/2.jpg);" data-year="2012">
<div class="swiper-slide-content"><span class="timeline-year">2012</span>
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(img/3.jpg);" data-year="2013">
<div class="swiper-slide-content"><span class="timeline-year">2013</span>
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(img/4.jpg);" data-year="2014">
<div class="swiper-slide-content"><span class="timeline-year">2014</span>
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(img/5.jpg);" data-year="2015">
<div class="swiper-slide-content"><span class="timeline-year">2015</span>
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(img/6.jpg);" data-year="2016">
<div class="swiper-slide-content"><span class="timeline-year">2016</span>
<h4 class="timeline-title">Our nice super title</h4>
<p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="swiper-button-pv"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei’;">
</div>

下载地址

立即下载

1.《swiper宽屏滑块时间线代码》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《swiper宽屏滑块时间线代码》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/code/347.html