Question

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

Answer 1

Посмотрите это, http://kenwheeler.github.io/slick/ многофункциональный слайдер.

Comments

замечательно. Теперь попробую разобраться что куда вставлять. Я так понимаю, что под каждым слайдером код CSS, который нужно вставлять в самый верх?

---

В любое место, просто пометь его таким кодом
<!--- тут мой слайдер---> тут css<!--- тут конец моего слайдера--->
Так код ксс вы найдете быстрее.

Answer 2

Как вариант, вот вам пример простенького слайдера.

1. Добавить в соответствующее место в шаблоне сам код слайдера:

<div class="slidshow"> 

<img src="ссылка на изображение слайд"> 

<img src="ссылка на изображение слайд"> 

<img src="ссылка на изображение слайд"> 

<img src="ссылка на изображение слайд">

<img src="ссылка на изображение слайд">  итд можно далее продолжать добавлять изображения(конструкция очень проста)

</div> 

<script type="text/javascript" src="http://s4.ucoz.net/src/jquery-1.7.2.js"></script>

$(function(){ 

$('.slidshow img:gt(0)').hide(); 

setInterval(function(){ 

$('.slidshow :first-child').fadeOut() 

.next('img').fadeIn() 

.end().appendTo('.slidshow');},3000); 

});

</script> 

2. Добавить в таблицу стилей CSS стили для слайдера:

.slidshow { 

position:relative; 

} 

.slidshow img { 

position:absolute; 

left:0; 

top:0; 

width:500px; 

height:375px; 

} 

 

Comments

почему-то не получилось. Картинки либо друг на друге, либо рядом и видна часть первого кода
$(function(){ $('.slidshow img:gt(0)').hide(); setInterval(function(){ $('.slidshow :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.slidshow');},3000); });
Вставляла в первый контейнер до <!-- <block1> --> и после, но ни так ни так не помогло. В CSS прописывала и в общий и в интернет-магазина...