Слайдер CSS3 без JS, добавление ссылок

@lying · Регистрация: 11.06.2016

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

Хочу поставить на страницу такой CSS слайдер, т.к. не знаю JavaScript -
CSS3 image slider with stylized thumbnails Код тут: http://thecodeplayer.com/walkt... thumbnails
По дизайну он мне очень подходит, но есть проблема - я хочу добавить ссылки, чтобы при клике на слайд переходило на нужную страницу сайта, но обертывание <img> тегом <a> сбивает слайд вниз, а сама ссылка добавленная к одной картинке почему-то применяется ко всем слайдам сразу.
Может быть кто-то поможет мне, как решить эту проблему?

@monochromer · 13.08.2016, 13:51

Так надо стили с картинок перекинуть на ссылки, а картинки растянуть.

@lying · 13.08.2016, 14:11 **[ТС]**

чё-то не выходит... я так поняла в css нужно .slider>img заменит на .slider>a, а внутри слайдов вместо картинок <img> сделать ссылки оборачивающие картинки, но выходят пустые блоки почему-то.

Добавлено через 8 минут
ой всё. ниче не выходит с этим слайдером. просто поставлю другой. я повелась на компактность кода, а зря.

@Fedor92 · 13.08.2016, 14:31

lying, как вариант:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
    <title>example</title>
    <meta charset="utf-8">
    <style>
        /*Time for the CSS*/
        * {margin: 0; padding: 0;}
        body {background: #ccc;}
        .slider{
            width: 640px; /*Same as width of the large image*/
            position: relative;
            /*Instead of height we will use padding*/
            padding-top: 320px; /*That helps bring the labels down*/
            
            margin: 100px auto;
            
            /*Lets add a shadow*/
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
        }
 
 
        /*Last thing remaining is to add transitions*/
        .slider>img{
            position: absolute;
            left: 0; top: 0;
            transition: all 0.5s;
            cursor:pointer
        }
 
        .slider input[name='slide_switch'] {
            display: none;
        }
 
        .slider label {
            /*Lets add some spacing for the thumbnails*/
            margin: 18px 0 0 18px;
            border: 3px solid #999;
            
            float: left;
            cursor: pointer;
            transition: all 0.5s;
            
            /*Default style = low opacity*/
            opacity: 0.6;
        }
 
        .slider label img{
            display: block;
        }
 
        /*Time to add the click effects*/
        .slider input[name='slide_switch']:checked+label {
            border-color: #666;
            opacity: 1;
        }
        /*Clicking any thumbnail now should change its opacity(style)*/
        /*Time to work on the main images*/
        .slider input[name='slide_switch'] ~ img {
            opacity: 0;
            transform: scale(1.1);
        }
        /*That hides all main images at a 110% size
        On click the images will be displayed at normal size to complete the effect
        */
        .slider input[name='slide_switch']:checked+label+img {
            opacity: 1;
            transform: scale(1);
        }
        /*Clicking on any thumbnail now should activate the image related to it*/
 
        /*We are done :)*/
</style>
</head>
<body>
<div class="slider">
    <input type="radio" name="slide_switch" id="id1"/>
    <label for="id1">
        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" onclick="location.href='http://google.com'"/>
    <input type="radio" name="slide_switch" id="id2" checked="checked"/>
    <label for="id2">
        <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" onclick="location.href='http://google.com'"/>
    
    <input type="radio" name="slide_switch" id="id3"/>
    <label for="id3">
        <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" onclick="location.href='http://google.com'"/>
    
    <input type="radio" name="slide_switch" id="id4"/>
    <label for="id4">
        <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" onclick="location.href='http://google.com'"/>
    
    <input type="radio" name="slide_switch" id="id5"/>
    <label for="id5">
        <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" onclick="location.href='http://google.com'"/>
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

@lying 3 / 3 / 1 Регистрация: 11.06.2016 Сообщений: 33

	Слайдер CSS3 без JS, добавление ссылок 13.08.2016, 13:08. Показов 1880. Ответов 3 Метки css, css3. профессионалы, слайдер (Все метки) Хочу поставить на страницу такой CSS слайдер, т.к. не знаю JavaScript - CSS3 image slider with stylized thumbnails Код тут: http://thecodeplayer.com/walkt... thumbnails По дизайну он мне очень подходит, но есть проблема - я хочу добавить ссылки, чтобы при клике на слайд переходило на нужную страницу сайта, но обертывание <img> тегом <a> сбивает слайд вниз, а сама ссылка добавленная к одной картинке почему-то применяется ко всем слайдам сразу. Может быть кто-то поможет мне, как решить эту проблему? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	13.08.2016, 13:51
	Так надо стили с картинок перекинуть на ссылки, а картинки растянуть. 0

@lying 3 / 3 / 1 Регистрация: 11.06.2016 Сообщений: 33
	13.08.2016, 14:11 [ТС]
	чё-то не выходит... я так поняла в css нужно .slider>img заменит на .slider>a, а внутри слайдов вместо картинок <img> сделать ссылки оборачивающие картинки, но выходят пустые блоки почему-то. Добавлено через 8 минут ой всё. ниче не выходит с этим слайдером. просто поставлю другой. я повелась на компактность кода, а зря. 0

Слайдер CSS3 без JS, добавление ссылок

Решение