Хотел сделать ещё одну подборку слайдеров для ваших сайтов, да вот наткнулся на один слайдер и захотелось его отдельно разместить для вас и ваших сайтов. Слайдер смотрится аккуратно и немного строго. При наводки мыши на слайдер будут появляться кнопки переключения изображения и старт + пуск слайд-шоу.
Думаю не плохая получится реализация слайдера на сайт и впишется под любой дизайн сайта .
Установка слайдера
И так давайте мы с вами установим данный слайдер на сайт и первым делом вам нужно скачать архив и загрузить папки img и js в файловый менеджер вашего сайта.
После того как загрузили папки нам следует установить код самого слайдера в нужное место на вашем сайте и для этого скопируйте код ниже и вставьте куда вы уже определились .
Код <div id="wrapper"> <div id="inner"> <div id="carousel"> <img src="img/rally1.jpg" alt="rally1" width="600" height="400" border="0" /> <img src="img/rally2.jpg" alt="rally2" width="600" height="400" border="0" /> <img src="img/rally3.jpg" alt="rally3" width="600" height="400" border="0" /> <img src="img/rally4.jpg" alt="rally4" width="600" height="400" border="0" /> </div> <div id="navi"> <div id="timer"></div> <a id="prev" href="#"></a> <a id="play" href="#"></a> <a id="next" href="#"></a> </div> </div> </div>
Далее а точнее следующим действием действием мы пропишем стили к данному слайдеру и вам нужно в ваши стили сайта добавить стили которые я указал чуть ниже.
Код
#wrapper {
border: 1px solid #ccc;
background-color: #fff;
width: 600px;
height: 400px;
padding: 20px;
box-shadow: 0 5px 10px #ccc;
}
#inner {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#navi {
background-color: #333;
background-color: rgba(30, 30, 30, 0.8);
border-top: 1px solid #000;
width: 600px;
height: 70px;
position: absolute;
bottom: -60px;
left: 0;
z-index: 10;
}
#timer {
background-color: #222;
background-color: rgba(20, 20, 20, 0.8);
width: 0;
height: 70px;
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
#prev, #next, #play {
display: block;
position: absolute;
z-index: 30;
}
#prev, #next {
width: 47px;
height: 47px;
top: 13px;
}
#play {
width: 53px;
height: 53px;
top: 10px;
background: url(/img/ui/pause.png) 0 0 no-repeat transparent;
left: 50%;
margin-left: -27px;
}
#play.paused {
background: url(/img/ui/play.png) 0 0 no-repeat transparent;
}
#prev {
background: url(/img/ui/prev.png) 0 0 no-repeat transparent;
left: 220px;
}
#next {
background: url(/img/ui/next.png) 0 0 no-repeat transparent;
right: 220px;
}
#donate-spacer {
height: 100%;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
}
#donate form {
width: 100px;
}
И напоследок мы подключим скрипт отвечающий за работу слайдера и вам нужно установить в нижнюю или в верхнюю часть сайта код скрипта который находится чуть ниже.
Код <script src="/jsjquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
scroll: {
fx: 'fade'
}
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
</script>
Вот и всё слайдер установлен и вы можете с помощью стилей настраивать его под свои нужды!
|