我的引导旋转木马上有一个奇怪的过渡。当需要将幻灯片直接滑过时,幻灯片似乎从底部/右侧到顶部/左侧。示例(参见页面底部):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>