0
スライダーにアイコンを配置する方法を理解しようとしています。 Here is what it looks like.スライダー上のアイコン
これらのアイコンが中央に配置されていて、スライダー上に浮いていたらいいですか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://googledrive.com/host/0B1RR6fhjI2QROGt0MTFoVkhMdUk/fonts.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<script type= "text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type= "text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript" src="js/skrypt.js"></script>
</head>
<body>
<div class="Modern-Slider">
<!-- Item -->
<div class="item">
<div class="img-fill">
<img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_0_w700-h500-q95.jpg" alt="">
<div class="info">
<div>
<h3>Full Width Slider With Layers</h3>
<h5>You can easily add image, html formatted texts and video layers over each slide and each layer accepts unique animation.</h5>
</div>
</div>
</div>
</div>
<!-- // Item -->
<!-- Item -->
<div class="item">
<div class="img-fill">
<img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_063_w700-h500-q95.jpg" alt="">
<div class="info">
<div>
<h3>Fully responsive Scales with its container</h3>
<h5>Donec id ornare dui. Aenean tristique condimentum elit, quis blandit nisl varius sit amet. Sed eleifend felis quis massa viverra</h5>
</div>
</div>
</div>
</div>
<!-- // Item -->
<!-- Item -->
<div class="item">
<div class="img-fill">
<img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_062_w700-h500-q95.jpg" alt="">
<div class="info">
<div>
<h3>Awesome Transtions With CSS3</h3>
<h5>Donec id ornare dui. Aenean tristique condimentum elit, quis blandit nisl varius sit amet. Sed eleifend felis quis massa viverra</h5>
</div>
</div>
</div>
</div>
<!-- // Item -->
<!-- Item -->
<div class="item">
<div class="img-fill">
<img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_061_w700-h500-q95.jpg" alt="">
<div class="info">
<div>
<h3>Separate settings per breakpoint</h3>
<h5>Donec id ornare dui. Aenean tristique condimentum elit, quis blandit nisl varius sit amet. Sed eleifend felis quis massa viverra</h5>
</div>
</div>
</div>
</div>
<!-- // Item -->
</div>
<div class="elo">
<ul>
<li><a href="http://techumber.com/"><span>Kolekcje</span><img src="images/notable-icon.png" alt="Kolekcje"></a></li>
<li><a href="http://www.meble.vox.pl/salon-olsztyn-salon-83"><span>Kontakt</span><img src="images/notable-icon.png" alt="Kontakt"></a></li>
<li><a href="http://techumber.com/"><span>Młodzieżowe</span><img src="images/notable-icon.png" alt="Młodzieżowe"></a></li>
<li><a href="http://techumber.com/"><span>BABY Vox</span><img src="images/notable-icon.png" alt="harddrive"></a></li>
</ul>
</div>
</body>
</html>
ここにCSSがあります。
/* ==== Main CSS === */
.img-fill{
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center
}
.img-fill img {
min-height: 100%;
min-width: 100%;
position: relative;
display: inline-block;
max-width: none;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}
.Grid1k {
padding: 0 15px;
max-width: 1200px;
margin: auto;
}
.blocks-box,
.slick-slider {
margin: 0;
padding: 0!important;
}
.slick-slide {
float: left /* If RTL Make This Right */ ;
padding: 0;
}
/* ==== Slider Style === */
.Modern-Slider .item .img-fill{
height:100vh;
background:#000;
}
.Modern-Slider .item .img-fill .info{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
background:rgba(0,0,0,.50);
line-height:100vh;
text-align:center;
}
.Modern-Slider .item .img-fill img{
filter:blur(5px);
}
.Modern-Slider .item .info > div{
display:inline-block!important;
vertical-align:middle;
}
.Modern-Slider .NextArrow{
position:absolute;
top:50%;
right:0px;
width:45px;
height:45px;
background:rgba(0,0,0,.50);
border:0 none;
margin-top:-22.5px;
text-align:center;
font:20px/45px FontAwesome;
color:#FFF;
z-index:5;
}
.Modern-Slider .NextArrow:before{content:'\f105';}
.Modern-Slider .PrevArrow{
position:absolute;
top:50%;
left:0px;
width:45px;
height:45px;
background:rgba(0,0,0,.50);
border:0 none;
margin-top:-22.5px;
text-align:center;
font:20px/45px FontAwesome;
color:#FFF;
z-index:5;
}
.Modern-Slider .PrevArrow:before{content:'\f104';}
.Modern-Slider .slick-dots{
position:absolute;
height:5px;
background:rgba(255,255,255,.20);
bottom:0px;
width:100%;
left:0px;
padding:0px;
margin:0px;
list-style-type:none;
}
.Modern-Slider .slick-dots li button{display:none;}
.Modern-Slider .slick-dots li{
float:left;
width:0px;
height:5px;
background:#d62828;
position:absolute;
left:0px;
bottom:0px;
}
.Modern-Slider .slick-dots li.slick-active{
width:100%;
animation:ProgressDots 11s both;
}
.Modern-Slider .item h3{
font:30px/50px RalewayB;
text-transform:uppercase;
color:#FFF;
animation:fadeOutRight 1s both;
margin:0;
padding:0;
}
.Modern-Slider .item h5{
margin:0;
padding:0;
font:15px/30px RalewayR;
color:#FFF;
max-width:600px;
overflow:hidden;
height:60px;
animation:fadeOutLeft 1s both;
}
.Modern-Slider .item.slick-active h3{
animation:fadeInDown 1s both 1s;
}
.Modern-Slider .item.slick-active h5{
animation:fadeInLeft 1s both 1.5s;
}
.Modern-Slider .item.slick-active{
animation:Slick-FastSwipeIn 1s both;
}
.Modern-Slider {background:#000;}
/* ==== Slider Image Transition === */
@keyframes Slick-FastSwipeIn{
0%{transform:rotate3d(0,1,0,150deg) scale(0) perspective(400px);}
100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(400px);}
}
@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}
/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
/** DOTS CSS**/
.elo {
position: relative;
z-index: 99;
}
.elo ul{
display: inline-block;
float:right;
width:inherit;
margin: 0px;
padding-right: 200px;
padding-left: 200px;
padding:0px;
list-style: none;
background: rgba(0, 0, 0, 0);
max-width: 110%;
}
.elo ul li {
width: auto;
height: auto;
display: inline-block;
bottom: 0;
vertical-align: bottom;
margin-top: -43px;
padding-bottom: 30px;
}
.elo ul li a {
float:right;
display: block;
height: 100px;
width: 100px;
position:relative;
padding-top: 30px;
-webkit-transition-property: width, height,margin-top;
-webkit-transition-duration: 1s;
-o-transition-property: width, height,margin-top;
-o-transition-duration: 1s;
-moz-transition-property: width, height,margin-top;
-moz-transition-duration: 1s;
}
.elo ul li a:hover {
width: 150px;
height: 150px;
margin-top: 0px;
padding-top: 30px;
font-size: 35px;
}
.elo ul li a img {
width: 100%;
position: relative;
left: 0;
border: 5px;
}
私はこのフロントエンドの開発全体に慣れていないので、私は批評を感謝します。