Как настроить слайдер на главной?

Шаблон Nexoos Документация по шаблону
1

Для слайдера на главной в Админке ⇒ Разное ⇒ Управление баннерами

Создано два баннера с группой slider_main, нужно еще?
Создаете баннер и ставите группу slider_main, указываете порядок сортировки если нужно.

До версии 7.0

Группы слайдера slider_1, slider_2 и т.д.
У баннера в поле HTML Код вставлено

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="images/slider/1x1920.jpg" media="(min-width: 1367px)">
    <source srcset="images/slider/1x1367.jpg" media="(min-width: 1025px)">
    <source srcset="images/slider/1x1025.jpg" media="(min-width: 600px)">
    <!--[if IE 9]></video><![endif]-->
    <img src="images/slider/1x600.jpg" alt="Слайдер на главной 1">
</picture>

1x1920.jpg большая картинка размером 1920x450

1x1367.jpg большая картинка размером 1367x450

1x1025.jpg средняя картинка размером 1025x400

1x600.jpg маленькая картинка размером 600x300

С версии 7.0 разметка следующая

У баннера в поле HTML Код вставлено

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source data-srcset="images/slider/1/1x3840x760.jpg" media="(min-width: 1920px)">
    <source data-srcset="images/slider/1/1x2800x650.jpg" media="(min-width: 1366px)">
    <source data-srcset="images/slider/1/1x2048x560.jpg" media="(min-width: 1024px)">
    <source data-srcset="images/slider/1/1x1280x460.jpg" media="(min-width: 640px)">
    <!--[if IE 9]></video><![endif]-->
    <img class="sw-lazy" data-src="images/slider/1/1x640x360.jpg" alt="Адаптивный интернет-магазин для продажи любых товаров">
</picture>

1x3840x760.jpg большая картинка размером 3840x760 (по желанию)

1x2800x650.jpg большая картинка размером 2800x650

1x2048x560.jpg средняя картинка размером 2048x560

1x1280x460.jpg средняя картинка размером 1280x4600

1x640x360.jpg маленькая картинка размером 640x360

В атрибуте alt укажите что изображено на картинке.

Для каждого разрешения будет использоваться своя картинка, таким образом на мобильниках будут загружаться маленькие картинки, это будет происходить быстро + вы получаете управление картинкой.

Картинки надо класть в images/slider/, чтобы вам было проще в этой папке уже лежат картинки слайдера с демо версии.

Минимум слайдов - 2.

Видео урок

2

Перестал слайдер работать. Не могу понять, в чем причина. Вчера пытался добавить новый баннер в слайдер, он не открывался. Я его закрыл, и активировал предыдущий, который уже несколько месяцев крутился без проблем. Он тоже не открывается. Кнопочка вверху крутится и все. Попробовал активировать тестовый слайдер, который с шаблоном идет, такая же история. Самое интересное, что в настройках ничего не менял. И на компе, на тестовом сайте, такая же история.
Как можно отследить ошибку?

Восстановил на тестовом сайте базу до редактирования, слайдер заработал. Хотя настройки точно такие же.
К сожалению на рабочем сайте не могу сделать так же, товары и заказы новые.

3

Скачал таблицы banners c рабочего дампа, восстановил на нерабочем, слайдер появился. Видимо таблицы повредились? Но это на тестовом сайте, на компе. На рабочем не могу восстановить таблицы, в админке перестал работать функция “архивирование и восстановление”. Ошибка “internal server error”. Это от большого количества звпросов?

4

Все оказалось намного проще)). Надо чтобы было активно не менее 2 баннеров, тогда все работает. А я хотел чтобы только 1 работал. Год назад, если не изменяет память, в это же время тоже ставил активным только 1 баннер, ко Дню Победы, он работал. Сейчас не получается.

В общем, сделал 2 одинаковых баннера). Вопрос снят.

5

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

6

Это из-за настроек на хостинге, я вам письмо оправлял с просьбой предоставить доступ к хостингу, чтоб написать в тп хостинга.

Можете сами написать им, что на некоторых страницах 500 ошибка и в логах

(104)Connection reset by peer: mod_fcgid: error reading data from FastCGI server
Premature end of script headers

Они должны поправить.

Из-за это и в массовых операция при установке скидки такая же ошибка.

7

Если загружать картинки в формате webp, то код берем отсюда Двоятся слайдеры - #2 от пользователя Nexoos ?
Картинки грузить и в webp и в jpg?

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->

<source data-srcset="images/slider/1/1x3840x760.webp" media="(min-width: 1920px)" type="image/webp">
<source data-srcset="images/slider/1/1x2800x650.webp" media="(min-width: 1366px)" type="image/webp">
<source data-srcset="images/slider/1/1x2048x560.webp" media="(min-width: 1024px)" type="image/webp">
<source data-srcset="images/slider/1/1x1280x460.webp" media="(min-width: 640px)" type="image/webp">

<source data-srcset="images/slider/1/1x3840x760.jpg" media="(min-width: 1920px)">
<source data-srcset="images/slider/1/1x2800x650.jpg" media="(min-width: 1366px)">
<source data-srcset="images/slider/1/1x2048x560.jpg" media="(min-width: 1024px)">
<source data-srcset="images/slider/1/1x1280x460.jpg" media="(min-width: 640px)">

<!--[if IE 9]></video><![endif]-->
<img class="sw-lazy" data-src="images/slider/1/1x640x360.jpg" alt="Адаптивный интернет- 
магазин для продажи любых товаров">
</picture>
<div class="sw-lazy-preloader"></div>
8

Верно.

Верно.

9

Думал, что везде одинаковое соотношение сторон - сделал баннер 1x2800x650.jpg, следом хотел уменьшить его до 2048x560 и так далее по списку, но не тут-то было- если сохранять соотношение сторон, то размер получается 2048x475, а если делать 2048x560, то, соответственно, рушатся все пропорции рисунков, фото и текста на баннере.
Получается, что каждый баннер надо создавать заново (
Это так или я что-либо напутал?

10

Все верно, надо в разных размерах, в этом и фишка чтоб под каждый размер экрана был слайд пропорционально по высоте.

11

ОК, работы в 5 раз больше - переквалифицируюсь в дизайнера )

1 лайк
12

Эти строки надо убрать из кода в таком случае:

<source data-srcset="images/slider/1/1x3840x760.webp" media="(min-width: 1920px)" type="image/webp"> 
и
<source data-srcset="images/slider/1/1x3840x760.jpg" media="(min-width: 1920px)">

надо в таком случае удалить или они не помешают?

2 комплекта баннеров сделал, по папкам разложил, пути прописал, вроде бы все так как на демо в админке сделал, но на локалке не получается запустить.

13

Да, надо удалить.

Проверьте включен ли модуль, включены ли баннеры, почистите кеш

1 лайк
14

Семен Семеныч

Семен Семеныч…- выключен.

Спасибо, все заработало)

1 лайк
15

Такое впечатление, что картинки в слайдере не кешируются, с каждым обновлением страницы заново подгружаются, особенно на смарте заметно.
Соответственно, pagespeed снижается существенно.
И на демо так же.

16

Картинки загружаются отложено, не тормозя загрузку страницы + если на сервере настроено кеширование картинок, они будут кэшироваться.

Для .webp файлов скорее всего не настроено кеширование на сервере.

Попробуйте в файле .htaccess

заменить

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf|ttf|woff2|woff)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>

на

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf|ttf|woff2|woff|webp)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>
17

Без изменений (или может быть чуть-чуть, возможно из-за того, что сжатие на сервере поднял с 5 до 7).

Визуально картинки слайдера грузятся значительно позднее картинок стационарных баннеров, что под слайдером- так и предусмотренно?

В коде баннера нет варианта подключения webp для размера 640x360?

18

С чего решили?

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

Нету, можно попробовать добавить

<source data-srcset="images/slider/1/1x640x360.webp" media="(min-width: 0px)" type="image/webp">
19

По показаниям page speed пару единиц добавилось именно после повышения сжатия на сервере.
Добавление webp для мобильного еще добавило 4 единицы где-то- показания скачут, но в среднем где-то так получается.
Хорошо добавляет скорости для десктопа включение стандартного вамшоповского кеша, но не знаю, насколько он с полностраничным совместим.

20

Те строчки что заменили влияют только на настройку кеширования файлов .webp

В оценки page speed много других факторов, обычно самый тормоз это скрипты метрики, таг менеджера, аналитики и чатов.

Его лучше отключить, с ним будет более длительна первая генерация страницы.