Блог
Главная » jQuery » Темный слайдер на jQuery для uCoz
16:29




Очень красивый темный слайдер , функциональный , его можно использовать в разных целях , главное чтобы у вас была фантазия smile

Для начала смотрим ДЕМО

Установка

Вставляем в head u /head:
Code

<link rel="stylesheet" href="/css/styleslider.css" type="text/css" media="screen" />


Вставляем в body u /body:
Code

<script type='text/javascript' src='/js/custom.js'></script>
<script type='text/javascript' src='/js/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='/js/jquery.carouFredSel.js'></script>


Наш слайдер:
Code

  <!-- Select slideshows -->
<div id="main-page-slideshow">
<div class="container-position">
<div class="main-page-slideshow-holder">

<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
/* CarouFredSel: an infinite, circular jQuery carousel.
  Configuration created by the "Configuration Robot"
  at caroufredsel.frebsite.nl
*/
$j(function() {
var timerWidth = 940;
$j("#main-slideshow").carouFredSel({
  width: 940,
  align: "left",
  height: 400,
  auto: false,
  items: {
  visible: 1,
  width: 940,
  height: 400
  },
  scroll: {
  fx: "fade" //fade, crossfade, scroll, directscroll, cover, uncover
  },
  prev: {
  button: "#main-slideshow-prev",
  key: "left"
  },
  next: {
  button: "#main-slideshow-next",
  key: "right"
  },
  pagination: "#main-slideshow-pagination"
}).find(".slideshow-image").hover(
  function() { $j(this).find("div").stop(true, true).slideDown(200);},
  function() { $j(this).find("div").slideUp(200);}  
);
//show/hide prev/next controls
$j(".main-page-slideshow-holder").hover(
  function() {  
  $j(this).find(".main-slideshow-prev-next li.extend-left").stop().clearQueue().show().animate({left: 30}, 10);
  $j(this).find(".main-slideshow-prev-next li.extend-right").stop().clearQueue().show().animate({right: 30}, 10);
  },
   
  function() {  
  $j(this).find(".main-slideshow-prev-next li.extend-right").stop().clearQueue().show().animate({right: -60}, 1);
  $j(this).find(".main-slideshow-prev-next li.extend-left").stop().clearQueue().show().animate({left: -60}, 1);
  });
});
//]]>
</script>

<div class="main-slideshow-prev-next">
  <ul>
  <li class="extend-left"><span></span><a class="prev" id="main-slideshow-prev" href="#">prev</a></li>
  <li class="extend-right"><span></span><a class="next" id="main-slideshow-next" href="#">next</a></li>
  </ul>
</div>

<div id="main-slideshow">

<div class="slideshow-image">
<img src="http://http-solutions.com/themes/primecut/wp-content/themes/primecut/timthumb.php?src=http://http-solutions.com/themes/primecut/wp-content/uploads/2011/11/1.jpg&w=940&h=400&zc=1&q=100&s=1" alt="The Prisoner of Benda" />
<div class="slide-description">
  <h1>The Prisoner of Benda</h1>
  <p>Fetal stemcells, aren’t those controversial? Oh, I don’t have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. Pansy. Then throw her in the laundry room, which will hereafter be referred to as "the brig”.</p>
</div>

</div>

<div class="slideshow-image">
<img src="http://http-solutions.com/themes/primecut/wp-content/themes/primecut/timthumb.php?src=http://http-solutions.com/themes/primecut/wp-content/uploads/2011/09/26.jpg&w=940&h=400&zc=1&q=100&s=1" alt="The Cyber House Rules" />
<div class="slide-description">
  <h1>The Cyber House Rules</h1>
  <p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Okay, I like a challenge. Guards! Bring me the forms I need to fill out to have her taken away!</p>
</div>

</div>

<div class="slideshow-image">
<img src="http://http-solutions.com/themes/primecut/wp-content/themes/primecut/timthumb.php?src=http://http-solutions.com/themes/primecut/wp-content/uploads/2011/09/36.jpg&w=940&h=400&zc=1&q=100&s=1" alt="Where No Fan Has Gone Before" />
<div class="slide-description">
  <h1>Where No Fan Has Gone Before</h1>
  <p>We can’t compete with Mom! Her company is big and evil! Ours is small and neutral! Doomsday device? Ah, now the ball’s in Farnsworth’s court! File not found. Fry! Quit doing the right thing, you jerk! Shinier than yours, meatbag. Oh, how I wish I could believe or understand that! There’s only one reasonable course of action now: kill Flexo!</p>
</div>

</div>

<div class="slideshow-image">
<img src="http://http-solutions.com/themes/primecut/wp-content/themes/primecut/timthumb.php?src=http://http-solutions.com/themes/primecut/wp-content/uploads/2011/09/42.jpg&w=940&h=400&zc=1&q=100&s=1" alt="Kif Gets Knocked Up A Notch" />
<div class="slide-description">
  <h1>Kif Gets Knocked Up A Notch</h1>
  <p>I don’t ‘need’ to drink. I can quit anytime I want! Perhaps, but perhaps your civilization is merely the sewer of an even greater society above you! I’m sure those windmills will keep them cool. Fetal stemcells, aren’t those controversial? Pansy. Good man. Nixon’s pro-war and pro-family.</p>
</div>

</div>

</div>

<div class="timer" id="slideshow_timer"></div>

</div>

<div id="main-slideshow-pagination"></div>

</div>
</div><!-- End Select slideshows -->

<!--End wave -->
</div>  
</div>


Файлы из прикрепленного архива заливаем в папки js и css

Материал подготовил Рино

Категория: jQuery

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?