Bootstrap Carousel过渡

时间:2015-08-27 03:51:19

标签: jquery css twitter-bootstrap twitter-bootstrap-2

我的引导旋转木马上有一个奇怪的过渡。当需要将幻灯片直接滑过时,幻灯片似乎从底部/右侧到顶部/左侧。示例(参见页面底部):http://disalle.dev.activemls.com

这是相关代码:

<dom-module id="prop-slideshow">
<template>
    <h2>Featured Listings</h2>
    <div id="featured" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
        </div>

        <!-- Carousel nav -->
        <a class="carousel-control left" href="#featured" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
        <a class="carousel-control right" href="#featured" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div>
</template>

<script>
/********************************
/ INDEX SLIDESHOW
/*******************************/
$(document).ready(function(){
    $.getJSON("/property/slideshow_json", function(data){
    }).success(function(data){
        $.each(data, function (index, value) {
                $("#featured .carousel-indicators").append($( '<li data-target="#myCarousel" data-slide-to="' +index+ '"></li>' ));

                $("#featured .carousel-inner").append($('<div class="item"><div class="span6"><img src="/property/photo/'+value.mls_number+'/1"></div><div class="span6"><h4 style="text-transform:uppercase;"><strong>'+value.address+'</strong></h4><p class="lead">PRICED TO SELL | $'+value.price+'</p><p><a href="/property/detail/'+value.mls_number+'"class="btn btn-primary btn-large">View Details</a></p></div></div> '));
        });
        $('#featured .carousel-indicators li:first').addClass('active');
        $('#featured .carousel-inner div:first').addClass('active');
        $('#featured').carousel('pause');    
    });
});

Polymer({
        is: 'prop-slideshow',

        // Fires when an instance of the element is created
        created: function() {},

        // Fires when the local DOM has been fully prepared
        ready: function() {},

        // Fires when the element was inserted into the document
        attached: function() {},

        // Fires when the element was removed from the document
        detached: function() {},

        // Fires when an attribute was added, removed, or updated
        attributeChanged: function(name, type) {}
});
</script>
</dom-module> 

0 个答案:

没有答案