Писать на форуме DIAFAN.CMS могут только зарегистрированные пользователи. Войдите или зарегистрируйтесь.

Форум Сайт на DIAFAN.CMS Вопросы от новичков Слайдер на главной


Ppafy (Ppafy) 12 мая 2017 г.

Добрый
В какой папке правится размер слайдера?
rukzak4you.ru

Олег (PerpetuumMobile) 6012 мая 2017 г., редакция 12 мая 2017 г.

в css или custom/css
скорее всего main.css

смотреть в коде какой класс отвечает за размеры и править его
у Вас что-то связанное с классом .cover__item_***
Спасибо сказали: Ppafy (Ppafy)

Станислав (krishtafovichs) 312 мая 2017 г.

Уважаемые форумчане, есть идеи как поправить? Давно уже "мазолит" глаза, а тут как раз тема соответствующая. В общем есть сайт, вот ссылка, есть на нем слайдер.. В слайдере есть один недочет, который я не знаю каким образом исправить, а именно: при загрузке страницы сперва подгружаются все картинки (баннеры) они все видны, после загрузки все картинки объединяются в единый слайдер и начинается смена (прокрутка).

Особенно это видно на телефоне или планшете, т.е. с мобильных устройств. Даже в 4G сетях. Как я понял проблема из-за того, что исполняемый JS-код, который оформляет слайдер, подгружается в конце страницы, поэтому сначала видно все картинки, затем они обрабатываются.

Скриншот во вложении

Виталий NVGPRO (DIAFAN.CMS) 32612 мая 2017 г., редакция 12 мая 2017 г.

Цена вопроса? :)

Станислав (krishtafovichs) 312 мая 2017 г.

Советом тут не выйдет? Если был опыт (может даже на этом шаблоне), напишите в личку за сколько готовы.

Виталий NVGPRO (DIAFAN.CMS) 32612 мая 2017 г.

Цитата
Советом тут не выйдет?
Если Вам нужен совет, а не решение, то Вам стоит обратить внимание на порядок загрузки веб-страницы и решение не заставит себя ждать.
Цитата
напишите в личку за сколько готовы
Не сгущайте краски, решить данный вопрос элементарно. Уверен, ответ напишут. А я человек настроения - мне просто интересно во что оценивается сегодня время, которое требуется для понимания данного вопроса.

Александра (Alexa0105) 16712 мая 2017 г.

Если у вас
Цитата
при загрузке страницы сперва подгружаются все картинки (баннеры) они все видны, после загрузки все картинки объединяются в единый слайдер и начинается смена (прокрутка)

значит тормозной интернет. Я ничего похожего на вашем сайте не заметила.

Естественно, мобильное устройство вряд ли похвастается быстрым интернетом. Посему на мобилках все эти лишние картинки вообще лучше скрыть нафиг.

Любимов Павел (DIAFAN.CMS) 31812 мая 2017 г.

Тормозить кроме интернета может и сам обозреватель, и сервер, который файлы отдаёт. Так что лучше всё-таки доработать, чтобы работало везде как надо, чем скрывать. Если открытую страницу обновить полностью без кэша, то при загрузке портянка на полсекунды проскакивает. Хватает, чтобы заметить.

Станислав (krishtafovichs) 312 мая 2017 г.

Я так понимаю вариантов решений несколько. Наверное самый простой через CSS ограничить высоту слайдера и скрывать лишнее? Или это не поможет?

Любимов Павел (DIAFAN.CMS) 31812 мая 2017 г., редакция 12 мая 2017 г.

А как вы динамически высоту высчитывать будете? Вариантов несколько. Можно через CSS блок скрыть, а в начале скрипта прописать стиль через JS, который его вернёт обратно. Можно посмотреть какие инлайн-стили скрипт присваивает блокам и сыграть на этом, поскольку инлайн-стиль перекрывает аналогичный стиль из тапблицы CSS.

Первый вариант можете реализовать сами, по второму можно попробовать следующее. У вас инлайн-стили для блоков .cover__list следующие:
Код
width: 11442px; position: relative; left: 0px;
Попробуйте присвоить блокам .cover__list позиционирование position: absolute, например.

Тогда при запуске скрипта оно будет перезаписано c абсолютного на относительное. По крайней мере у меня через консоль браузера такой вариант отрабатывает нормально.
Спасибо сказали: Станислав (krishtafovichs)

Виталий NVGPRO (DIAFAN.CMS) 32612 мая 2017 г.

Цитата
Можно через CSS блок скрыть, а в начале скрипта прописать стиль через JS
Практически идеально, но тоже можно сделать и без js.

Станислав (krishtafovichs) 313 мая 2017 г.

Павел, методом научного "тыка", я нашел где применить Ваш совет, добавил в main.css
Код
.cover__list{
position:absolute;
}

Теперь при открытии сайта "портянку" не видно, как собственно всего слайдера, а после подгрузки слайдер появляется на месте. Конечно это по мне чуть лучше. На время подойдет. Спасибо!

Виталий (DIAFAN.CMS) 63413 мая 2017 г.

Обычно overflow:hidden спасает
Спасибо сказали: Станислав (krishtafovichs)

Виталий NVGPRO (DIAFAN.CMS) 32613 мая 2017 г., редакция 13 мая 2017 г.

Эхх, все. Самое быстрое решение есть. Теперь интрига пропала :)

Хотя ... А если только использовать теги html (пример, <teg>...</teg>), то возможно решить поставленную задачу (естественно без тегов <script>...</script>) ? :))

Любимов Павел (DIAFAN.CMS) 31813 мая 2017 г., редакция 13 мая 2017 г.

Цитата
Обычно overflow:hidden спасает
Значит тут необычно. Overflow у него уже прописан для родительского блока слайдера .cover.
overflow:hidden работает когда содержимое уходит за границы блока. А тут содержимое эти границы растягивает. Так что в данном случае не сработает.

Виталий NVGPRO (DIAFAN.CMS) 32613 мая 2017 г., редакция 13 мая 2017 г.

Цитата
Значит тут необычно.
Ширина картинок = 829px, а .cover растягивается на весь экран. Соответственно это и есть причина.
Как вариант: изначально ставим cover {max-width: 820px;}, а после загрузки возвращаем 100%
Это если кратко. Просто если изящнее, то чуть больше печатать.
Спасибо сказали: Станислав (krishtafovichs)

Виталий (DIAFAN.CMS) 63413 мая 2017 г.

Значит надо вокруг слайдера ещё один фиксированный div прилепить, для которого overflow спасёт ;)
Спасибо сказали: Станислав (krishtafovichs)

Станислав (krishtafovichs) 313 мая 2017 г.

Виталий, попробовал обернуть (на сколько я понял правильно, не знаю), сделал следующее, зашел в site_start.php и в следующий код:
Код
<!-- |===============| cover start |===============| -->
<insert name="show_block" module="site" id="12">

<!-- |===============| cover end |===============| -->

добавил следующее:
Код
<!-- |===============| cover start |===============| -->
<div class="coveroverflow">
<insert name="show_block" module="site" id="12">
</div>

<!-- |===============| cover end |===============| -->

После этого в main.css добавил:
Код
.coveroverflow{
overflow: hidden;
}

Мне не помог данный вариант, возможно не то делал (проверял добавить visibility:hidden, слайдер пропадал, значит делал правильно имхо).

Виталий (DIAFAN.CMS) 63413 мая 2017 г.

Конечно, т.к. надо width и height обозначать в
Код
.coveroverflow{
overflow: hidden;
}

Иначе переполнение чего скрывать? Когда слой без жестких высоты и ширины, он растягивается содержимым и overflow не имеет смысла
Спасибо сказали: Станислав (krishtafovichs)

Любимов Павел (DIAFAN.CMS) 31813 мая 2017 г., редакция 13 мая 2017 г.

Можно высоту .cover указать (всё остальное там есть). Обёртка .coveroverflow не нужна, лишний код.

Тут скорее частный случай. Большинство скриптов слайдеров тянут изображение по ширине и высота регулируется в зависимости от значения ширины. Т.е. обычно это не константа. Поэтому указывать фиксированное значение высоты будет не верно.

Но в данном конкретном случае слайдер при любой ширине экрана имеет высоту 350px, поэтому тут сработает height:350px
Спасибо сказали: Станислав (krishtafovichs)

Dmitry (afonnikov10) 22113 мая 2017 г.

Надо просто на просто рисовать банеры под размер области слайдера
Спасибо сказали: Станислав (krishtafovichs)

Олег (PerpetuumMobile) 6013 мая 2017 г.

баннеры итак под размер.
Просто к примеру слайдер по высоте 500пикс и 3шт самих картинок в слайдере, так вот в какой-то момент на экране 500px+500px+500px. Высота и размер баннера тут не причем
Спасибо сказали: Станислав (krishtafovichs)

Станислав (krishtafovichs) 313 мая 2017 г.

Да, мне тоже показалось, что Дмитрий написал "наотмаш"

Dmitry (afonnikov10) 22113 мая 2017 г.

Вы о чем?
В какой момент?

Если рисовать под себя баннер и сохранять пожатым для веб. Тормозов не возникает....

Олег (PerpetuumMobile) 6013 мая 2017 г.

Вы так и не уловили суть темы, я кратко выше написал в чём проблема. И в теме все поняли о чём речь
Спасибо сказали: Станислав (krishtafovichs)

Любимов Павел (DIAFAN.CMS) 31813 мая 2017 г., редакция 13 мая 2017 г.

Цитата
Вы о чем?
В какой момент?
Вот в этот момент:
Спасибо сказали: Станислав (krishtafovichs)

Dmitry (afonnikov10) 22113 мая 2017 г., редакция 13 мая 2017 г.

В этот момент у человека в теге было не указано что вьюшка для показа стоит обычная и не slide
вот они и выстроились в ряд =))


теперь спросите у него - какой-нить template на теге указан?!

PS: Как говорит Виталий (nvgpro) : Всем удачи!

Любимов Павел (DIAFAN.CMS) 31813 мая 2017 г.

А я-то грешным делом подумал, что в этот самый момент ещё Jquery не подгрузился, а контент слайдера уже...

Станислав (krishtafovichs) 313 мая 2017 г.

Спасибо за интересные варианты! Буду разбираться!

Любимов Павел (DIAFAN.CMS) 31813 мая 2017 г., редакция 13 мая 2017 г.

Для конкретно вашего слайдера просто добавьте высоту блока .cover 350px (она у вас по факту на сайте фиксированная, всегда 350).
Код
.cover {
position: relative;
overflow: hidden;
margin: auto;
max-width: 100%;
height: 350px;
}
Спасибо сказали: Станислав (krishtafovichs)

Андрей (dark_joker) 24 января, четверг

как изменить ширину слайдера(высоту) в стандартном шаблоне, если менять в css сам слайдер рассыпается

Андрей (dark_joker) 24 января, четверг

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

Александр (capitan) 9325 января, пятница

Поставьте этот http://owlcarousel2.github.io/OwlCarousel2/

Evhenii Shmalko (SharkMarketing) 16925 января, пятница

Стандартный слайдер который стоит в шаблоне - полное говно.
установите себе слайдер OwlCarousel2 или Slick - и будет Вам счастье - они простые и гибкие в параметрах