Вход • Регистрация

Слайдер на главной

  •
  • 12 мая 2017 г.
  • Добрый
    В какой папке правится размер слайдера?
    rukzak4you.ru
    •
    • 12 мая 2017 г. , редакция: 12 мая 2017 г.
    • в css или custom/css
      скорее всего main.css

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

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

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

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

      Естественно, мобильное устройство вряд ли похвастается быстрым интернетом. Посему на мобилках все эти лишние картинки вообще лучше скрыть нафиг.
      •
      • 12 мая 2017 г.
      • Тормозить кроме интернета может и сам обозреватель, и сервер, который файлы отдаёт. Так что лучше всё-таки доработать, чтобы работало везде как надо, чем скрывать. Если открытую страницу обновить полностью без кэша, то при загрузке портянка на полсекунды проскакивает. Хватает, чтобы заметить.
  •
  • 12 мая 2017 г.
  • Я так понимаю вариантов решений несколько. Наверное самый простой через CSS ограничить высоту слайдера и скрывать лишнее? Или это не поможет?
    •
    • 12 мая 2017 г. , редакция: 12 мая 2017 г.
    • А как вы динамически высоту высчитывать будете? Вариантов несколько. Можно через CSS блок скрыть, а в начале скрипта прописать стиль через JS, который его вернёт обратно. Можно посмотреть какие инлайн-стили скрипт присваивает блокам и сыграть на этом, поскольку инлайн-стиль перекрывает аналогичный стиль из тапблицы CSS.

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

      Тогда при запуске скрипта оно будет перезаписано c абсолютного на относительное. По крайней мере у меня через консоль браузера такой вариант отрабатывает нормально.
      •
      • 12 мая 2017 г.
      • Цитата
        Можно через CSS блок скрыть, а в начале скрипта прописать стиль через JS
        Практически идеально, но тоже можно сделать и без js.
      •
      • 13 мая 2017 г.
      • Павел, методом научного "тыка", я нашел где применить Ваш совет, добавил в main.css
        Код
        .cover__list{
        position:absolute;
        }

        Теперь при открытии сайта "портянку" не видно, как собственно всего слайдера, а после подгрузки слайдер появляется на месте. Конечно это по мне чуть лучше. На время подойдет. Спасибо!
  •
  • 13 мая 2017 г.
  • Обычно overflow:hidden спасает
    • 13 мая 2017 г. , редакция: 13 мая 2017 г.
    • Эхх, все. Самое быстрое решение есть. Теперь интрига пропала :)

      Хотя ... А если только использовать теги html (пример, <teg>...</teg>), то возможно решить поставленную задачу (естественно без тегов <script>...</script>) ? :))
    •
    • 13 мая 2017 г. , редакция: 13 мая 2017 г.
    • Цитата
      Обычно overflow:hidden спасает
      Значит тут необычно. Overflow у него уже прописан для родительского блока слайдера .cover.
      overflow:hidden работает когда содержимое уходит за границы блока. А тут содержимое эти границы растягивает. Так что в данном случае не сработает.
      •
      • 13 мая 2017 г. , редакция: 13 мая 2017 г.
      • Цитата
        Значит тут необычно.
        Ширина картинок = 829px, а .cover растягивается на весь экран. Соответственно это и есть причина.
        Как вариант: изначально ставим cover {max-width: 820px;}, а после загрузки возвращаем 100%
        Это если кратко. Просто если изящнее, то чуть больше печатать.
      •
      • 13 мая 2017 г.
      • Значит надо вокруг слайдера ещё один фиксированный div прилепить, для которого overflow спасёт ;)
        •
        • 13 мая 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, слайдер пропадал, значит делал правильно имхо).

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

            Иначе переполнение чего скрывать? Когда слой без жестких высоты и ширины, он растягивается содержимым и overflow не имеет смысла
            • 13 мая 2017 г. , редакция: 13 мая 2017 г.
            • Можно высоту .cover указать (всё остальное там есть). Обёртка .coveroverflow не нужна, лишний код.

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

              Но в данном конкретном случае слайдер при любой ширине экрана имеет высоту 350px, поэтому тут сработает height:350px
  •
  • 13 мая 2017 г.
  • Надо просто на просто рисовать банеры под размер области слайдера
    •
    • 13 мая 2017 г.
    • баннеры итак под размер.
      Просто к примеру слайдер по высоте 500пикс и 3шт самих картинок в слайдере, так вот в какой-то момент на экране 500px+500px+500px. Высота и размер баннера тут не причем
      •
      • 13 мая 2017 г.
      • Вы о чем?
        В какой момент?

        Если рисовать под себя баннер и сохранять пожатым для веб. Тормозов не возникает....
        •
        • 13 мая 2017 г. , редакция: 13 мая 2017 г.
        • Цитата
          Вы о чем?
          В какой момент?
          Вот в этот момент:
          • 13 мая 2017 г. , редакция: 13 мая 2017 г.
          • В этот момент у человека в теге было не указано что вьюшка для показа стоит обычная и не slide
            вот они и выстроились в ряд =))


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

            PS: Как говорит Виталий (nvgpro) : Всем удачи!
            •
            • 13 мая 2017 г.
            • А я-то грешным делом подумал, что в этот самый момент ещё Jquery не подгрузился, а контент слайдера уже...
  • 24 января 2019 г.
  • как изменить ширину слайдера(высоту) в стандартном шаблоне, если менять в css сам слайдер рассыпается

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум