How to add a slider to a website?

D

Dex7772015-09-19 03:25:18

Kohana

Dex777, 2015-09-19 03:25:18

Hello, you need to put a slider on the site on the main page, it is desirable that it be large, I decided to try Owl Carousel 2 I took the
instruction from here:
html-blog.net/javascript/slajdery/owl-carousel-pra...
based on the kahana framework, then the code itself there has non-standard links for example

<link rel="stylesheet" href="<? echo URL::base(true,true) ?>css/owl.carousel.css" type="text/css"/>

I tried to prescribe everything according to the instructions, but nothing works, the slider is not shown at all.
On hosting, in the public_html - applications - views directory, there is an index.php and template.php file, it seems that the HTML code itself is written in index.php as in the instructions:

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>

And here it’s not clear how to make links in the document to a photo that will be, for example, in the images folder on the hosting
in template.php, like the css styles and java script files themselves are attributed,
I wrote something like:

<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>

It's still not clear:

3. Подключаем ЯваСкрипт который запускает саму карусель

$(document).ready(function() {

$("#owl-example").owlCarousel();

});

How and in what document to connect it?
Please tell me where and how to correctly write the code so that the slider works
Here is the index.php code

<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>

And here is the template.php code

<!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>

Here are the Owl Carousel 2 files themselves

. Other slider options are also possible, the main thing is that it be large and you can easily adjust its size and placement on the page
.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

Evgeny Elchev, 2015-09-19
@Dex777

Described in detail. Tell me, how is your layout in general?
The link is quite normal, when php, it will be processed by the most common link.
What exactly is not clear? specify either the path to the image, wherever it lies (of course, only the root document is suitable). Or we use Kochan variables:
will give a link to the image that is in the imges folder and is called image.png.

3. We connect the JavaScript that launches the carousel itself
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
this must be written in the js file that you yourself must create, for example js/script.js, it is possible that you already have one, this file must be included on the page like this:
If you want to code by code, then you can write it right on the page in this style:
<script type="text/javascript">
    $(function(){
      $.superbox.settings = {
        closeTxt: "Close",
        loadTxt: "Loading...",
        nextTxt: "Next",
        prevTxt: "Previous"
      };
      $.superbox();
    });
  </script>