Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
0 / 0 / 0
Регистрация: 25.11.2014
Сообщений: 7

Навигация для слайдера

25.11.2014, 19:33. Показов 2001. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Используется готовый способ реализации слайдера на сайте отсюда. Мне нужно реализовать всего две кнопки навигации - вперед / назад. Для навигации запланировал использовать кнопки со стилями в нужном мне расположении
<a href="" onclick=''><div class="navleft"></div></a>
<a href="" onclick=''><div class="navright"></div></a>
Я так понял, что мне придется писать две доп. функции для кнопки вперед / назад. К сожалению моих знаний не хватает и посему прошу вашей помощи!

P.S код используемого мною скрипта
JavaScript
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
$(document).ready(function() {
 $(".slider").each(function () { // обрабатываем каждый слайдер
  var obj = $(this);
  $(obj).append("<div class='nav'></div>");
  $(obj).find("li").each(function () {
   $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
   $(this).addClass("slider"+$(this).index());
  });
  $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
 });
});
function sliderJS (obj, sl) { // slider function
 var ul = $(sl).find("ul"); // находим блок
 var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
 var step = $(bl).width(); // ширина объекта
 $(ul).animate({marginLeft: "-"+step*obj}, 1000); // 500 это скорость перемотки
}
 
//window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},5000);
 
//window.next(function(){var n = $(".slider .nav span.on").next();n.click();},1);
 
 
 
 
 
$(document).on("click", ".slider .nav span", function() { // slider click navigate
 var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
 $(sl).find("span").removeClass("on"); // убираем активный элемент
 $(this).addClass("on"); // делаем активным текущий
 var obj = $(this).attr("rel"); // узнаем его номер
 sliderJS(obj, sl); // слайдим
 return false;
});
Добавлено через 7 часов 9 минут
Пробовал при нажатии на кнопку что-то типа
HTML5
1
2
<a href="" onclick='function(){var n = $(".slider .nav span.on").next();n.click();};'><div class="navleft"></div></a>
<a href="" onclick='function(){var n = $(".slider .nav span.on").prev();n.click();};'><div class="navright"></div></a>
Естественно не работает, но вопрос, в правильном ли я двигаюсь направлении?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
25.11.2014, 19:33
Ответы с готовыми решениями:

навигация для слайдера
Здравствуйте, знатоки. Подскажите, как создать вот такую навигацию

Вёрстка слайдера | Автоматическая прокрутка слайдера
Здравствуйте! ;) Вот на стадии разработки сайта случилась такая проблема которую не могу решить уже примерно 3-4 дня как минимум. Пытался...

Таймер для слайдера
Доброго времени. Есть слайдер надо повесить какой-нить таймер... пробывал через $('#slideInner').everyTime(1000, MoveSlider); ...

1
0 / 0 / 0
Регистрация: 25.11.2014
Сообщений: 7
27.11.2014, 14:41  [ТС]
Плачу 50 рублей на yandex деньги или webmoney первому человеку за помощь! Помогите пожалуйста!

Добавлено через 18 часов 14 минут
Решено.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
27.11.2014, 14:41
Помогаю со студенческими работами здесь

Функция для слайдера
Всем привет! Прошу помощи подсказать, как написать одну функцию для слайдера. Есть сайт http://expert-grant.ru/, там есть слайдер. Нужно,...

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

Уникальный пейджер для слайдера
Есть ли какие идеи как реализовать подобную прокрутку для пейджера, я искал похожие слайдеры, что то не нашел, так же пытался стилизованный...

Дополнительная обертка для слайдера
Столкнулся с такой ситуацией: делал слайдер точно по примеру, использовал owl carousel, но у меня карусель не отображалась, в итоге...

Выбор плагина для слайдера
Подскажите пожалуйста какой плагин лучше использовать для реализации данного слайдера?


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&amp;d=1772460536 Одним из. . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru