Question

我在我的网站上使用bootstrap并且还使用轮播滑块并且它工作正常但问题是当滑块从右向左滑动图像时它将在第一张图像完全向左到达时拍摄第二张图像，1ms或2ms第二，它将显示幻灯片之间的空白区域。因此，我不想要那个空白区域，我希望当滑块从右向左滑动时，第二个图像必须立即出现在第一个图像之后。抱歉我的英文不好，我的滑块看起来像

你可以看到那里的空白区域，所以我想要的是我的下一张图片应该出现在上一张图片之后，并且我在carousel.js中遇到问题而且它是。

/* ========================================================================
* Bootstrap: carousel.js v3.0.0
* http://twbs.github.com/bootstrap/javascript.html#carousel
* ========================================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================================     */


+function ($) { "use strict";

// CAROUSEL CLASS DEFINITION
// =========================

var Carousel = function (element, options) {
this.$element    = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options     = options
this.paused      =
this.sliding     =
this.interval    = 
this.$active     =
this.$items      = null

this.options.pause == 'hover' && this.$element
  .on('mouseenter', $.proxy(this.pause, this))
  .on('mouseleave', $.proxy(this.cycle, this))
}

Carousel.DEFAULTS = {
interval: 5000
, pause: 'hover'
, wrap: true
}

Carousel.prototype.cycle =  function (e) {
e || (this.paused = false)

this.interval && clearInterval(this.interval)

this.options.interval
  && !this.paused
  && (this.interval = setInterval($.proxy(this.next, this),     this.options.interval))

return this
}

Carousel.prototype.getActiveIndex = function () {
this.$active = this.$element.find('.item.active')
this.$items  = this.$active.parent().children()

return this.$items.index(this.$active)
}

Carousel.prototype.to = function (pos) {
var that        = this
var activeIndex = this.getActiveIndex()

if (pos > (this.$items.length - 1) || pos < 0) return

if (this.sliding)       return this.$element.one('slid', function () { that.to(pos) })
if (activeIndex == pos) return this.pause().cycle()

return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
}

Carousel.prototype.pause = function (e) {
e || (this.paused = true)

if (this.$element.find('.next, .prev').length && $.support.transition.end) {
  this.$element.trigger($.support.transition.end)
  this.cycle(true)
}

this.interval = clearInterval(this.interval)

return this
}

Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}

Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev')
}

Carousel.prototype.slide = function (type, next) {
var $active   = this.$element.find('.item.active')
var $next     = next || $active[type]()
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var fallback  = type == 'next' ? 'first' : 'last'
var that      = this

if (!$next.length) {
  if (!this.options.wrap) return
  $next = this.$element.find('.item')[fallback]()
}

this.sliding = true

isCycling && this.pause()

var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })

if ($next.hasClass('active')) return

if (this.$indicators.length) {
  this.$indicators.find('.active').removeClass('active')
  this.$element.one('slid', function () {
    var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
    $nextIndicator && $nextIndicator.addClass('active')
  })
}

if ($.support.transition && this.$element.hasClass('slide')) {
  this.$element.trigger(e)
  if (e.isDefaultPrevented()) return
  $next.addClass(type)
  $next[0].offsetWidth // force reflow
  $active.addClass(direction)
  $next.addClass(direction)
  $active
    .one($.support.transition.end, function () {
      $next.removeClass([type, direction].join(' ')).addClass('active')
      $active.removeClass(['active', direction].join(' '))
      that.sliding = false
      setTimeout(function () { that.$element.trigger('slid') }, 0)
    })
    .emulateTransitionEnd(600)
} else if(this.$element.hasClass('slide')) {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $active.animate({left: (direction == 'right' ? '100%' : '-100%')}, 600, function(){
        $active.removeClass('active')
        that.sliding = false
        setTimeout(function () { that.$element.trigger('slid') }, 0)
    })
    $next.addClass(type).css({left: (direction == 'right' ? '-100%' : '100%')}).animate({left: 0}, 600,  function(){
        $next.removeClass(type).addClass('active')
    })
} else {
  this.$element.trigger(e)
  if (e.isDefaultPrevented()) return
  $active.removeClass('active')
  $next.addClass('active')
  this.sliding = false
  this.$element.trigger('slid')
}

isCycling && this.cycle()

return this
}


// CAROUSEL PLUGIN DEFINITION
// ==========================

var old = $.fn.carousel

$.fn.carousel = function (option) {
return this.each(function () {
  var $this   = $(this)
  var data    = $this.data('bs.carousel')
  var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
  var action  = typeof option == 'string' ? option : options.slide

  if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
  if (typeof option == 'number') data.to(option)
  else if (action) data[action]()
  else if (options.interval) data.pause().cycle()
})
}

$.fn.carousel.Constructor = Carousel


// CAROUSEL NO CONFLICT
// ====================

$.fn.carousel.noConflict = function () {
$.fn.carousel = old
return this
}


// CAROUSEL DATA-API
// =================

$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var $this   = $(this), href
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
var options = $.extend({}, $target.data(), $this.data())
var slideIndex = $this.attr('data-slide-to')
if (slideIndex) options.interval = false

$target.carousel(options)

if (slideIndex = $this.attr('data-slide-to')) {
  $target.data('bs.carousel').to(slideIndex)
}

e.preventDefault()
})

$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
  var $carousel = $(this)
  $carousel.carousel($carousel.data())
})
})

}(window.jQuery);

我正在使用bootstrap.css

.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
   -o-transition: .6s ease-in-out left;
      transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
     -o-transition:      -o-transform .6s ease-in-out;
        transition:         transform .6s ease-in-out;

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-perspective: 1000;
        perspective: 1000;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
 position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
filter: alpha(opacity=50);
opacity: .5;
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
 background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
 background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
 background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 background-repeat: repeat-x;
}
.carousel-control.right {
 right: 0;
 left: auto;
 background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
 background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
 background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
 background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x;
}
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
filter: alpha(opacity=90);
outline: 0;
opacity: .9;
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
font-family: serif;
line-height: 1;
}
.carousel {
.item {
left: 0 !important;
.transition(opacity .4s); //adjust timing here
}
.carousel-control {
background-image: none; // remove background gradients on controls
}
// Fade controls with items
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
 display: inline-block;
 width: 10px;
 height: 10px;
 margin: 1px;
 text-indent: -999px;
 cursor: pointer;
 background-color: #000 \9;
 background-color: rgba(0, 0, 0, 0);
 border: 1px solid #fff;
 border-radius: 10px;
 }
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.carousel-caption .btn {
text-shadow: none;
}

我的html是。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="images/slide/im1.jpg" alt="im1" style="width:100%;">
  </div>

  <div class="item">
    <img src="images/slide/im2.jpg" alt="im2" style="width:100%;">
  </div>

  <div class="item">
    <img src="images/slide/im3.jpg" alt="im3" style="width:100%;">
  </div>

  <div class="item">
    <img src="images/slide/im4.jpg" alt="im4" style="width:100%;">
  </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

检查以下工作html代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div data-example-id="simple-carousel" class="bs-example">
  <div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
    <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
      <li data-slide-to="1" data-target="#carousel-example-generic"></li>
      <li data-slide-to="2" data-target="#carousel-example-generic"></li>
    </ol>
    <div role="listbox" class="carousel-inner">
      <div class="item active">
        <img alt="First slide [900x500]" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1MDcwYzAxMDJhIHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTUwNzBjMDEwMmEiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMzA4LjMwMDAwMzA1MTc1NzgiIHk9IjI3MC40Ij5GaXJzdCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
        data-holder-rendered="true">
      </div>
      <div class="item">
        <img alt="Second slide [900x500]" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTA3MGMwMTkxZiB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjQ1cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MDcwYzAxOTFmIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjxnPjx0ZXh0IHg9IjI2NC45NTgzMjgyNDcwNzAzIiB5PSIyNzAuNCI+U2Vjb25kIHNsaWRlPC90ZXh0PjwvZz48L2c+PC9zdmc+"
        data-holder-rendered="true">
      </div>
      <div class="item">
        <img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1MDcwYzAzNjUzIHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTUwNzBjMDM2NTMiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyNDk5Njk0ODI0MjIiIHk9IjI3MC40Ij5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
        data-holder-rendered="true">
      </div>
    </div>
    <a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

bootstrap carousel滑块滑动不起作用

1 个答案: