列旋转木马滑块
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了列旋转木马滑块相关的知识，希望对你有一定的参考价值。
我创建了一个三列滑块，似乎在Brackets等程序中运行良好。
当我尝试在wordpress中使用slider时，它似乎不起作用。我在代码中做错了什么不能在我的网站上运行？
这是我试图将其包含在的页面：click here
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 0
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
}); .container-fluid {
width: 50%;
padding-top: 20px;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 100%;
left: 0%;
}
.carousel-inner>.item.next, .carousel-inner>.item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner>.item.prev, .carousel-inner>.item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: transparent!important;
width: 25%;
}<div class="container-fluid">
<div class="row">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/chriss.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/chrism.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/stu.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/gill.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/georgie.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#myCarousel"><img src="http://i.imgur.com/x6xQ8Qp.png"/></a> <a class="right carousel-control" data-slide="next" href="#myCarousel"><img src="http://i.imgur.com/y6eZV5a.png"/></a>
</div>
</div>
</div>
</div>我还在一支包含here的笔上运行代码，它看起来工作得很好，我的猜测是它可能与我在网站上实现的方式有关;我不太确定。
答案
你是否在页面上做了这个？如果是这样，你必须复制所有这些代码并粘贴在代码块上。检查控制台以获取更多详细信息并进行共享
另一答案
这是方式，它适用于我的wordpress默认主题
<!DOCTYPE html>
<html>
<head>
<!-- IF YOUR THEME AND WORDPRESS ALL READY HAVE JSQUERY AND BOOTSTARP DONT ADD THIS IMPORTEM FROMM YOUR ASSESTS-->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- IF YOUR THEME AND WORDPRESS ALL READY HAVE JSQUERY AND BOOTSTARP DONT ADD THIS IMPORTEM FROMM YOUR ASSESTS-->
<style type="text/css">
.container-fluid {
width: 50%;
padding-top: 20px;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 100%;
left: 0%;
}
.carousel-inner>.item.next, .carousel-inner>.item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner>.item.prev, .carousel-inner>.item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: transparent!important;
width: 25%;
}
</style>
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row">
div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/chriss.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/chrism.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/stu.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/gill.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/georgie.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#myCarousel"><img src="http://i.imgur.com/x6xQ8Qp.png"/></a> <a class="right carousel-control" data-slide="next" href="#myCarousel"><img src="http://i.imgur.com/y6eZV5a.png"/></a>
</div>
</div>
</div>
<
<script type="text/javascript">
$('#myCarousel').carousel({
interval: 0
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
</script>
</body>
</html>
以上是关于列旋转木马滑块的主要内容，如果未能解决你的问题，请参考以下文章