0
我遇到了这个旋转木马一些奇怪的事情。我有12张幻灯片，其中11张显示完美，但最后一张幻灯片包含并显示在其他幻灯片上。我有一个JSFiddle代码：https://jsfiddle.net/ewillstudios/rzmt1bey/JCarousel：所有幻灯片后11环绕
我真的不知道它是JS问题还是CSS问题。
谢谢你的帮助！ see here -
$(function() {
$('.jcarousel').jcarousel({
wrap: "last",
center: true
});
https: //jsfiddle.net/#
$('body').on('click', '.jcarousel-next', function(e) {
e.stopPropagation();
$('.jcarousel').jcarousel('scroll', '+=1');
});
$('body').on('click', '.jcarousel-prev', function(e) {
e.stopPropagation();
$('.jcarousel').jcarousel('scroll', '-=1');
});
});.wrapper {
width: 800px;
}
#carousel {
padding: 0;
}
.jcarousel {
width: 100%;
position: relative;
overflow: hidden;
margin-top: 50px;
}
.slides {
width: 1110%;
list-style: none;
position: relative;
}
.slides > li {
width: 9.09%;
float: left;
position: relative;
}
.slides:after {
content: '';
display: table;
clear: both;
}
.jcarousel .col-6-12:first-child {
position: relative;
}
.cover .col-6-12:nth-child(2) {
padding: 26px 30px 0 30px;
text-align: center;
}
.cover .col-6-12:nth-child(2) h2 {
font-size: 26px;
margin-bottom: 74px;
}
.jcarousel h3 {
font-size: 20px;
}
.jcarousel p {
font-size: 13px;
margin-bottom: 40px;
}
img.slider-icon.center-block {
margin-bottom: 53px;
}
.jcarousel p.indicator {
text-align: center;
font-size: 14px;
font-weight: 700;
position: relative;
top: 60px;
color: #D3D3D3;
}
.jcarousel p.indicator span {
color: #A33631;
}
.jcarousel li:nth-child(4) .col-6-12:nth-child(2) p.indicator {
top: 40px;
}
.jcarousel .slider-control {
position: absolute;
top: 35%;
z-index: 100;
}
.jcarousel .slider-control.right {
right: 0;
}
.jcarousel .slider-control.left {
left: 0;
}
.jcarousel .slider-control.right img {
transform: rotate(180deg);
}
a.slider-control > img {
cursor: pointer;
}
.jcarousel .col-6-12:nth-child(2) {
padding: 26px 30px 0 30px;
}
.row:after {
content: '';
display: table;
clear: both;
}
.center {
margin: 0 auto;
}
.center-block {
display: block;
margin: 0 auto;
}
.grid {
box-sizing: border-box;
float: left;
}
.col-3-12:last-of-type,
.col-4-12:last-of-type {
margin-right: 0;
}
.col-3-12 {
width: 25%;
padding: 30px;
}
.col-4-12 {
width: 33.33%;
padding: 30px;
}
.col-6-12 {
width: 50%;
padding: 30px
}
.col-7-12 {
width: 58.33%;
padding: 30px;
}
.col-12-12 {
width: 100%;
padding: 30px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet"> <style> body {
font-family: 'Open Sans', Helvetica, sans-serif;
}
.right {
float: right;
}
.left {
float: left;
}
.text-center {
text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
.col-3-12 h2 {
margin: 31px 0 25px 0;
font-size: 15px;
}
.col-3-12 p {
margin-top: 20px;
line-height: 1.3;
}
h1 {
font-size: 24px;
}
p {
font-size: 10px;
}
.btn {
padding: 12px 50px;
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
.btn-primary {
background-color: #A33631;
color: #fff;
}
.btn-lg {
text-transform: uppercase;
}
.btn-secondary {
background-color: #000;
color: #fff;
}
.img-responsive {
max-width: 100%;
width: 100%;
}
header {
font-weight: 700;
font-size: x-large;
text-align: center;
}
header img {
margin-bottom: 70px;
}
.row:after {
content: '';
display: table;
clear: both;
}
.center {
margin: 0 auto;
}
.center-block {
display: block;
margin: 0 auto;
}
.grid {
box-sizing: border-box;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.4/jquery.jcarousel.min.js"></script>
<div class="wrapper">
<div class="row col-12-12" id="carousel">
<div class="jcarousel">
<ul class="slides">
<li class="cover">
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h2>Lorem Ipsum</h2>
<a href="" class="btn btn-primary btn-lg jcarousel-next">Begin Slideshow</a>
<p class="indicator">
<span>1</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>2</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>3</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>4</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>5</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>6</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>7</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>8</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>9</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>10</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
<div class="text-center">
<a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
</div>
<p class="indicator">
<span>11</span>/12</p>
</div>
</li>
<li>
<div class="grid col-6-12">
<img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
<a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
</div>
<div class="grid col-6-12">
<h3>Lorem Ipsum.</h3>
<p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
谢谢你的答案。我认为这会很简单。我只是没有想到我做了数学，11个幻灯片，而不是12个。谢谢。 – sayhelloelijah