我正在使用动态名称的动态滑块。鼠标悬停图像将翻转。一切正常，但名称以相反的顺序出现，下面是我的代码。它也适用于鼠标悬停和动态名称，但它们的顺序相反
protected void fillSlider()
{
cls_SliderMain objSlider = new cls_SliderMain(true);
objSlider.SelectAll("");
string strHtm = string.Empty;
string[] imagesFromPicFolder = Directory.GetFiles(Server.MapPath("~/images/pic/"));
string[] imagesFromDefaultFolder = Directory.GetFiles(Server.MapPath("~/images/default/"));
List<string> allimagesFromPicFolder = new List<string>();
foreach (string filePath in imagesFromPicFolder)
{
string imagefileName = Path.GetFileName(filePath);
allimagesFromPicFolder.Add(imagefileName);
}
List<string> allimagesFromDefaultFolder = new List<string>();
foreach (string filePath in imagesFromDefaultFolder)
{
string defaultfileName = Path.GetFileName(filePath);
allimagesFromDefaultFolder.Add(defaultfileName);
}
for (int i = 0; i < allimagesFromPicFolder.Count; i++)
{
strHtm += @"<div style='width: 300px; height: 300px;' id='DivNew" + i + @"'>
<div class='flip'>
<div class='front'>
<img id='image' alt='image' src='images/pic/" + allimagesFromPicFolder[i] + @"' />
<div>
<span class='fa fa-inr' style='padding:77px;margin-top:-81px; color:blue;text-align:center;padding-left:64px;'>" + objSlider.Listcls_SliderMain[i].SliderName + @"</span></div>
</div>
<div class='back'>
<img id='image' alt='default' src='images/default/" + allimagesFromDefaultFolder[i] + @"'/>
<div>
<span class='fa fa-inr' style='padding:77px;margin-top:-81px; color:blue;text-align:center;padding-left:64px;'>" + objSlider.Listcls_SliderMain[i].SliderName + @"</span></div>
</div>
</div></div>";
}
Slider3.InnerHtml = strHtm;
}
}
[![image][1]][1]
[1]: https://i.stack.imgur.com/FtfYr.png
<style>
slick-prev
{
left: 15px;
}
.slick-next
{
right: 15px;
}
.slick-prev, .slick-next
{
height: 40px;
width: 40px;
z-index: 9;
background: black;
border-radius: 100%;
}
.slick-prev:before, .slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.imgslide
{
margin-top: 4px;
display: inline-block;
border: solid 1px #E4E4E4;
}
.multiple-items
{
width: 100%;
margin-top: 10px;
}
.slick-initialized .multiple-items
{
display: block;
height: 359px;
width: 131px;
}
/* .flip
{
width: 56%;
border: 2px solid #f1f1f1;
margin: 0 auto;
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}*/
.flip img
{
width: 246px;
height: auto;
}
.flip .back
{
color: #fff;
text-align: center;
width: 246px;
height: auto;
}
.next
{
right: 0px;
}
.prev
{
left: 0px;
}
.slick-initialized .slick-slide
{
display: block;
}
element.style
{
backface-visibility: hidden;
transform-style: preserve-3d;
height: 100%;
width: 246px;
position: relative;
transition: all 0.5s ease-out;
transform: rotateY(-180deg);
z-index: 0;
}
.slick-slide img
{
display: block;
width: 66%;
height: auto;
}
.slick-slide
{
width: 200px;
height: 200px;
}
.slick-slide slick-active
{
height: 100px;
width: 100px;
}
.flip
{
width: 342px;
margin: -66px auto;
padding: 1px;
border: 1px solid whitesmoke;
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}
</style>
<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="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"
rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
<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">
jQuery(document).ready(function () {
jQuery('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
});
</script>
<script type="text/javascript">
$(function () {
$(".flip").flip({
trigger: 'hover'
});
});
</script>
<script type="text/javascript">
$(function () {
$(".flip").flip({
trigger: 'hover',
axis: 'y'
});
});
</script>
<script type="text/javascript">
$('#image').mouseover(function () {
$(this).addClass('flip');
}).mouseleave(function () {
$(this).removeClass('flip');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div id="Slider3" class="multiple-items" runat="server">
</div>
</div>
</form>
</body>
</html>