Здравствуйте уважаемые начинающие веб-мастера.
Самый простой слайдер на чистом javascript с очень простым кодом, который работает во всех шаблонах, на которых я его тестировал.
Картинок можно добавлять сколько угодно. Все они будут появляться с заданным интервалом.



HTML
<div id="carousels">
<div class="carousel demonstration"><img src="images/1.jpg"></div>
<div class="carousel"><img src="images/2.jpg"></div>
<div class="carousel"><img src="images/3.jpg"></div>
</div>
Javascript
<script>
var carousels = document.querySelectorAll('#carousels .carousel');
var currentCarousel = 0;
var carouselInterval = setInterval(nextCarousel,5000); /* Интервал между картинками */
function nextCarousel(){
carousels[currentCarousel].className = 'carousel';
currentCarousel = (currentCarousel+1)%carousels.length;
carousels[currentCarousel].className = 'carousel demonstration';
}
</script>
CSS
#carousels{
position: relative;
}
.carousel{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 3s; /* Время появления картинки */
}
.demonstration{
opacity: 1;
}
Желаю творческих успехов.
А ну-ка, что там ещё интересного
Слайдер на чистом CSS
Дополнительная панель для сайта
Увеличение картинки по клику
Счётчик обратного отсчёта
Пылающий заголовок
Растягивающийся блок
В раздел
Не помучаться, а пошевелить мозгами, что вы и сделали. Молодец.
Это что бы помучаться, вы забыли здесь полностью указать код CSS :
»
#carousels{
position: relative;
width: 340px;
height: 280px;
margin: 0 auto;
»
????
Без конкретной ширины и высоты получается кака…
Ваня, а ты разве не видишь что он работает?
Код в примере так как он написан — не будет работать. У автора нет понимания основ JS
всем привет я наверное не один такой . вставил код js все огонь работает, но мне понадобилось несколько каруселек и тут фиг-вам, работают по очереди.
Подскажи,что поменять в коде?
Пользуйтесь на здоровье
Уважаемый автор. Весьма был доволен Вашим кодом для простого слайдера.
С уважением, Сергей, 67 лет, г. Москва.
Попробуйте вот в таком виде. Я кое что исправил.
По поводу JS, вам лучше вот сюда. Я наверно так подробно не смогу всё объяснить так как сам изучаю его методом тыка. Продуктивный метод между прочим.
Здравствуйте, Сергей. Мой первый сайт не в WordPress, поэтому шорткод мне не нужен. Я пишу сайт вручную. Вставила туда карусель от Вас на css. Всё отлично работает. Попробовала на JS — ничего. Ну рано, так рано. Всё равно спасибо, много интересного на Вашем сайте.
Наверное Наташ чуть рановато. Эта карусель сделана для песочницы, т.е чистый код. В шаблоне можно попробовать вставить весь код, и css и html и script в шёрткод, и вывести в нужном месте. Если же вставлять этот слайдер в шапке, то можно опять попробовать шёрткод в хеадер, или html в header, scc в style, а скрипт через функцию в functions.php. Короче дело ясное, что дело тёмное? Так для каждого шаблона ещё будут нюансы в которых сначала надо разобраться. Попробуйте через шёрткод, если не получится, оставьте до приобретения более основательных знаний, а то просто не поймёте меня. Вообще вставить в ручную карусель в шаблон под силу только не плохому программисту.
Все скопировала, css в файл css, картинки в контент, JavaScript в html файл в .
Ничего не заработало. Картинки лежат в контенте спокойненько. Ничего не движется.
Что не так? (делаю первый сайт, поэтому мало что понимаю, в джаваскрипт вообще ничего)