• 0
AShukilovich

Верстка слайдера carousel/swiper

Вопрос

Добрый день. Есть необходимость свертсать слайдер на главной странице:

1) пролистывание на 1 страницу осуществляется по наведению мыши на текущий слайд т.е. 1 наведение 1 слайд;

2) пролистывания с эффектом fade (один тухнет другой появляется)

Все остальное время слайдер стоит просто.

Попробовал написать использую bootstrap4 carousel, но столкнулся с тем что я не знаю как сделать эффект fade на нем, а если и получалось то текущий слайд резко исчезает, а новый появляется медленно и еще почему то при наведении на последний слайд курсора пролистывание идет через первый слайд (он показывается, но только на короткий промежуток времени) на jsfiddle код работает почему то как часы, но не у меня хотя мой же. Решил использовать swiper так как пользовался ранее, все замечательно работает, но косяк с позиционированием элементов. текст на слайдах заходит за контейнер в котором он находится и просто исчезает (в мобилках в основном).

Ссылки на jsfiddle соответственно на карусель, второй на свипер. 

https://jsfiddle.net/AShukilovich/aqyrj8xz/2/

https://jsfiddle.net/AShukilovich/8kvo4qwm/1/  (почему то не хочет свипер подгружаться, на локалке все корректно)

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

2 ответа на этот вопрос

Рекомендуемые сообщения

  • 0

Нашел как сделать fade эффект на карусели, но так и не могу справиться с проблемой, что при наведении может проскочить несколько слайдов за раз. Ссылка на переделанную fade карусель на jsfiddle https://jsfiddle.net/AShukilovich/aqyrj8xz/3/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
В 15.09.2017 в 07:01, AShukilovich сказал:

Добрый день. Есть необходимость свертсать слайдер на главной странице:

1) пролистывание на 1 страницу осуществляется по наведению мыши на текущий слайд т.е. 1 наведение 1 слайд;

2) пролистывания с эффектом fade (один тухнет другой появляется)

Все остальное время слайдер стоит просто.

Попробовал написать использую bootstrap4 carousel, но столкнулся с тем что я не знаю как сделать эффект fade на нем, а если и получалось то текущий слайд резко исчезает, а новый появляется медленно и еще почему то при наведении на последний слайд курсора пролистывание идет через первый слайд (он показывается, но только на короткий промежуток времени) на jsfiddle код работает почему то как часы, но не у меня хотя мой же. Решил использовать swiper так как пользовался ранее, все замечательно работает, но косяк с позиционированием элементов. текст на слайдах заходит за контейнер в котором он находится и просто исчезает (в мобилках в основном).

Ссылки на jsfiddle соответственно на карусель, второй на свипер. 

https://jsfiddle.net/AShukilovich/aqyrj8xz/2/

https://jsfiddle.net/AShukilovich/8kvo4qwm/1/  (почему то не хочет свипер подгружаться, на локалке все корректно)

 

Если слайдер без использования фреймворка , у всех слайдов кроме активного поставь свойство opacity: 0 ; затем ставишь свойство Transition всем слайдам.
При наведении мышкой на элемент скрываешь текущий слайд с помощью Opacity и показываешь следующий слайд Opacity: 1.

При таких условиях слайды будут плавно сменять друг  друга.

Изменено пользователем DevChristmas

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: Odinokiy_volk
      Сайт https://knyaz85.github.io/
      Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов
      Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др.
      Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер..
      Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)
    • Автор: Mixfixpix
      Всем привет, форумчане!
      Есть задача сделать вот такую штуку как на картинке, она должна быть 100% шириной по отношению к контенту, но ограниченной высотой, к примеру 60 пикселей.
      У меня уже есть решение которое я сделал https://jsfiddle.net/x5Lavn55/, но может имеется более элегантное и лучше чем мое?
      Пробовал с svg, но не могу растянуть на 100% не изменив высоту...

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы