Мы уже очень близко, все что нам осталось, подключить наши jQuery-элементы а затем добавить некоторый стиль для того, чтобы наш второй экран слайдера портфолио был адаптивным.
Здесь вы можете скачать необходимые Java-файлы, которые нужно будет расположить в папке под названием "js" в корневом каталоге вашего сайта.
Давайте начнем с файла index.php. Первое, что нам нужно сделать, это добавить ссылки в головную секцию кода страницы, туда, где у нас указаны скрипты javascript. Это и будет jQuery и javascript, которые заставляют работать наш слайдер. Как вы наверное заметили, что свой код мы подобно бутерброду разместили между ссылкой на каскадные таблицы стилей и закрывающим тэгом head.
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
});
</script>
</head>
На данном этапе у вас уже должен быть полностью функционирующий слайдер, но пока что он не очень адаптивный. Для того чтобы сделать его адаптивным, нам просто надо добавить несколько новых строк в наши media query, и все будет сделано. Начнем, пожалуй, с media query для планшетов в горизонтальной ориентации с максимальной шириной в 1024 пикселей. Всё, что нам нужно будет сделать, это добавить тэг #mainBG2 под нашим тэгом #mainBG.
#mainBG2 {
border-top:10px solid #EDEAE5;
background: url(images/medium2.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Дальше нужно будет сделать то же самое в параметрах min-width: 768px / max-width: 991px, media query для портретной ориентации планшета.
#mainBG2 {
border-top:10px solid #EDEAE5;
background: url(images/medium2.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Наконец, переходим к media query для мобильных устройств, где экраны варьируются от 0 до 767 пикселей в ширину. Здесь придется поработать немного больше. Мы начали с того, что указали размер шрифта h3 немного меньший, чтобы он корректно отображался на мобильных устройствах. Далее мы добавили тэг #mainBG2 таким образом, чтобы он подгружал маленькую версию фонового изображения. Далее мы изменили размер классов .stripViewer, panelContainer и .panel таким образом, чтобы наш слайдер с портфолио правильно отображался на мобильных устройствах. Далее мы изменили класс «.wrapper img» таким образом, чтобы скрыть наше большое изображение, и класс «.warpper p» таким образом, чтобы наш текст был меньше и, наконец, сообщили нашему классу «.hideSmall img», что появилась необходимость отобразить маленькое фоновое изображение.
h3 {font-size:.9em;}
#mainBG2 {
border-top:10px solid #EDEAE5;
background: url(images/small2.jpg) 50% 0 no-repeat scroll !important;
background-size: cover !important;
height:500px;
padding-bottom:0;
}
.articlesHeader {
font-size:.8em;
}
.stripViewer { /* This is the viewing window */
width:300px;
overflow:hidden;
height:388px;
}
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
width:300px;
overflow:hidden;
}
.wrapper img {
display:none;
}
.wrapper p {
font-size:.7em;
line-height:1em;
margin:5px 25px;
}
.hideSmall img {
display:block;
margin:0 0 10px 12px;
}
И на этом мы закончили все, что касается нашего слайдера с портфолио. Проверяйте свой результат! С помощью такого слайдера вы без труда сможете привлечь внимание потенциальных покупателей или клиентов.
Скачать исходный код примера, разработанного в ходе руководства.