0
Ich erlebe einige seltsame Dinge mit diesem Karussell. Ich habe 12 Dias, von denen 11 vollkommen in Ordnung sind, aber das letzte wird umgeblättert und auf anderen Dias gezeigt. Ich habe den Code in einem JSFiddle: https://jsfiddle.net/ewillstudios/rzmt1bey/JCarousel: Alle Folien nach 11 Wraps um
Ich weiß nicht wirklich, ob es ein JS-Problem oder ein CSS-Problem ist.
Vielen Dank für Ihre Hilfe!
$(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>
Vielen Dank für die Antwort. Ich dachte, es wäre etwas Einfaches. Ich habe einfach nicht gedacht, dass ich Mathe gemacht habe, für 11 statt 12 Folien. Danke. – sayhelloelijah