Principală » Slide-uri » Nivo Slider

Nivo Slider

Demo:





Demo : Nivo Slider
Download : Nivo Slider

Instructiuni

  1. Se uploadează folderele si fişiereşe înafară de folderul demo.
  2. Intri în folderul demo şi de acolo uploadezi tot.
  3. După <head> puneti :

Code
<link rel="stylesheet" href="/themes/default/default.css" type="text/css" media="screen">
  <link rel="stylesheet" href="/themes/pascal/pascal.css" type="text/css" media="screen">
  <link rel="stylesheet" href="/themes/orman/orman.css" type="text/css" media="screen">
  <link rel="stylesheet" href="/nivo-slider.css" type="text/css" media="screen">
  <link rel="stylesheet" href="/style.css" type="text/css" media="screen">

  • După <body> puneţi :

  • Code
    <script type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>
      <script type="text/javascript" src="/jquery.nivo.slider.pack.js"></script>
      <script type="text/javascript">
      $(window).load(function() {
      $('#slider').nivoSlider();
      });
      </script>


  • Şi unde vreţi să apară slider-ul puneţi :

  • Code
    <div id="wrapper">

      <div class="slider-wrapper theme-default">
      <div class="ribbon"></div>
      <div id="slider" class="nivoSlider">
      <img src="images/toystory.jpg" alt="">
      <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption"></a>
      <img src="images/walle.jpg" alt="" data-transition="slideInLeft">
      <img src="images/nemo.jpg" alt="" title="#htmlcaption">
      </div>
      <div id="htmlcaption" class="nivo-html-caption">
      <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
      </div>
      </div>

      </div>


    In loc de images/walle.jpg, images/nemo.jpg, etc puneţi ce imagini vreţi să vă apară.







    Voturi : 5 | Rating : 5.0


    Total comentarii : 0
    Doar utilizatorii înregistraţi pot adăuga comentarii
    [ Înregistrare | Logare ]

    Abonare

    Aboneaza-te gratuit si vei primi noi template-uri prin email !

    Introduceti mai jos adresa de email :



    Google Plus

    Mini-Chat

    ОК

    Statistica


    Total online: 1
    Vizitatori: 1
    Utilizatori: 0