0
Я хочу сделать навигационную панель слайдера CSS, которую я создал.Как сделать панель навигации чистого слайдера css?
Here - живая демонстрация, которую вы можете видеть.
И я также хочу, чтобы скользить изображения по горизонтали,
любая идея, как я могу добиться этого?
Было также сообщение об ошибке, когда я отправляю свой полный код, поэтому я добавил полное кодирование css в jsfiddle, не волнуйтесь, что изображения не будут отображаться, но у него есть полное кодирование.
HTML
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="images/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
CSS
html, body {
background: #eaeaea url(../img/bg.png) repeat;
font-size: 12px;
font-family: "Open Sans", serif;
min-width: 960px;
margin: 0;
padding: 0;
color: #aaa;
}
.content h1 {
font-size: 48px;
color: #000;
text-shadow: 0px 1px 1px #f4f4f4;
text-align: center;
padding:60px 0 30px;
}
/* LAYOUT */
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
/* CONTENT SLIDER */
#content-slider {
width: 100%;
height: 360px;
margin: 10px auto 0;
}
/* SLIDER */
#slider {
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
#mask {
overflow: hidden;
height: 320px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
#slider li.firstanimation {
-moz-animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation: cycletwo 25s linear infinite;
-webkit-animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation: cyclethree 25s linear infinite;
-webkit-animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation: cyclefour 25s linear infinite;
-webkit-animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation: cyclefive 25s linear infinite;
-webkit-animation: cyclefive 25s linear infinite;
}
#slider .tooltip {
background: rgba(0, 0, 0, 0.7);
width: 300px;
height: 60px;
position: relative;
bottom: 75px;
left: -320px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left: 0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
/* PROGRESS BAR */
.progress-bar {
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: #000;
-moz-animation: fullexpand 25s ease-out infinite;
-webkit-animation: fullexpand 25s ease-out infinite;
}
Можете ли вы добавить больше описания того, к какому типу навигации вы стремитесь? Возможно, картина и попытка самой навигации? И вы хотите, чтобы он всегда переходил горизонтально или просто в какое-то время? –
Да, я добавил pic, теперь вы можете видеть навигацию этого слайдера и, конечно же, переходы также, как вы можете видеть в jsfiddle, где я помещаю демонстрацию слайдера. –
Я не вижу причин делать такие вещи в чистом CSS. Это чересчур многословное, трудноподдерживаемое и все другие плохие слова, которые вы можете себе представить. Что-то, что вы хотите сделать в 300 строках CSS, нуждается в менее чем 20 строках JS-jQuery –