2
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href="css/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="css/slick.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/plugins/slick.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script type="text/javascript">
$(document).ready(function() {
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows:true,
});
});
</script>
<style>
.slick-prev
{
left: 15px; /* left:30px;
left:0px;*/
}
.slick-next
{
right: 15px; /* right:0px;
right:13px;*/
}
.arrowhide .slick-arrow
{
opacity: 0;
transition: ease all 0.5s;
-webkit-transition: ease all 0.5s;
-o-transition: ease all 0.5s;
-moz-transition: ease all 0.5s;
}
.arrowhide:hover .slick-arrow
{
opacity: 9;
}
.slick-prev, .slick-next
{
height: 40px;
width: 40px;
z-index: 9;
background: gainsboro;
border-radius: 100%;
}
.slick-prev:hover, .slick-next:hover
{
background: #00AEEF;
}
.slick-dots
{
bottom: 0;
margin-bottom: 10px;
}
.slick-dots li button
{
background: rgba(255, 255, 255, 0.67);
border-radius: 100%;
}
.imgslide
{
margin-top: 4px;
display: inline-block;
border: solid 1px #E4E4E4;
}
img
{
vertical-align: middle;
height: 154px;
width: 263px;
float: right;
padding: 4px;
margin-top: 2px;
}
.slick-prev:hover, .slick-next:hover
{
color: transparent;
outline: none;
background: #00AEEF;
}
.arrowhide .slick-arrow
{
opacity: 0;
transition: ease all 0.5s;
-webkit-transition: ease all 0.5s;
-o-transition: ease all 0.5s;
-moz-transition: ease all 0.5s;
}
.multiple-items img
{
display: block;
width: 104%;
height: 49%;
padding-left: 7px;
padding-right: 0px;
margin-top: -8px;
}
. .multiple-items img
{
display: block;
width: 96%;
padding-left: 25px; /* height: 55%;
padding-right: -26px;
margin-top: -8px;
margin-right: 30px;
padding: 1px;
margin-top: -68px;
padding-top: -27px;*/
}
.multiple-items
{
width: 560px;
height: 180px;
margin-top: 10px;
}
.slick-initialized .multiple-items
{
display: block;
height: 359px;
width: 131px;
}
.flip
{
height: 199px;
width: 300px;
margin: 0 auto;
}
.flip img
{
width: 300px;
height: auto;
}
.flip .back
{
background: #2184cd;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-9 col-sm-6 col-xs-12" style="float: left;">
<div id="slider" class=" multiple-items" runat="server">
</div>
</div>
</div>
<%--</div>--%>
</div>
</body>
</html>
enter code here
protected void Page_Load(object sender, EventArgs e)
{
string strHtm = string.Empty;
int i = 0;
string[] filePaths = Directory.GetFiles(Server.MapPath("~/images/pic/"));
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
strHtm += @"<div id='DivNew" + i + @"'>
<img src='images/pic/" + fileName + @"' height=50 width=50 />
</div>";
i++;
}
slider.InnerHtml = strHtm;
}
}
こんにちは私はダイナミックな複数スライススライダーで作業しています。上記の私のコードが動的イメージが、イメージで、このことを表示スライダーを使用しているフリップダイナミックな複数滑りスライダーで画像を反転する方法
slidesToShow：3、目を置き換えます – Hit
スライダーでダイナミックな画像を表示する方法を教えてください – densi
ダイナミックについてはわかりませんが、このdivを作成してください。