i'm experiencing weird things carousel. have 12 slides, 11 of show fine, last 1 wraps around , shows on other slides. have code in jsfiddle: https://jsfiddle.net/ewillstudios/rzmt1bey/
i don't know if it's js problem or css problem.
thank help!
$(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>
firstly, last slide jumps under first 1 - see here . means css not perfect. let's see: want 12 slides in percentage - give them width instead of 9.09% math 100%/12 = 8.33%, stand in 1 row
.slides > li {width:8.33%} second, omit 'wrap: "last" in plugin options since don't effect.
Comments
Post a Comment