这是一个非常华丽和流畅的旋转木马滑块，在css3和jquery的帮助下创建了css3和jquery，它们既可以在css中使用，也可以在scss中使用。
您可以将它与您的网站一起使用，以使其过渡和动画效果更加有效和流畅。
特征：
响应/固定和流体宽度。
支持图像和HTML内容。
完全填充css3过渡，动画和变换效果。
支持所有最新的浏览器。
您也可以将它用于动态内容。
灵活的图像滑块以及内容滑块。
无限的幻灯片支持
在这里，您将获得一个非常互动的用户界面以及非常流畅和引人注目的功能。
如何使用它：
请按照这些简单的步骤在您的网站上使用这个漂亮的滑块
1：在文档的底部包含jQuery javascipt库和索引javascript carousel插件。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/index.js"></script>
index.js
$(document).on('ready', function() {
var slide = $('.slider-single');
var slideTotal = slide.length - 1;
var slideCurrent = -1;
function slideInitial() {
slide.addClass('proactivede');
setTimeout(function() {
slideRight();
}, 500);
}
function slideRight() {
if (slideCurrent < slideTotal) {
slideCurrent++;
} else {
slideCurrent = 0;
}
if (slideCurrent > 0) {
var preactiveSlide = slide.eq(slideCurrent - 1);
} else {
var preactiveSlide = slide.eq(slideTotal);
}
var activeSlide = slide.eq(slideCurrent);
if (slideCurrent < slideTotal) {
var proactiveSlide = slide.eq(slideCurrent + 1);
} else {
var proactiveSlide = slide.eq(0);
}
slide.each(function() {
var thisSlide = $(this);
if (thisSlide.hasClass('preactivede')) {
thisSlide.removeClass('preactivede preactive active proactive').addClass('proactivede');
}
if (thisSlide.hasClass('preactive')) {
thisSlide.removeClass('preactive active proactive proactivede').addClass('preactivede');
}
});
preactiveSlide.removeClass('preactivede active proactive proactivede').addClass('preactive');
activeSlide.removeClass('preactivede preactive proactive proactivede').addClass('active');
proactiveSlide.removeClass('preactivede preactive active proactivede').addClass('proactive');
}
function slideLeft() {
if (slideCurrent > 0) {
slideCurrent--;
} else {
slideCurrent = slideTotal;
}
if (slideCurrent < slideTotal) {
var proactiveSlide = slide.eq(slideCurrent + 1);
} else {
var proactiveSlide = slide.eq(0);
}
var activeSlide = slide.eq(slideCurrent);
if (slideCurrent > 0) {
var preactiveSlide = slide.eq(slideCurrent - 1);
} else {
var preactiveSlide = slide.eq(slideTotal);
}
slide.each(function() {
var thisSlide = $(this);
if (thisSlide.hasClass('proactivede')) {
thisSlide.removeClass('preactive active proactive proactivede').addClass('preactivede');
}
if (thisSlide.hasClass('proactive')) {
thisSlide.removeClass('preactivede preactive active proactive').addClass('proactivede');
}
});
preactiveSlide.removeClass('preactivede active proactive proactivede').addClass('preactive');
activeSlide.removeClass('preactivede preactive proactive proactivede').addClass('active');
proactiveSlide.removeClass('preactivede preactive active proactivede').addClass('proactive');
}
var left = $('.slider-left');
var right = $('.slider-right');
left.on('click', function() {
slideLeft();
});
right.on('click', function() {
slideRight();
});
slideInitial();
});
2：包含css文件样式表，以实现所需的UI布局和流畅的动画。
注意：style.css文件是必需的
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
@keyframes heartbeat {
0% {
transform: scale(0);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.slider-container {
position: relative;
top: 0%;
width: 100%;
height: 700px;
margin: 0px 0 0 0px;
overflow:hidden;
}
.slider-container .slider-content {
position: relative;
left: 50%;
top: 40%;
width: 70%;
height: 60%;
transform: translate(-50%, -55%);
}
.slider-container .slider-content .slider-single {
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: z-index 0ms 250ms;
}
.slider-container .slider-content .slider-single .slider-single-image {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
transform: scale(0);
opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-download {
position: absolute;
display: block;
left:20px;
bottom: 22px;
padding: 10px;
color: #333333;
background-color: #fdc84b;
font-size: 18px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
border-radius: 5px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-download:hover, .slider-container .slider-content .slider-single .slider-single-download:focus {
outline: none;
text-decoration: none;
}
.slider-container .slider-content .slider-single .slider-single-title {
display: block;
float: left;
margin: 16px 0 0 20px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #ffffff;
transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-likes {
display: block;
float: right;
margin: 16px 20px 0 0;
transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-likes i {
font-size: 20px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
color: #ff6060;
transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
transform: scale(0);
}
.slider-container .slider-content .slider-single .slider-single-likes p {
display: inline-block;
vertical-align: middle;
margin: 0;
color: #787878;
}
.slider-container .slider-content .slider-single .slider-single-likes:hover, .slider-container .slider-content .slider-single .slider-single-likes:focus {
outline: none;
text-decoration: none;
}
.slider-container .slider-content .slider-single.preactivede .slider-single-image {
transform: translateX(-50%) scale(0);
}
.slider-container .slider-content .slider-single.preactive {
z-index: 1;
}
.slider-container .slider-content .slider-single.preactive .slider-single-image {
opacity: .3;
transform: translateX(-25%) scale(0.8);
}
.slider-container .slider-content .slider-single.preactive .slider-single-download {
transform: translateX(-150px);
}
.slider-container .slider-content .slider-single.preactive .slider-single-title {
transform: translateX(-150px);
}
.slider-container .slider-content .slider-single.preactive .slider-single-likes {
transform: translateX(-150px);
}
.slider-container .slider-content .slider-single.proactive {
z-index: 1;
}
.slider-container .slider-content .slider-single.proactive .slider-single-image {
opacity: .3;
transform: translateX(25%) scale(0.8);
}
.slider-container .slider-content .slider-single.proactive .slider-single-download {
transform: translateX(150px);
}
.slider-container .slider-content .slider-single.proactive .slider-single-title {
transform: translateX(150px);
}
.slider-container .slider-content .slider-single.proactive .slider-single-likes {
transform: translateX(150px);
}
.slider-container .slider-content .slider-single.proactivede .slider-single-image {
transform: translateX(50%) scale(0);
}
.slider-container .slider-content .slider-single.active {
z-index: 2;
}
.slider-container .slider-content .slider-single.active .slider-single-image {
opacity: 1;
transform: translateX(0%) scale(1);
}
.slider-container .slider-content .slider-single.active .slider-single-download {
opacity: 1;
transition-delay: 100ms;
transform: translateX(0px);
}
.slider-container .slider-content .slider-single.active .slider-single-title {
opacity: 1;
transition-delay: 200ms;
transform: translateX(0px);
}
.slider-container .slider-content .slider-single.active .slider-single-likes {
opacity: 1;
transition-delay: 300ms;
transform: translateX(0px);
}
.slider-container .slider-content .slider-single.active .slider-single-likes i {
animation-name: heartbeat;
animation-duration: 500ms;
animation-delay: 900ms;
animation-interation: 1;
animation-fill-mode: forwards;
}
.slider-container .slider-left {
position: absolute;
z-index: 3;
display: block;
right: 85%;
top: 36%;
color: #ffffff;
transform: translateY(-50%);
padding: 20px 15px;
border-top: 2px solid #fdc84b;
border-right: 2px solid #fdc84b;
border-bottom: 2px solid #fdc84b;
border-left: 2px solid #fdc84b;
margin-right: -2px;
}
.slider-container .slider-right {
position: absolute;
z-index: 3;
display: block;
left: 85%;
top: 36%;
color: #ffffff;
transform: translateY(-50%);
padding: 20px 15px;
border-top: 2px solid #fdc84b;
border-right: 2px solid #fdc84b;
border-bottom: 2px solid #fdc84b;
border-left: 2px solid #fdc84b;
margin-left: -2px;
}
.menu-left{width:84%;display:inline-block;float:left;}
.menu-left h2{font-size:20px;color:#ff7624;font-weight:400;}
.menu-left p{font-size:15px;color:#424c5f;line-height:1.6em;}
.menu-right{width:16%;display:inline-block;float:left;}
3：将图像和内容包装在DIV容器中。
<div class="slider-container">
<div class="slider-content">
<div class="slider-single"> <img class="slider-single-image" src="http://eduardoallegrini.com/projects/codepen/3d-smooth-carousel/main.jpg" alt="6" /> <a class="slider-single-download" href="javascript:void(0);">Download <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">
<div class="menu-left">
<h2>Fancy jquery and css slider</h2>
<p>This Delightfull sweet, firm and creamy dish is packed with the goodness of Banana, Yoghurt and honey. Banana's are rich source of potassium, thus helps in maintaining normal blood pressure and heart function. Having a banana everyday may also prevent high blood pressure. Due to their antacid effects, bananas are also considered as a soothing relief against stomach ulcers. Banana combined with Yoghurt and Honey helps improve digestive system and Boost immunity.</p>
</div>
<div class="menu-right"> <a class="slider-single-likes" href="javascript:void(0);"> <i class="fa fa-heart"></i>
<p>1,247</p>
</a> </div>
</h1>
</div>
<div class="slider-single"> <img class="slider-single-image" src="http://eduardoallegrini.com/projects/codepen/3d-smooth-carousel/main.jpg" alt="6" /> <a class="slider-single-download" href="javascript:void(0);">Download <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">
<div class="menu-left">
<h2>Beautiful animated slider using jquery and css</h2>
<p>This Delightfull sweet, firm and creamy dish is packed with the goodness of Banana, Yoghurt and honey. Banana's are rich source of potassium, thus helps in maintaining normal blood pressure and heart function. Having a banana everyday may also prevent high blood pressure. Due to their antacid effects, bananas are also considered as a soothing relief against stomach ulcers. Banana combined with Yoghurt and Honey helps improve digestive system and Boost immunity.</p>
</div>
<div class="menu-right"> <a class="slider-single-likes" href="javascript:void(0);"> <i class="fa fa-heart"></i>
<p>1,247</p>
</a> </div>
</h1>
</div>
<div class="slider-single"> <img class="slider-single-image" src="http://eduardoallegrini.com/projects/codepen/3d-smooth-carousel/main.jpg" alt="6" /> <a class="slider-single-download" href="javascript:void(0);">Download <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">
<div class="menu-left">
<h2>jquery content slider with 3D animation</h2>
<p>This Delightfull sweet, firm and creamy dish is packed with the goodness of Banana, Yoghurt and honey. Banana's are rich source of potassium, thus helps in maintaining normal blood pressure and heart function. Having a banana everyday may also prevent high blood pressure. Due to their antacid effects, bananas are also considered as a soothing relief against stomach ulcers. Banana combined with Yoghurt and Honey helps improve digestive system and Boost immunity.</p>
</div>
<div class="menu-right"> <a class="slider-single-likes" href="javascript:void(0);"> <i class="fa fa-heart"></i>
<p>1,247</p>
</a> </div>
</h1>
</div>
</div>
<a class="slider-left" href="javascript:void(0);"><i class="fa fa-arrow-left"></i></a> <a class="slider-right" href="javascript:void(0);"><i class="fa fa-arrow-right"></i></a> </div>
