列轮播滑块

时间：2018-03-26 09:30:58

标签： javascript html css slider

我创建了一个三列滑块，似乎在 Brackets 等程序中运行良好。

当我尝试在wordpress中使用slider时，它似乎无法正常运行。我在代码中做错了什么不能在我的网站上运行吗？

这是我尝试将其加入的页面：click here

＆＃13;
＆＃13; 
   $(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));
                    }
                });
            });
＆＃13; 
       .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%;
       }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我还在包括here的笔上运行了代码，它看起来工作得很好，我的猜测是它可能与我实现的方式有关。现场;我不太确定。

2 个答案:

答案 0 :(得分：0)

你是否在页面上做了这个？如果是这样，你必须复制所有这些代码并粘贴在代码块上。 检查控制台以获取更多详细信息并分享

答案 1 :(得分：0)

这就是方式，它适用于我的worppress默认主题

   <!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>
相关问题
最新问题