Question

Хочу сделать слайдер на сайте http://yraaa.ru/search/?x=0&y=0&q=%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80 - 3 по списку, что мне для этого необходимо сделать?

Comments

все работает как положено, обновите несколько раз страницу или выполните комбинацию клавиш CTRL+F5

Answer 1

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

Прежде всего конечно установить стили слайдера себе в таблицу стилей CSS, после в верхней части сайта или в нужно месте установить код с первого и второго шага, то есть код слайдера и сам скрипт управляющий работой слайдера.

И конечно не маловажный этап, скачать файлы к слайдеру и загрузить себе в файловый менеджер и заменить ссылку на скрипт на свою:

<script type="text/javascript" src="jquery18.js"></script> 

вот и вся установка, ничего сложного здесь нет.

Comments

а куда именно вставлять в в таблицу стилей CSS? не получается у меня почему-то.... не работает слайдер и все(( и куда вставлять коды с певрого и второго шага. я вставляю все коды, но у меня выходят просто фото друг за другом без слайдера http://edu-mezhgorie.ucoz.ru/index/0-2

---

Айгуль Рыжова,

стили в таблицу стилей - http://edu-mezhgorie.ucoz.ru/panel/?a=tmpl;m=3;t=3 , а скрипт там же где и основной код слайдера

---

Yuri_Geruk,

я понимаю, что в таблицу стилей, а в какое именно место? нет значения? и куда вставлять коды с певрого и второго шага. я вставляю все коды, но у меня выходят просто фото друг за другом без слайдера http://edu-mezhgorie.ucoz.ru/index/0-2

---

Айгуль Рыжова,

1. нет значения, в самый низ конечно желательно, чтобы вы случайно чего не зацепили

2. Не работает из-за того, что скрипт вы себе на фтп в файловый менеджер не загрузили:

<script src="box_slider.js"></script>

просто скопировали скрипт, но не загрузили и ссылку на скрипт не прописали и соответственно он не работает в итоге и слайдер не будет работать.

---

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

---

Айгуль Рыжова,

1. Ссылку нужно прописать вот здесь <script src="box_slider.js"></script>

2. Значит то, что вы на сайте где нашли слайдер, не скачали архив который там прилагается где и имеется файл - box_slider.js его нужно загрузить на фтп вашего сайта - http://edu-mezhgorie.ucoz.ru/panel/?a=fm

3. Фтп это файловый менеджер вашего сайт где вы можете загрузить файлы - http://edu-mezhgorie.ucoz.ru/panel/?a=fm

---

Yuri_Geruk,

все сделала, но у меня кусочки какие-то отдельно появились и я не могу их убрать(( http://edu-mezhgorie.ucoz.ru/index/0-2 и причем эти кусочки меня.тся красивее, чем сами фото

---

Айгуль Рыжова,

вы же даже стили не установили вот сюда http://edu-mezhgorie.ucoz.ru/panel/?a=tmpl;m=3;t=3 в самый низ:

/* Slider */ 
#slider { 
  display:block; 
  border:4px solid #000; 
  width:448px; /* Ширина слайдера */ 
  height:286px; /* Высота слайдера */ 
  margin:0 auto; 
  background:white url('nivo-loading.gif') no-repeat 50% 50%; 
  overflow:hidden; 
  position:relative; 
} 

/* Для подписи */ 
#slider figcaption { 
  display:block; 
  background-color:black; 
  font:normal normal 11px Arial,Sans-Serif; 
  color:white; 
  opacity:.8; 
  padding:10px 15px; 
  position:absolute; 
  right:0; 
  bottom:-100px; /* Скрытие заголовка */ 
  left:0; 
  z-index:44; 
} 

#slider img { 
  display:block; 
  margin:0 0; 
  width:448px; /* Ширина слайда*/ 
  height:286px; /* Высота слайда */ 
  position:absolute; 
  top:0; 
  left:0; 
} 

/* Навигация */ 
#slider-nav { 
  display:block; 
  position:absolute; 
  top:10px; 
  right:10px; 
  z-index:99; 
} 

#slider-nav a { 
  display:block; 
  float:left; 
  width:10px; 
  height:10px; 
  background-color:#111; 
  font-size:0; 
  color:transparent; 
  overflow:hidden; 
  text-indent:-99px; 
  margin:0 2px 0 0; 
  border:2px solid white; 
  border-radius:100%; 
  box-shadow:0 1px 2px rgba(0,0,0,.4); 
} 

#slider-nav .active { 
  background-color:#2589B4; 
} 

/* Скрываем все элемента JQuery слайдера до полной загрузки */ 
#slider .container, #slider figcaption {display:none} 
#slider-nav {opacity:0} 

Этот скрипт вы установили вот так:

<script type="text/javascript" src="jquery18.js"></script>

а нужно:

<script type="text/javascript" src="/jquery18.js"></script>

с таблицы стилей в самом низу удалите этот бред:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
 <script src="box_slider.js"></script> 
 <script> 

 $(function () { 

 var $box = $('#box') 
 , $indicators = $('.goto-slide') 
 , $effects = $('.effect') 
 , $timeIndicator = $('#time-indicator') 
 , slideInterval = 5000; 

 var switchIndicator = function ($c, $n, currIndex, nextIndex) { 
 $timeIndicator.stop().css('width', 0); 
 $indicators.removeClass('current').eq(nextIndex).addClass('current'); 
 }; 

 var startTimeIndicator = function () { 
 $timeIndicator.animate({width: '680px'}, slideInterval); 
 }; 

 // initialize the plugin with the desired settings 
 $box.boxSlider({ 
 speed: 1000 
 , autoScroll: true 
 , timeout: slideInterval 
 , next: '#next' 
 , prev: '#prev' 
 , pause: '#pause' 
 , effect: 'scrollVert3d' 
 , blindCount: 25 
 , onbefore: switchIndicator 
 , onafter: startTimeIndicator 
 }); 

 startTimeIndicator(); 

 // pagination isn't built in simply because it's easy to 
 // roll your own with the plugin API methods 
 $('#controls').on('click', '.goto-slide', function (ev) { 
 $box.boxSlider('showSlide', $(this).data('slideindex')); 
 ev.preventDefault(); 
 }); 

 $('#effect-list').on('click', '.effect', function (ev) { 
 var $effect = $(this); 

 $box.boxSlider('option', 'effect', $effect.data('fx')); 
 $effects.removeClass('current'); 
 $effect.addClass('current'); 

 switchIndicator(null, null, 0, 0); 
 ev.preventDefault(); 
 }); 
 
 }); 
</script>

в стили ставятся лишь стили, не скрипты.