Question

Доброго времени суток!

У меня не получается сделать так, чтобы слайдер переключался автоматически. Вот все коды:

 

Код в глобальном блоке - тело слайдера

<div class="slidertop">
 ВЫ ЗАТРУДНЯЕТЕСЬ В ЮРИДИЧЕСКИХ ВОПРОСАХ? ВЫ ХОТИТЕ УЗНАТЬ КАК ПРАВИЛЬНО ПОСТУПИТЬ?<br><span class="yell">СПРОСИТЕ ОБ ЭТОМ У ЮРИСТА!</span>
</div>
<div id="slideshow"> 
 <ul> 
 <li> 
     <a href="/index/mediacija/0-5"><img src="/img/slide-10.jpg" alt="" title="Медиация" /></a> 
 </li> 
 
 <li> 
     <a href="/index/arbitrazh/0-4"><img src="/img/slide-20.jpg" alt="" title="Арбитраж" /></a> 
 </li> 
 
 <li> 
 <img src="/img/slide-30.jpg" alt="" title="Образовательные технологии" /> 
 </li> 
 </ul> 
 </div>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/js/craftyslide.min.js"></script> 
 
 <script> 
 $("#slideshow").craftyslide({ 
 'width': 640, 
 'height': 400, 
 'pagination': true, 
 'fadetime': 0.1, 
 'delay': 0.1 
}); 
 </script>

 

Стили в CSS

Craftyslide CSS Styles 

*/ 
.slidertop {width: 960px;
 margin: 0 auto;
 margin-top: 80px;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 line-height: 1.5;}
.yell {color: #b65132;}
#slideshow { 
 margin: 0 auto;
 margin-top: 30px;
 position: relative;
 width: 960px !important;
 height: 500px !important;
} 

#slideshow ul { 
 position:relative; 
 overflow:hidden; 
 margin:0; 
 padding:0; 
 width:960px !important;
 height: 500px !important;
} 

#slideshow ul li { 
 position:absolute; 
 top:0; 
 left:0; 
 margin:0; 
 padding:0; 
 list-style:none; 
 height: 500px !important;
 width: 960px !important;
} 

#slideshow ul li img {width: 960px !important; height: 500px !important;}
#pagination { 
 clear:both; 
 width:75px; 
 margin:25px auto 0; 
 padding:0; 
} 

#pagination li { 
 list-style:none; 
 float:left; 
 margin:0 2px; 
} 

#pagination li a { 
 display:block; 
 width:10px; 
 height:10px; 
 text-indent:-10000px; 
 background:url(/img/pagination.png); 
} 

#pagination li a.active { 
 background-position:0 10px; 
} 

.caption { 
 width:940px; 
 margin:0; 
 padding:10px; 
 position:absolute; 
 left:0; 
 font-family:Helvetica, Arial, sans-serif; 
 font-size:16px; 
 font-weight:lighter; 
 color:#fff; 
 border-top:1px solid #000; 
 background:rgba(0,0,0,0.6); 
}

 

Файл скрипта

/*
* Craftyslide
* Created by: Abid Din - http://craftedpixelz.co.uk
* Version: 1.0
* Copyright: Crafted Pixelz
* License: MIT license
* Updated: 7th June 2011
*/

(function($){$.fn.craftyslide=function(options){var defaults={"width":600,"height":300,"pagination":true,"fadetime":350,"delay":5000};var options=$.extend(defaults,options);return this.each(function(){var $this=$(this);var $slides=$this.find("ul li");$slides.not(':first').hide();function paginate(){$this.append("<ol id='pagination' />");var i=1;$slides.each(function(){$(this).attr("id","slide"+i);$("#pagination").append("<li><a href='#slide"+i+"'>"+i+"</a></li>");i++;});$("#pagination li a:first").addClass("active");}function captions(){$slides.each(function(){$caption=$(this).find("img").attr("title");if($caption!==undefined){$(this).prepend("<p class='caption'>"+$caption+"</p>");}$slides.filter(":first").find(".caption").css("bottom",0);});}function manual(){var $pagination=$("#pagination li a");$pagination.click(function(e){e.preventDefault();var $current=$(this.hash);if($current.is(":hidden")){$slides.fadeOut(options.fadetime);$current.fadeIn(options.fadetime);$pagination.removeClass("active");$(this).addClass("active");$(".caption").css("bottom","-37px");$current.find(".caption").delay(300).animate({bottom:0},300);}});}function auto(){setInterval(function(){$slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");$slides.each(function(){if($slides.is(":visible")){$(".caption").css("bottom","-37px");$(this).find(".caption").delay(300).animate({bottom:0},300);}});},options.delay);}$this.width(options.width);$this.find("ul, li img").width(options.width);$this.height(options.height);$this.find("ul, li").height(options.height);if(options.pagination===true){paginate();}else{auto();}captions();manual();});};})(jQuery);

 

Answer 1

В данном скрипте не предусмотрена пагинация вместе с автоматической сменой слайдов, поэтому или одно, или другое. С вариантом ниже будет работать прокрутка, но не возможно будет менять слайды вручную.

<script> 
$("#slideshow").craftyslide({
    'width': 960,
    'height': 500,
    'pagination': false,
    'fadetime': 300,
    'delay': 5000
});
 </script>

Answer 2

Попробуйте поставить значения, как по умолчанию (я так понял, это длительность перехода и длительность слайда). Значения в миллисекундах, а у вас там какие-то 0.1 - это что, 0.1 мс? Попробуйте поставить так:

   <script>   $("#slideshow").craftyslide({   'width': 640,   'height': 400,   'pagination': false,   'fadetime': 300,   'delay': 5000  });   </script>

 

Comments

у вас в теле слайдера стоит такой код  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>. Уберите его,это библиотека jQuery, причем какая-то древняя версия. А на юкоз сайтах она по умолчанию уже подключена, т.е. получается, у вас на сайте она 2 раза подключена, а так не надо делать. Когда уберёте, попробуйте поставить то, что я вам изначально советовал. (см. выше)

Answer 3

window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},3000);

Comments

а куда это вставить? и если возможно, сможете объяснить что и это и показать в более ясной форме. буду весьма благодарен