我刚刚开始开发自己的主题，我一直在为我的滑块添加javascript。
我已将滑块添加到索引中。php文件如下：
<div class="carousel">
<div class="carousel__content">
<div class="item">
<p class="title">First</p>
<img src="http://placehold.it/1800x850/70AD96/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Second</p>
<img src="http://placehold.it/1800x850/EA4E23/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Third</p>
<img src="http://placehold.it/1800x850/9BA452/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fourth</p>
<img src="http://placehold.it/1800x850/472D38/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fifth</p>
<img src="http://placehold.it/1800x850/F77C85/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Sixth</p>
<p class="title title--sub">Last Item</p>
<img src="http://placehold.it/1800x850/00FFAE/FFF&text= " alt="">
</div>
</div>
<div class="carousel__nav">
<a href="#" class="nav nav--left">Previous</a>
<a href="#" class="nav nav--right">Next</a>
</div>
然后创建了一个js/滑块js。包含以下内容的js文件：
( function () {
var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;
carouselContent = $(\'.carousel__content\');
carouselIndex = 0;
carouselLength = carouselContent.children().length;
isAnimating = false;
itemWidth = 100 / carouselLength;
firstItem = $(carouselContent.children()[0]);
lastItem = $(carouselContent.children()[carouselLength - 1]);
firstClone = null;
lastClone = null;
carouselContent.css(\'width\', carouselLength * 100 + \'%\');
carouselContent.transition({ x: carouselIndex * -itemWidth + \'%\' }, 0);
$.each(carouselContent.children(), function () {
return $(this).css(\'width\', itemWidth + \'%\');
});
$(\'.nav--left\').on(\'click\', function () {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex--;
if (carouselIndex === -1) {
lastItem.prependTo(carouselContent);
carouselContent.transition({ x: (carouselIndex + 2) * -itemWidth + \'%\' }, 0);
return carouselContent.transition({ x: (carouselIndex + 1) * -itemWidth + \'%\' }, 1000, \'easeInOutExpo\', function () {
carouselIndex = carouselLength - 1;
lastItem.appendTo(carouselContent);
carouselContent.transition({ x: carouselIndex * -itemWidth + \'%\' }, 0);
return isAnimating = false;
});
} else {
return carouselContent.transition({ x: carouselIndex * -itemWidth + \'%\' }, 1000, \'easeInOutExpo\', function () {
return isAnimating = false;
});
}
});
$(\'.nav--right\').on(\'click\', function () {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex++;
return carouselContent.transition({ x: carouselIndex * -itemWidth + \'%\' }, 1000, \'easeInOutExpo\', function () {
isAnimating = false;
if (firstClone) {
carouselIndex = 0;
carouselContent.transition({ x: carouselIndex * -itemWidth + \'%\' }, 0);
firstClone.remove();
firstClone = null;
carouselLength = carouselContent.children().length;
itemWidth = 100 / carouselLength;
carouselContent.css(\'width\', carouselLength * 100 + \'%\');
$.each(carouselContent.children(), function () {
return $(this).css(\'width\', itemWidth + \'%\');
});
return;
}
if (carouselIndex === carouselLength - 1) {
carouselLength++;
itemWidth = 100 / carouselLength;
firstClone = firstItem.clone();
firstClone.addClass(\'clone\');
firstClone.appendTo(carouselContent);
carouselContent.css(\'width\', carouselLength * 100 + \'%\');
$.each(carouselContent.children(), function () {
return $(this).css(\'width\', itemWidth + \'%\');
});
return carouselContent.transition({ x: carouselIndex * -itemWidth + \'%\' }, 0);
}
});
});
}。调用（this））；
然后将其链接到我的函数。php具有以下功能：
function skinsave_2016_slider() {
wp_enqueue_script(\'skinsave_2016-slider-js\', content_url(\'/js/slider-js.js\'), array(), null, true);
}
add_action(\'wp_head\', \'skinsave_2016_slider\');
我还在标题中的标记之间添加了以下内容。php文件：
<script type="text/javascript" src="<?php bloginfo(\'skinsave_2016\'); ?>/js/slider-js.js"></script>
和css：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
font-family: "europa-1","europa-2", sans-serif;
overflow: scroll;
}
.wrapper {
max-width: 940px;
width: 100%;
position: relative;
overflow: scroll;
margin: 0 auto;
}
/**
* Use this wrapper only for demo purposes
* So you can show the items outside the wrapper
*/
}
.wrapper--demo:before {
left: -800px;
}
.carousel {
width: 100%;
position: relative;
}
.carousel .carousel__content {
width: auto;
position: relative;
overflow: scroll;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0, 0, 0);
}
.carousel .carousel__content .item {
display: block;
float: left;
width: 100%;
position: relative;
}
.carousel .carousel__content .item .title {
position: absolute;
top: 50%;
left: 0;
margin: -33px 0 0 0;
padding: 0;
font-size: 3rem;
width: 100%;
text-align: center;
letter-spacing: .3rem;
color: #FFF;
}
.carousel .carousel__content .item .title--sub {
margin-top: 20px;
font-size: 1.2em;
opacity: .5;
}
.carousel .carousel__content .item img {
width: 100%;
max-width: 100%;
display: block;
}
.carousel .carousel__nav {
position: absolute;
width: 100%;
top: 50%;
margin-top: -17px;
left: 0;
z-index: 1;
}
.carousel .carousel__nav .nav {
position: absolute;
top: 0;
color: #000;
background: #FFF;
padding: 8px 12px;
font-weight: bold;
text-decoration: none;
font-size: .8rem;
transition: padding .25s ease;
}
.carousel .carousel__nav .nav:hover {
padding: 8px 20px;
}
.carousel .carousel__nav .nav--left {
border-radius: 0px 3px 3px 0px;
}
.carousel .carousel__nav .nav--right {
right: 0;
border-radius: 3px 0px 0px 3px;
}
滑块加载良好，但不显示为滑块，而是块列表。我觉得问题出在javascript的实现上。有人能帮忙吗？
