Question

我发现这个带有自动旋转木马滑块的示例，其动画字幕从图像底部向上滑动，半透明背景。

这是我找到的原始教程的链接。 http://noreiller.github.io/bootstrap-modal-carousel/carousel-fit.html

链接到我的演示http://bsdev.aowebsite.com/test.html

一些事情......

这个插件似乎是建立在Bootstrap2上的。任何人都可以帮我转换为Bootstrap3吗？
除滑块外，如何停止移动所有内容？如果您查看我的演示，当幻灯片转换时，下一个/上一个箭头会上下移动，并且标题会在初始加载之前执行一些奇怪的操作，例如在图像下方开始，然后淡出到页面的左下角。 / p>

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Register as an anonymous AMD module:
        define([
            'jquery',
            'bootstrap'
        ], factory);
    } else {
        // Browser globals:
        factory(
            window.jQuery
        );
    }
}(function ($) {
    'use strict';

    $.extend($.fn.carousel.Constructor.prototype, {
        fit: function (item) {
            if (this.fitting || !this.$element.hasClass('carousel-fit')) return;

            this.fitting = true;

            var
                that = this
                , slide = typeof item !== 'undefined' ? item : 'active'
            ;

            if (item != 'active' && slide == 'active' && this.$element.find('.prev').length) {
                slide = 'prev';
            }
            else if (item != 'active' && slide == 'active' && this.$element.find('.next').length) {
                slide = 'next';
            }

            var
                $slide = this.$element.find('.' + slide)
                , $img = $slide.find('img')
                , $caption = $slide.find('.carousel-caption')
                , e = $.Event('fit')
                , unfit = function () {
                    $caption.css({
                        'left': 0 || $caption.css('left')
                        , 'right': 0 || $caption.css('right')
                    });
                }
                , adaptWrapper = function () {
                    if (that.$element.height() != $img[0].offsetHeight) {
                        that.$element.animate({
                            'height': $img[0].offsetHeight
                        }, adaptCaption);
                    }
                    else {
                        adaptCaption();
                    }
                }
                , adaptCaption = function () {
                    $caption.css({
                        'left': $img[0].offsetLeft
                        , 'right': $img.parent().width() - $img[0].offsetLeft - $img[0].offsetWidth
                    });

                    that.fitting = false;

                    that.$element.trigger(e);
                }
            ;

            unfit();

            if (slide != 'active' && this.height) {
                this.$element.animate({
                    'height': this.height
                }, adaptWrapper);
            }
            else {
                adaptWrapper();
            }
        }
    });

    var _fn = $.fn.carousel;
    $.fn.carousel = function () {
        var result = _fn.apply(this, arguments);

        this.each(function () {
            var
                $this = $(this)
                , data = $this.data('carousel')
            ;

            if (!data.height) {
                data.height = $this.height();
            }

            if ($this.hasClass('carousel-fit')) {
                data.fit();
            }
        });

        return result;
    };
    $.fn.carousel.defaults = _fn.defaults;
    $.fn.carousel.Constructor = _fn.Constructor;
    $.fn.carousel.noConflict = _fn.noConflict;

    var _slide = $.fn.carousel.Constructor.prototype.slide;
    $.fn.carousel.Constructor.prototype.slide = function () {
        var
            that = this
            , result = _slide.apply(this, arguments)
        ;

        if (this.$element.hasClass('carousel-fit')) {
            this.fit(this.$element.find('.next').length ? 'next' : 'prev');
        }

        return result;
    };

    $(window).on('resize', function (e) {
        $('.carousel').carousel('fit');
    });
}));

Bootstrap Carousel模态转换

0 个答案: