levarm
Полезный
- Регистрация
- 15 Окт 2014
- Сообщения
- 185
- Реакции
- 17
Добавляешь в место своего кодаПодскажите как сделать вот такой слайдер как на фото ? но только с видео объявлениями ? вот сам код
PHP:
<?
$qv = mysql_query("
SELECT id, id_catalog, zag, zag_url, video_item
FROM
board
WHERE video_host='youtu.be'
ORDER BY id
DESC LIMIT 10");
$nqv = mysql_num_rows($qv);
if($nqv) {
?>
<link href="/css/owl.carousel.css" rel="stylesheet">
<link href="/css/owl.theme.css" rel="stylesheet">
<script type="text/javascript" src="/js/owl.carousel.js"></script>
<div class="latest_ads carousel_area">
<h1> Видео-объявления</h1>
<div id="owl-demo" class="owl-carousel">
<?
while($rqv=mysql_fetch_array($qv)) {
?>
<div class="item">
<?/*
<div class="price">
??Cena?? RUB <div class="arrow-right"></div>
</div>
*/?>
<div class="photo">
<img src="http://i.ytimg.com/vi/<?=$rqv['video_item']?>/1.jpg" alt="" title="" />
</div>
<div class="text">
<h3><a href="<?=$bp.'items/'.$rqv['zag_url'].'_'.$rqv['id']?>"><span><?=$rqv['zag']?></span></a></h3>
<?/*
<p></p>
<p class="date"></p>
*/?>
</div>
</div>
<?
}
?>
</div>
</div>
<?
}
?>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000, // Установить автозапуск до 3 секунд
items : 4,
itemsDesktop : [1000,4], //5 пунктов между 1000px и 901px
itemsDesktopSmall : [900,4], // betweem 900px and 601px
itemsTablet: [600,4], //2 пункты между 600 и 0
});
});
</script>
owl.carousel.zip лежит три файла, один .js файл и два файла .css их нужно подключить прописав к ним путь в коде
HTML:
<link href="/css/owl.carousel.css" rel="stylesheet">
<link href="/css/owl.theme.css" rel="stylesheet">
<script type="text/javascript" src="/js/owl.carousel.js"></script>
Вуаля!!!