我有图像滑块。从数据库中的表格中滑动图像。显示正确的滑块我给出了像这样的固定高度宽度
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css" media="screen">
.slides_container {
width: 1000px;
height: 475px;
}
.slides_container div {
width: 1000px;
height: 475px;
display: block;
}
#newslides .slidesjs-previous {
position: absolute;
top: 25%;
left: 2%;
z-index:999;
}
#newslides .slidesjs-next{
position: absolute;
top: 25%;
right: 2%;
z-index:999;
}
</style>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<div class="breadcrumb">
<a href="News.aspx">News</a> <span>></span> Photo Gallery
</div>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="container">
<div id="example">
<div id="newslides" >
<asp:Repeater ID="rptGallery" runat="server">
<ItemTemplate>
<div class="slides_container">
<div style="float: left; height: 27px; width: 1000px; font-size: 18px;">
<span style="float: left"><%# Eval("Title") %> </span>
<span style="float: right"><%# Eval("PhotoCredit") %> </span>
</div>
<img src='<%# Eval("FileURL") %>' width="1000" height="475" alt="Slide 1">
</div>
</ItemTemplate>
</asp:Repeater>
<a href="#" class="slidesjs-previous slidesjs-navigation" >
<img src="images/prevArrow.png" width="50" height="43" alt="Arrow Prev">
</a>
<a href="#" class="slidesjs-next slidesjs-navigation" >
<img src="images/nextArrow.png" width="50" height="43" alt="Arrow Next">
</a>
</div>
</div>
</div>
<script src="Scripts/jquery.slides.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#newslides').slidesjs({
width: 940,
height: 250,
navigation: {
active: false,
effect: "slide",
},
pagination: {
active: false,
// [boolean] Create pagination items.
// You cannot use your own pagination. Sorry.
effect: "fade"
// [string] Can be either "slide" or "fade".
},
play: {
active: true,
auto: true,
interval: 2000,
swap: true,
pauseOnHover: true,
restartDelay: 2500,
}
});
});
</script>
但是,由于那个图像crops.it没有在slider.nhanks提前显示完整的图像
答案 0 :(得分:1)
您使用了错误的滑块尺寸。
更新您的
$('#newslides').slidesjs({
width: 940, // change width to 1000
height: 250, // change height to 475
....