Слайдер без JS

@Pro100kvachina · Регистрация: 23.01.2013

Студворк — интернет-сервис помощи студентам

приветствую, понадобилось сделать слайдер, но без JS
Вот сам слайдер, он без оформления просто для примера

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="slider">
    <section id="slide1">
        <h1>CSS3 и HTML5</h1>
        <p>Пример 1 бла бал бля</p>
        <img src="foto3.png">
    </section>
    <section id="slide2">
        <h1>CSS3 и HTML5</h1>
        <p>Пример 2 бла бал бля</p>
        <img src="foto4.png">
    </section>
    <section id="slide3">
        <h1>CSS3 и HTML5</h1>
        <p>Пример 3 бла бал бля</p>
        <img src="foto5.png">
    </section>
 
    <ul>
        <li><a href="#slide1">slide1</a></li>
        <li><a href="#slide2">slide2</a></li>
        <li><a href="#slide3">slide3</a></li>
    </ul>
</div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
section{
    position:absolute;
    top:0;
    left:20px;
    opacity:0;
    transition:all 1s linear;
}
section:target{
    opacity:1;
}
.slider{
    width:300px;
    height:265px;
    position:relative;
    border:1px solid red;
}
ul{
    position:absolute;
    left:20px;
    top:240px;
}
li{
    float:left;
    margin:0 10px;
}
*{
    padding:0;
    margin:0;
}

есть три секции, при нажатие она появляется, как сделать что бы автоматически переключались секции, без js

@StopSmell · 30.09.2013, 12:39

Собственно говоря у вас уже практически все есть. Обернули слайды в slider_wrapper и прописали ему стили

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="slider">
    <div class="slider_wrapper">
        <section id="slide1">
            <h1>CSS3 и HTML5</h1>
            <p>Пример 1 бла бал бля</p>
            <img src="foto3.png">
        </section>
        <section id="slide2">
            <h1>CSS3 и HTML5</h1>
            <p>Пример 2 бла бал бля</p>
            <img src="foto4.png">
        </section>
        <section id="slide3">
            <h1>CSS3 и HTML5</h1>
            <p>Пример 3 бла бал бля</p>
            <img src="foto5.png">
        </section> 
    </div>
    <ul>
        <li><a href="#slide1">slide1</a></li>
        <li><a href="#slide2">slide2</a></li>
        <li><a href="#slide3">slide3</a></li>
    </ul>
</div>

CSS
1
2
3
4
5
.slider_wrapper {
  overflow: hidden;
  width: 250px;
  height: 67px;        
}

@Pro100kvachina · 30.09.2013, 12:41 **[ТС]**

а нет Вы немного не поняли ))
загрузилась страничка показывается первая картинка в слайде, после 5 секунд показывается другая картинка,ещё через 5 секунд другая картинка,и так заново циклом

@Pro100kvachina · 30.09.2013, 13:20 **[ТС]**

попробывал сделать вот так

CSS
1
2
3
4
5
6
7
@keyframes anim {
from {margin-left:3px;}
to {margin-left:300px;}
}
img {
animation:anim 3.5s 100000000000000000000;
}

уже ближе к желаемому результату))
тут анимируется картина, просто прячется за границе, да и добавил вот это

CSS
1
.slider{overflow:hidden;}

но как сделать теперь переключалку картинок )))

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Pro100kvachina 4 / 4 / 0 Регистрация: 23.01.2013 Сообщений: 197
	30.09.2013, 12:41 [ТС]
	а нет Вы немного не поняли )) загрузилась страничка показывается первая картинка в слайде, после 5 секунд показывается другая картинка,ещё через 5 секунд другая картинка,и так заново циклом 0