Question

有谁知道为什么我的图片堆放在列表中而不是以幻灯片形式出现？我正在使用Slideshow Pro，它结合了HTML，CSS，PHP和来自bootstrap的Javascript。我使用了http://forums.slideshowpro.net/viewtopic.php?pid=112251#p112251中的代码。之前Javascript没有正确加载，因为我指定了错误的路径，但是当我将路径更改为正确的路径时，图像仍然像列表一样堆叠，幻灯片功能不起作用。您还可以在http://jsfiddle.net/anjeline/d3W9x/

上查看代码

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js" rel="stylesheet"></script>
<script src="bootstrap/js/bootstrap-transition.js" rel="stylesheet"></script>
<link href="bootstrap/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
<script src="bootstrap/js/bootstrap.js" rel="stylesheet"></script>
<script src="bootstrap/js/bootstrap-carousel.js" rel="stylesheet"></script>


<!-- a style change to resize small images up-->
<style>
.carousel .item img{width:75%;}
</style>

<!-- then a little javascript to render the correct responsive image depending on browser width-->
<script>
$(document).ready(function() {

$('.carousel').carousel({
interval: 7000
});


function setImageSrc() {
var browserWidth = $(window).width();
var carouselImages = $('.carousel .item img');
$.each(carouselImages, function(index){
if(browserWidth >= 480 && browserWidth <= 768 ){
$(this).attr('src', $(this).data("tablet-src"));
}else if(browserWidth > 768 && browserWidth <= 1280){
$(this).attr('src', $(this).data("desktop-src"));
}else if(browserWidth > 1280)
$(this).attr('src', $(this).data("large-desktop-src"));
});
}
setImageSrc();//init
$(window).resize(function() {
setImageSrc();
});

});
</script>
</head>
<body>

<!-- Place in the body where you want the carousel and pass in the html id you want to give the carousel for the first parameter and the album id into the 2nd parameter of the createCarousel function.-->
<?php
include "my-carousel.php";
createCarousel("featured", 349);
?>
</body>

Slideshow Pro Bootstrap Carousel堆叠图像

0 个答案: