Вставить фото так, чтобы они сменяли друг друга

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

Ответов: 2

голоса: +2
 
Лучший ответ
Посмотрите это, http://kenwheeler.github.io/slick/ многофункциональный слайдер.
| Автор:
Выбор ответа лучшим | | Автор: Олеся С.
замечательно. Теперь попробую разобраться что куда вставлять. Я так понимаю, что под каждым слайдером код CSS, который нужно вставлять в самый верх?
В любое место, просто пометь его таким кодом
<!--- тут мой слайдер---> тут css<!--- тут конец моего слайдера--->
Так код ксс вы найдете быстрее.
голоса: +4

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

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; 

 

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