Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
1

Стилизация кнопок карусели

15.11.2018, 13:08. Показов 2376. Ответов 12
Метки нет (Все метки)

Здравствуйте. Пользуюсь плагином owl carusel 1 версии. Возникла необходимость стилизации каждой точки навигации. Точнее мне нужно к каждой точке добавить свой текст. Скрин точек прикладываю. Если чего-то не хватает, чтобы помочь, скину.

Надеюсь на вашу помощь.
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Изображения
 
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.11.2018, 13:08
Ответы с готовыми решениями:

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

Стилизация кнопок
Можно ли как-нибудь поменять кнопку <input type="file" name="attach"> на свою картинку? такой же...

Стилизация кнопок на ие8
Здравствуйте. Вот начал стилизовать кнопки, но заметил что на css ие 8 не получается стилизовать, с...

Стилизация кнопок свернуть/развернуть/закрыть
Решил сделать свой стиль кнопок: закрыть и свернуть, нарисовал в фотошопе и поместил их с помощью...

12
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
15.11.2018, 13:20  [ТС] 2
Вот файлы скрипта. Может в JS файл что-то добавить?
0
Вложения
Тип файла: zip файлы плагина.zip (10.9 Кб, 1 просмотров)
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 607
15.11.2018, 14:42 3
Вы лучше сюда код выложите, многие не будут качать странную папку на комп)
0
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
15.11.2018, 15:06  [ТС] 4
Не дает выложить! Там код на 1600 строк.

Добавлено через 1 минуту
Kraken73, вы можете помочь? Вообще никак додуматься не могу. Знания JS касательные по этому не справляюсь.

Очень надеюсь на вашу помощь.
0
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 607
15.11.2018, 15:26 5
Пурыга Никита,
ну примерно вот так
это типо точки слайдера
HTML5
1
2
3
4
5
6
7
<div class="dots">
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</div>
тут уже стилизованно должно быть в owl
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  list-style: none;
  padding-top: 20px;
}
 
.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: yellow;
  margin: 0 5px;
  position: relative;
}
.dots-info {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}
Javascript
1
2
3
$('.dots').find('.dot').each(function(i) {
  $(this).append('<div class="dots-info">'+i+'</div>');
});
0
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
15.11.2018, 15:34  [ТС] 6
А селекторы вы проставили на основе кода самого плагина?
0
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 607
15.11.2018, 15:39 7
Пурыга Никита,
просто рандомные выставил, посмотрите какие там и поставьте, .dots-info - назовите как вам удобно
0
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
15.11.2018, 15:46  [ТС] 8
Не заработало. Проставил селектор родительского блока для точек и селектор кнопки. Там вот какую структуру генерирует сам код (скрин приложил). К активному блоку добавляет класс active (подчеркнул). А в родительском блоке для всех точек генерирует блок с классом owl-page, в него кладет span, который я так понял он стилизует.

Видимо нужно создать массив значений которые хочу видеть над каждой точкой и в span генерировать болок, который отдельно в CSS стилизовать + заносить поочередно в каждый из них 1 элемент массива.

Можете помочь в реализации? Просто в JAVA программировании я на высоком уровне а до JS не добрался.
0
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
15.11.2018, 15:47  [ТС] 9
Вот скрин
0
Миниатюры
Стилизация кнопок карусели  
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 607
15.11.2018, 15:56 10
Цитата Сообщение от Пурыга Никита Посмотреть сообщение
Можете помочь в реализации
Код выше, если вам надо в span добавить блок, то
Javascript
1
2
3
4
var arr = [1,2,3,4,5,6,7,8];
$('.owl-pagination').find('.owl-page').each(function(i) {
  $(this).children('span').append('<div class="dots-info">'+arr[i]+'</div>');
});
0
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
15.11.2018, 16:05  [ТС] 11
А это не надо в какой-то цикл поместить?

Добавлено через 6 минут
Просто не работает. Скрипт есть, а заполнение не происходит
0
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 607
16.11.2018, 07:54 12
.each() - цикл
у меня все работает с этим скриптом тык
0
39 / 9 / 1
Регистрация: 16.02.2018
Сообщений: 251
16.11.2018, 09:18  [ТС] 13
Хорошо. Спасибо. Наверное сам скрипт деактивирует внешние вмешательства.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.11.2018, 09:18

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Создать массив кнопок, для каждой кнопок будет одинаковый обработчик
Всем привет! Нужна помощь в реализации такой задачи. Нужно создать массив кнопок, для каждой...

Из созданного массива кнопок одна из кнопок (9) должна выполнять метод Percent
Из созданного массива кнопок одна из кнопок (9) должна выполнять метод Percent, но после запуска...

Имитация нажатия кнопок клавиатуры нажатиями кнопок в окне
Скажите,как заменить нажатие кнопок клавиатуры на нажатие кнопок в окне?

Ремонт кнопок тайч-пада и клавиатуры (замена кнопок)
Доброго времени суток. У меня появился нетбук ASUS EeePC 900 HA с несколькими проблемами: на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.