文章内容
分享一个基于swiper制作的可拖拽滑动企业历史横向时间轴效果, 代码如下：
html代码
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<div class="jqfree">
<div class="container">
<div class="jqfree_all">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="jqfree_xx">
<div class="jqfree_num">
<span>2002</span>
</div>
<div class="jqfree_nxx">
<a href="javascript:;">
<h4>
标题</h4>
<div class="jqfree_nxx_info">
<p>
内容</p>
</div>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="jqfree_xx">
<div class="jqfree_num">
<span>2003</span>
</div>
<div class="jqfree_nxx">
<a href="javascript:;">
<h4>
标题</h4>
<div class="jqfree_nxx_info">
<p>
内容</p>
</div>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="jqfree_xx">
<div class="jqfree_num">
<span>2020</span>
</div>
<div class="jqfree_nxx">
<a href="javascript:;">
<h4>
标题</h4>
<div class="jqfree_nxx_info">
<p>
内容</p>
</div>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="jqfree_xx">
<div class="jqfree_num">
<span>2024</span>
</div>
<div class="jqfree_nxx">
<a href="javascript:;">
<h4>
标题</h4>
<div class="jqfree_nxx_info">
<p>
内容</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-button-next">
</div>
<div class="swiper-button-prev">
</div>
</div>
</div>
</div>
</div>
<script>
var swiper = new Swiper('.jqfree_all .swiper-container', {
navigation: {
nextEl: ".jqfree_all .swiper-button-next",
prevEl: ".jqfree_all .swiper-button-prev",
},
slidesPerView:'auto',
paginationClickable: true,
spaceBetween:70,
loop: true,
centeredSlides: true,
});
</script>index.css代码
<style>
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
a
{
color: #333;
text-decoration: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-mos-transition: all 0.3s;
}
h1, h2, h3, h4, h5, h6
{
margin: 0;
font-weight: normal;
}
.clear
{
clear: both;
}
img
{
border: 0;
vertical-align: middle;
}
.container
{
margin: 0px auto;
width: 1440px;
}
.jqfree
{
background: #ededed;
height: auto;
overflow: hidden;
padding: 64px 0px 98px;
}
.jqfree_all
{
width: 100%;
height: auto;
overflow: hidden;
margin-top: 68px;
position: relative;
}
.jqfree_all:after
{
content: "";
width: 100%;
height: 1px;
background: #d1d1d1;
position: absolute;
top: 85px;
left: 0;
}
.jqfree_all .swiper-slide
{
width: 68%;
}
.jqfree_xx
{
width: 100%;
height: auto;
overflow: hidden;
}
.jqfree_num
{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
padding-bottom: 35px;
}
.jqfree_num span
{
color: #d1d1d1;
font-size: 30px;
font-weight: bold;
height: 65px;
display: flex;
align-items: flex-end;
}
.jqfree_num:after
{
content: "";
width: 28px;
height: 28px;
background: url(../images/dian.png) no-repeat center;
position: absolute;
bottom: 0;
left: 0;
}
.jqfree_nxx
{
width: 100%;
height: auto;
overflow: hidden;
display: none;
}
.jqfree_nxx h4
{
color: #000000;
font-size: 34px;
margin: 20px 0 15px;
}
.jqfree_nxx_info p
{
color: #333333;
font-size: 16px;
line-height: 30px;
}
.jqfree_nxx_info
{
width: 100%;
height: auto;
overflow: hidden;
}
.jqfree_all .swiper-slide-active .jqfree_nxx
{
display: block;
}
.jqfree_all .swiper-slide-active .jqfree_num:after
{
background: url(../images/act_dian.png) no-repeat center;
}
.jqfree_all .swiper-slide-active .jqfree_num span
{
color: #000000;
}
.jqfree_all .swiper-button-next, .jqfree_all .swiper-button-prev
{
width: 58px;
height: 58px;
top: auto;
bottom: 0;
margin-top: 0;
}
.jqfree_all .swiper-button-next
{
background: url(../images/ar_right.png) no-repeat center;
right: 75%;
}
.jqfree_all .swiper-button-prev
{
background: url(../images/ar_left.png) no-repeat center;
left: auto;
left: 15%;
}
.jqfree_all .swiper-button-prev:after, .jqfree_all .swiper-container-rtl .swiper-button-next:after
{
content: "";
}
.jqfree_all .swiper-button-next:after, .jqfree_all .swiper-container-rtl .swiper-button-prev:after
{
content: "";
}
.jqfree_all .swiper-container
{
padding-bottom: 100px;
}
.jqfree_all .swiper-slide-prev
{
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.jqfree_all .swiper-slide-prev .jqfree_xx
{
width: 16%;
}
</style>在线演示：演示
