Привет, на сайт нужно поставить на главной странице слайдер, желательно чтоб он был большой, решил попробовать Owl Carousel 2
Инструкцию брал отсюда:
html-blog.net/javascript/slajdery/owl-carousel-pra...
Но так как сайт сделан на основе kahana framework то сам код там имеет нестандартные ссылки например
<link rel="stylesheet" href="<? echo URL::base(true,true) ?>css/owl.carousel.css" type="text/css"/>
Попробовал так по инструкции прописать все, но ничего не работает, слайдер вообще не показывается
На хостинге в директории public_html - applications - views имеется файл index.php и template.php, вроде в index.php прописывается сам код HTML как в инструкции:
2. Задаем html код
<div class="owl-carousel" id="owl-example">
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
...
</div>
И тут не понятно как делать ссылки в документе на фото которое будет например в папке images на хостинге
в template.php вроде приписывается сами стили css и java script файлы
я прописывал что то вроде:
<link rel="stylesheet" href="<? echo URL::base(true,true) ?>css/owl.carousel.css" type="text/css"/>
<link rel="stylesheet" href="<? echo URL::base(true,true) ?>css/owl.theme.css" type="text/css"/>
<script src="<? echo URL::base(true,true) ?>js/owl.carousel.js"></script>
Еще непонятно это:
3. Подключаем ЯваСкрипт который запускает саму карусель
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
Как и в каком документе ее подключить?
Подскажите пожалуйста куда и как правильно прописать код чтоб слайдер работал
Вот код index.php
<div class="content">
<div class="kolge">
<div class="cont-center">
<div class="logo1"><img src="<? echo URL::base(true,true) ?>css/images/logo1.png"/></div>
<div class="indeximg"><img src="<? echo URL::base(true,true) ?>css/images/indeximg-j.png"/></div>
<div class="news">
<div class="slides">
<ul>
<? echo $news; ?>
<!--<li>
<div>
<span id="sl1">Kan</span>
<span id="sl2">Lorem Ipsum, dizgi ve baskı asendüstrisində</span>
<span id="sl2">kullanılan Ipsum<img src="<? echo URL::base(true,true) ?>css/images/slide1.png"/></span>
</div>
</li>
<li>
<div>
<span id="sl1">Termaz</span>
<span id="sl2">Lorem Ipsum, dizgi ve baskı asendüstrisində</span>
<span id="sl2"><img src="<? echo URL::base(true,true) ?>css/images/slide2.png"/>kullanılan Ipsum</span>
</div>
</li>
<li>
<div>
<span id="sl1">Metanol tərkib</span>
<span id="sl2">Lorem Ipsum, dizgi ve baskı asendüstrisində</span>
<span id="sl2"><img src="<? echo URL::base(true,true) ?>css/images/slide2.png"/>kullanılan Ipsum</span>
</div>
</li>-->
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="cont-center">
</div>
</div>
</div>
</div>
</div>
И вот код template.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><? echo $title ?></title>
<meta name="keywords" content="<? echo $keyw; ?>" />
<meta name="description" content="<? echo $desc; ?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="icon" href="<? echo URL::base(true,true) ?>favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<? echo URL::base(true,true) ?>css/jquery.superbox.css" type="text/css" media="all" />
<link href="<? echo URL::base(true,true) ?>css/slider.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="<? echo URL::base(true,true) ?>css/style.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="<? echo URL::base(true,true) ?>js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<? echo URL::base(true,true) ?>js/1.3.2.min.js"></script>
<script type="text/javascript" src="<? echo URL::base(true,true) ?>js/jquery.superbox.js"></script>
<script src="<? echo URL::base(true,true) ?>js/slider.js"></script>
</head>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>
<style type="text/css">
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:32px;height:32px;margin:0 auto;text-indent:-9999px;background:url(styles/loader.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<body>
<div class="header">
<div class="head-center">
<div class="lang">
<? echo $langbar; ?>
</div>
<div class="menu">
<? echo $menubar; ?>
</div>
<div class="social">
<a id="face" href="></a>
<a id="twit" href="#"></a>
</div>
</div>
</div>
<? echo $container;?>
<script type="text/javascript">
var url='<? echo URL::base(true,true); ?>';
</script>
<script src="<? echo URL::base(true,true) ?>js/jquery.form.js"></script>
<script src="<? echo URL::base(true,true) ?>js/custom.js"></script>
</body>
</html>
Вот сами файлы Owl Carousel 2
Так же можно другие варианты слайдеров, главное чтоб он был большого размера и спокойно можно было настраивать его размеры и размещение на странице
Вот приблизительно какой должен быть по размеру слайдер (белая рамка) может немного меньше
Простой
Средний
