bootstrap carousel slider slide not working

Question

i am using bootstrap in my site and also use carousel slider and it's working fine but problem is when slider slide image right to left it will take second image when first image reach completely to left so,1ms or 2ms second it will display white space between slide. so,i don't want that white space and i want that when slider slide from right to left second image must immediately appear after first one. sorry for my bad english and my slider looks like

you can see white space there so i want is my next image should appear after previous image and i gess problem in carousel.js and it is.

/* ========================================================================
* 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);

and i am using 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;
}

and my html is.

GunvantParmar · Accepted Answer

Check below working html code

bootstrap carousel slider slide not working

Answers (1)

Related Questions