X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> 2 и более слайдера на одной странице
VeronikaBens
VeronikaBens
Topic Starter сообщение 19.2.2015, 11:40; Ответить: VeronikaBens
Сообщение #1


Добрый день!
Очень нужна помощь. Ситуация в следующем. Есть код слайдера:
<div class="slider">
<input type="radio" name="slide_switch" id="id7" checked="checked">
<label for="id7">
<img src="assets/images/planirovka/project_2/1.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/1.jpg" ><input type="radio" name="slide_switch" id="id8" >
<label for="id8">
<img src="assets/images/planirovka/project_2/2.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/2.jpg" ><input type="radio" name="slide_switch" id="id9" >
<label for="id9">
<img src="assets/images/planirovka/project_2/3.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/3.jpg" ><input type="radio" name="slide_switch" id="id10" >
<label for="id10">
<img src="assets/images/planirovka/project_2/4.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/4.jpg" ><input type="radio" name="slide_switch" id="id11" >
<label for="id11">
<img src="assets/images/planirovka/project_2/5.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/5.jpg" ><input type="radio" name="slide_switch" id="id12" >
<label for="id12">
<img src="assets/images/planirovka/project_2/6.jpg" width="100" >
</label>
<img src="assets/images/planirovka/project_2/6.jpg" >
</div>


Код CSS:
[CSS].slider {
width:800px;
position: relative; /* Вместо высоты(height) мы используем отступ */
padding-top:520px; /* Этот отступ помогает правильно расположить миниатюры*/
margin:100px auto; /* Добавим тени, можно убрать */
box-shadow:0 10px 20px -5px rgba(0,0,0,0.75);
margin-bottom:50px;
margin-top:50px;
height:630px;
}

.slider > img{
position: absolute;
left:0; top:0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Отступы миниатюр*/
margin:18px 0 0 18px;
border:3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
/* Прозрачность = low opacity */
opacity:0.6;
}
.slider label img {
display: block;
}

/* Эффекты реагирования на клик мышкой по миниатюре */
.slider input[name='slide_switch']:checked+label {
border-color:#666;
opacity:1;
}/* Теперь клик по любой из миниатюр убирает его прозрачность */
/* Работа над самими изображениями */
.slider input[name='slide_switch']~ img {
opacity:0;
transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+img {
opacity:1;
transform: scale(1);
}[/CSS]

И JS, который берется отсюда: <script src="http://thecodeplayer.com/uploads/js/prefixfree.js"type="text/javascript"></script>

Задача на странице должны выводить несколько слайдеров.

Проблема если выводить несколько слайдеров, то первое изображение будет активно только у одного из слайдера. Чтобы заработал другой слайдер, нужно по нему кликнуть мышью.

Вопрос Как сделать несколько АКТИВНЫЙ слайдеров?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
teleoperator
teleoperator
сообщение 19.2.2015, 13:38; Ответить: teleoperator
Сообщение #2


теоретически это не все, должен быть еще js-код инициации слайдера
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
VeronikaBens
VeronikaBens
Topic Starter сообщение 19.2.2015, 14:09; Ответить: VeronikaBens
Сообщение #3


(teleoperator @ 19.2.2015, 15:38) *
теоретически это не все, должен быть еще js-код инициации слайдера


Да, теоретически... Но в указаниях к слайдеру ничего такого не было и он работает так, как описано в теме :niasilil:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 19.2.2015, 17:39; Ответить: Degradator
Сообщение #4


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1352 26.3.2024, 21:43
автор: c4p1t4l15t
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыНакрутка ПФ сайта в Яндекс. Опыт более 2 лет
Профессиональная Накрутка Позиций
51 EnotPF 47778 27.8.2023, 3:11
автор: unixway
Горячая тема (нет новых ответов) Занимаюсь добычей качественного контента из Вебархива. Опыт уже более трех лет
Предоставляю только качественный, читабельный контент.
62 kuz999 37957 27.7.2023, 13:55
автор: kuz999
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыБолее 200 профилей за 300 руб.
18 dizaynmaks 5240 8.7.2023, 10:32
автор: wars
Открытая тема (нет новых ответов) Сделать правки на html-странице
5 TABAK 2261 20.5.2023, 10:45
автор: EvilGomel


 



RSS Текстовая версия Сейчас: 28.3.2024, 19:08
Дизайн