Jquery slider с ползунком
Здравствуйте помогите пожалуйста сделать точно такой же слайдер фотографий, спасибо всем отозвавшимся
http://www.pacorabanne.com/invictus/#!/webshow/ep29 |
imediasun1, ты узнай сначала сколько заплатил за это владелец того сайта. :lol:
|
100 тысяче долоровые проекты приходится копировать за 500, поэтому вопрос не в этом а в том есть ли среди посетителей данного ресурса спецы обладающие нужными знаниями чтобы бесплатно ими поделиться, ну или за вознаграждение в разумных пределах если это уроки частные
|
выше кагбе намекают - тот слайдер довольно сложный
и бесплатно его вряд ли кто сделает. а тем более объяснит код |
Цитата:
|
прошу без оскорблений, надо иметь элементарное уважение к собеседнику, я понимаю что слайдер сложный и бесплатно не прошу чтобы мне помогали, вопрос в разумности ценового подхода - 30 долларов час это очень много для меня
|
Да ну этот слайдер, громозкий он, от такого количества эффектов начинает браузер подтормаживать.
|
Ruslan_xDD,
А ты разбираешься как его сделать? |
без ползунка (с кнопками "вперед" - "назад") там кода на полчаса отсилы:
Располагаете один див перед другим. Нижний растянут по ширине, верхний фиксируется по центру над ним. В каждом находится лента фотографий. При клике смещаете эту ленту на ширину фотографии. Ползунок - тоже несложно, но вам придется подучить драг-энд-дропы. Собственно, вот... поделился бесплатно знаниями :) |
BETEPAH,
вы уверены что на этом сайте именно так осуществлено, мне именно такая реализация нужна |
Цитата:
Я написал так, как сделал бы сам. Здесь дольше копаться в чужом коде, чем самому написать. Выглядеть будет - мама не отличит, если постараетесь. |
BETEPAH,
Помогите пожалуйста с реальным осуществлением, я буду благодарен очень, часик потратите будет детям на конфеты |
Цитата:
Так а в чем помощь-то еще нужна. Я написал, что делать. Начинайте и показывайте, что получилось - поможем. Если человек хочет научиться, ему здесь, на форуме, и даром помогают. А если хочет, чтоб делали за него, то здесь уже конфетами не обойтись - расценки примерные выше указали. |
объясняйте тогда пожалуйста сразу с ползунком
|
вы сначала верстку сделайте :)
А потом вот: http://api.jqueryui.com/draggable/ А если хотите прям вообще научиться, то вот алгоритм (когда-то писал таскаемые окошки): - вешаете el.onmousedown = el.ontouchstart =..., который ловит координаты мышки и ставит метку, что началось событие таскания - затем .onmousemove и .ontouchmove чтоб менять видимое положение ползунка с пересчетом расстояния от начала таскания и вычисления положения и в зависимости от положения переключения фотографий. - и в конце .onmouseup и .ontouchend чтоб понять, что перетаскивание закончилось. Тачсобытия само собой, если нужна поддержка смартфонов и планшетов |
это jquery? и как фотки едут влево и право какой функцией?ui-slider здесь нужен?
|
Цитата:
Цитата:
Цитата:
|
А это не то что надо? http://jqueryui.com/slider/#side-scroll
|
Цитата:
|
вряд ли подойдет, слишком просто, а на том сайте там поинтересней, можно в личку написать?
|
Цитата:
Вы лучше код в песочницу пишите и давайте ссылку на форуме. Когда будет время и интерес, помогу, чем смогу. |
Цитата:
|
кстати при прокрутке позлузна в этом слайдере идут GET запросы или это мне кажется ? в консоли где часть network запросы не идут, но в адресной строке ссылки меняются на соответсвующие при передвижении ползунка. Кто - нибудь понял что за магия там творится ?
|
Песочница
http://learn.javascript.ru/play/WBZeMb Вопрос номер один - Как сделать чтобы при повторном нажатии кнопок анимация начиналась с того места на котором закончилась а не заново? Вопрос номер два как сделать постепенное замедление при остановке и даже небольшое реверсивное движение назад на 5%. Вопрос номер 3- Как сделать так чтобы анимация не останавливалась при нажатой кнопке. А вообще то надо просто как здесь, с ползунком и в точности как здесь http://www.pacorabanne.com/invictus/#!/candidates Помогите пожалуйста кто чем может |
Вот, набросал самый простой вариант слайдера: http://learn.javascript.ru/play/f8FqG
|
Часовой пояс GMT +3, время: 06:23. |