• 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/  (почему то не хочет свипер подгружаться, на локалке все корректно)

 

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


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

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

  • 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

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


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

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

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

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

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

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

Войти

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

Войти сейчас

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

    • Автор: Curt54rus
      Есть страничка по адресу http://sale.srfhm.ru/css_bug/
      В ней есть табличка сделанная на UL LI тегах, и вот в ячейке Описание, где выводится описание для типа питания не влезает весь текст и остальную часть не видно, скрывается стилем - overflow: hidden
       
      Пробовал убрать этот overflow, тогда вообще таблица вся разъезжается... 
       
      В верстке не особо силен, подскажите пожалуйста где поправить что, чтобы текст нормально влез и весь отображался... Пробовал уже по всякому, всю голову сломал!
       
      Заранее огромное Спасибо!
    • Автор: Denzell97
      Объясните как правильно жить верстать многостраничные сайты? 
      Я покажу вам на примере того как это делаю я. Это наверное глупый\неправильный метод, просто я не знаю как нужно\можно делать это проще. 
      Вот допустим у меня есть маленький сайт на котором есть 3 пункта меню.
      То есть в редакторе я создаю скелет сайта, внутри body я помещаю эти самые кнопки, подключаю их к форме,  затем создаю Огромный блок где будет располагаться Весь контент. Но внутри этого  блока я не помещаю контент, а помещаю PHP переменную, в которой и хранится весь этот контент вместе со всеми остальными блоками и стилями. То есть таким образом стараюсь разбить HTML код на функции PHP. И получается что у меня может храниться весь сайт в одном **.php файле. То есть в зависимости от переменных в адресной строке $_GET["Меню"] и загружается необходимый контент через условия. То есть код у меня выглядит примерно вот так:
      <!DOCTYPE html> <html> <head> <title>Сайт</title> <style type="text/css"> .Меню { position: absolute; background: #9E9E9EFF; width: 200px; height: 700px; } button { width: 100%; margin-top: 20px; } .Контент { position: absolute; left: 300px; width: 500px; height: 500px; border: 1px solid black; } </style> </head> <body> <div class="Меню"> <button form="forma" name="Меню" value="1">Меню 1</button> <button form="forma" name="Меню" value="2">Меню 2</button> <button form="forma" name="Меню" value="3">Меню 3</button> </div> <div class="Контент"> <?php if($_GET["Меню"] == 1) Меню_1(); if($_GET["Меню"] == 2) Меню_2(); if($_GET["Меню"] == 3) Меню_3(); ?> </div> <form style="display: none;" id="forma"></form> </body> </html> <?php function Меню_1() { echo ' <div style="position: relative; margin: 0 auto; width: 70%;"> Выбрано меню 1 </div> '; } function Меню_2() { echo ' <div style="position: relative; margin: 0 auto; width: 70%; font-size: 20px;"> А теперь 2 меню </div> '; } function Меню_3() { echo ' <div style="position: relative; margin: 0 auto; width: 70%;"> И 3 меню </div> '; } ?> Вот таким странным образом я делаю страницы для сайта. Через отправку формы уже по условиям идет формирование HTML разметки. 
      Конечно код получается достаточно большим при создании больших страниц с контентом и находится все в одном файле. Единственное что удобно это разбивать HTML код на отдельные фрагменты. 
      Есть ли какие то глупости данного метода? или Впринипи так и делают? (Ну почти так)
       
       
      P/S. и да у меня стили и Функции PHP на русском языке. Ну вроде бы не мешает. да и удобно для меня
    • Автор: Сергей789
      Доброе время суток!
      Примеры моих работ (гитхаб):
      макет 3
      макет 2
      макет 1
      Ищу разовые проекты по верстке.