Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Помогите, пожалуйста, со слайдером

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
Klinch
Отправлено: 18 Октября, 2013 - 13:03:30
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
Пытаюсь сделать, чтобы слайдер двигал картинку и фон. Делаю так:

CODE (html):
скопировать код в буфер обмена
  1. <div id="sm_slider">
  2.    <ul>
  3.         <li><div class="wave"><img src="/images/k1.png" alt="Охраняем дом, пока Вы отдыхаете!" /></div></li>
  4.         <li><div class="wave"><img src="/images/k2.png" alt="Охраняем дом, пока Вы отдыхаете!" /></div></li>
  5.         <li><div class="wave"><img src="/images/k3.png" alt="Охраняем дом, пока Вы отдыхаете!" /></div></li>
  6.         <li><div class="wave"><img src="/images/k4.png" alt="Охраняем дом, пока Вы отдыхаете!" /></div></li>
  7.         <li><div class="wave"><img src="/images/k5.png" alt="Охраняем дом, пока Вы отдыхаете!" /></div></li>
  8.     </ul>
  9. </div>


В целом всё работает, но у фона несостыковка. Вот сайт: http://serv1[dot]web-kg[dot]ru/
Нажмите на стрелочку, будет видно, что один кусок фона несостыковывается со вторым. Хотя если отадалить (CTRL -), то видно, что фон идеально ровный. Код фона (wave):

CODE (html):
скопировать код в буфер обмена
  1. .wave {
  2. background-image: url('/style/images/slide-wave-1.png');
  3. width: 100%;
  4. }


Слайдер smslider http://sashamochalin[dot]github[dot]io/smSlider/
JS код слайдера который использую я: http://serv1[dot]web-kg[dot]ru/smslider/[dot][dot][dot]uery[dot]smslider[dot]js


Помогите, пожалуйста!!! Срочно нужно!
Спасибо!
 
 Top
IllusionMH
Отправлено: 18 Октября, 2013 - 13:18:18
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Klinch, сделайте фон статичным для блока #sm_slider. Иначе без шансов, т.к. разрешения разные, а размер картинки и совпадение рисунка на фиксированном расстоянии.
Еще есть вариант background-size, но далеко не во всех браузерах.
 
 Top
Klinch
Отправлено: 18 Октября, 2013 - 13:59:41
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
IllusionMH пишет:
Klinch, сделайте фон статичным для блока #sm_slider. Иначе без шансов, т.к. разрешения разные, а размер картинки и совпадение рисунка на фиксированном расстоянии.
Еще есть вариант background-size, но далеко не во всех браузерах.


Спасибо!
По поводу статичности - добавил background-position: top center; в .wave и сейчас фон правильно состыковывается. Хоть и не очень красиво, но это лучше, чем было раньше.
 
 Top
DelphinPRO
Отправлено: 18 Октября, 2013 - 14:02:50
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
IllusionMH пишет:
Еще есть вариант background-size, но далеко не во всех браузерах.

Оч хороший вариант (поддержка хорошая http://caniuse[dot]com/#search=background-size ).
И прост в данном случае.
Используя медиазапросы:
Для больших мониторов укажите
CODE (css):
скопировать код в буфер обмена
  1. .wave { background-size: 50% 100%; }

Для экранов примерно одинаковых с картинкой волны размеров и меньше укажите
CODE (css):
скопировать код в буфер обмена
  1. .wave { background-size: 100% 100%; }


А извращенцы на IE8 не помрут, увидев нестыковку Улыбка

(Отредактировано автором: 18 Октября, 2013 - 14:03:29)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 18 Октября, 2013 - 14:13:20
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
DelphinPRO пишет:
Оч хороший вариант

DelphinPRO пишет:
А извращенцы на IE8 не помрут, увидев нестыковку

DelphinPRO, чет мне мозги совсем запарили со списком проблем в IE8. Глянул что не поддерживается и сморозил фигню Огорчение
 
 Top
Klinch
Отправлено: 18 Октября, 2013 - 14:29:00
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
Сейчас вроде бы и в IE и в остальных состыковывается, с background-position: top center;

У кого какое разрешение и диагональ экрана? Посмотрите, пожалуйста, состыковывается ли фон? У меня 1280х1024 с диагональю 19, вроде идеально состыковывается.

Спасибо!
 
 Top
IllusionMH
Отправлено: 18 Октября, 2013 - 14:40:54
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Klinch, нет. так не прокатит. Делайте как выше DelphinPRO показал.
1920х1080 - ужас. Вы это сами можете проверив сузив окно своего браузера. Эффект будет тот же, т.к. изображение не симметрично.
https://monosnap[dot]com/image/53Y1y[dot][dot][dot]zzmOwQw4RxuApbi/

(Отредактировано автором: 18 Октября, 2013 - 14:41:54)

 
 Top
Klinch
Отправлено: 18 Октября, 2013 - 14:57:17
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
IllusionMH пишет:
Klinch, нет. так не прокатит. Делайте как выше DelphinPRO показал.
1920х1080 - ужас. Вы это сами можете проверив сузив окно своего браузера. Эффект будет тот же, т.к. изображение не симметрично.
https://monosnap[dot]com/image/53Y1y[dot][dot][dot]zzmOwQw4RxuApbi/


Спасибо!
Сейчас нормально? Сделал так:

CODE (htmlphp):
скопировать код в буфер обмена
  1. @media screen and (max-device-width: 1280px) {
  2. .wave {
  3. background-image: url('/style/images/slide-wave-1.png');
  4. background-size: 100% 100%;
  5. }
  6. }
  7.  
  8. @media screen and (min-device-width: 1300px) {
  9. .wave {
  10. background-image: url('/style/images/slide-wave-1.png');
  11. background-size: 50% 100%;
  12. }
  13. }

(Отредактировано автором: 18 Октября, 2013 - 15:16:36)

 
 Top
IllusionMH
Отправлено: 18 Октября, 2013 - 15:08:54
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Klinch, с картинкой норм. Но плагин слайдера кривой, если расайзнуть окно, он размеры не меняет.
 
 Top
Klinch
Отправлено: 18 Октября, 2013 - 15:17:39
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
IllusionMH пишет:
Klinch, с картинкой норм. Но плагин слайдера кривой, если расайзнуть окно, он размеры не меняет.


А знаете другой какойнибудь? Нужен точно такойже. с такойже анимацией и эффектом. Со стрелочками. Я их сам писать не умею почти, в js пока не особо шарю.
 
 Top
IllusionMH
Отправлено: 18 Октября, 2013 - 15:28:31
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Klinch, ну в иннете полно. Гуглить и смотреть дэмки.
Те, что я недавно использовал не подойдут.
 
 Top
DelphinPRO
Отправлено: 18 Октября, 2013 - 15:29:47
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
UnoSlider
море эффектов и скинов
полностью responsive
постоянно используем.
правда нужна лицензия.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 18 Октября, 2013 - 15:35:09
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
DelphinPRO, последняя строка огорчила.
 
 Top
Klinch
Отправлено: 18 Октября, 2013 - 16:49:49
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)
Да в целом меня устраивает и тот, который сейчас стоит, но у него есть другой существенный минус. Я не пойму почему так.

В общем он должен сам листать слайды с интервалом в 3 секунды. При наведении на слайдер он должен останавливаться, переставать листать. Если обратно курсор убрать, должен обратно запускаться. Иногда нормально работает. Иногда загружаешь страницу - листает и на hoverpause плевать он хотел. Не могу понять в чём дело...
 
 Top
DelphinPRO
Отправлено: 18 Октября, 2013 - 18:18:18
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
IllusionMHЕсли разработка сайтов стоит на потоке, то 45 баксов - фигня. А слайдер хорош, адаптирован под сенсорные экраны, многофункционален и тп.
чет я его разрекламировал, как свой... Улыбка


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Напишите за меня, пожалуйста »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB