[Помогите] При заходе на сайт баннер показывает 2 картинки

Тема в разделе "OpenCart", создана пользователем MGT1, 1 мар 2016.

  1. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    617
    Симпатии:
    182
    По теме думаю понятно. Попробовал Флекс слайдер и ОВЛ - в обоих одинаковый результат.

    Сайт


    --- Добавлено, 1 мар 2016 ---
    Такой же недочет и на оригинале (демо). Есть идеи из-за чего?
    --- Добавлено, 1 мар 2016 ---
    Ответ "создателя" - Как говорит Малышева "Это нормально". Почти все слайдеры товаров и картинок, построены, т.к. сверстаны, вертикально, а при помощи скриптов картинки выстраиваются в ряд друг за другом. 1-2 сек - это подгрузка скрипта. Увы, ничего не сделать.
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    778
    Ответ поражает своим гениальным непрофессионализмом. Чтоб ничего не прыгало, надо такие стили писать, чтоб слайдер и в случае, если скрипт совсем не подгрузится, выглядел нормально (не работал, но хотя бы одна картинка стояла как надо и ничего лишнего не вылазило).

    Попробуй для начала добавить в стили вот это:

    Код:
    .flex-viewport{
        display: block;
        overflow: hidden;
    }
     
  3. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    617
    Симпатии:
    182
    Стиль всего флекс модуля - вставил, сейчас почищу куки посмотрю.
    PHP:
    /****************************************************************/
    /********************* FLEXSLIDER SLIDESHOW *********************/
    /****************************************************************/

    .slideshow{
        
    padding15px;
        
    margin-bottom20px;
        
    background-color#fff;
        
    -moz-box-shadow0 2px 3px rgba(0000.2);
        -
    webkit-box-shadow0 2px 3px rgba(0000.2);
        
    box-shadow0 2px 3px rgba(0000.2);
        
    border-bottom10px solid #F5F5F5;
        
    border-top5px solid #22B699;
        
    positionrelative;
    }
    /* Сброс настроек браузера */
    .flex-container a:active,
    .
    flexslider a:active,
    .
    flex-container a:focus,
    .
    flexslider a:focus  outlinenone; }
    .
    slides,
    .
    flex-control-nav,
    .
    flex-direction-nav {
        
    margin0;
        
    padding0;
        list-
    stylenone;
    }
    .
    flexslider a img outlinenonebordernone; }
    .
    flexslider {
        
    margin0;
        
    padding0;
    }
    /* Скрываем слайды перед загрузкой ява-скрипта */
    .flexslider .slides li {
        
    displaynone;
        -
    webkit-backface-visibilityhidden;
    }
    .
    flexslider .slides img {
        
    width100%;
        
    displayblock;
        -
    webkit-border-radius2px;
        -
    moz-border-radius2px;
        
    border-radius2px;
    }
    /* Чистим предидущее изображение для .slides */
    .slides:after {
        
    content".";
        
    displayblock;
        
    clearboth;
        
    visibilityhidden;
        
    line-height0;
        
    height0;
    }
    html[xmlns] .slides displayblock; }
    html .slides height1%; }
    /* Основной стиль слайдера */
    .flexslider {
        
    positionrelative;
        
    zoom1;
        -
    webkit-border-radius3px;
        -
    moz-border-radius3px;
        
    border-radius3px;
        -
    webkit-box-shadow0px 1px 1px rgba(0,0,0.2);
        -
    moz-box-shadow0px 1px 1px rgba(0,0,0.2);
        
    box-shadow0px 1px 1px rgba(0,0,0.2);
    }
    .
    flex-viewport{
        
    displayblock;
        
    overflowhidden;
    }
    /* Вы можете изменить под свои требования*/
    .flex-container {
        
    min-width150px;
        
    max-width1220px;
        
    overflowhidden;
        
    positionrelative;
    }
    .
    flexslider .slides zoom1; }
    /* Кнопки прокрутки. Стили */
    .flex-direction-nav a {
        
    displayblock;
        
    positionabsolute;
        
    width45px;
        
    height118px;
        
    top39%;
        
    cursorpointer;
        
    text-indent: -9999px;
    }
    #column-left + #column-right + #content .flex-direction-nav a { top: 32%; }
    #column-left + #content .flex-direction-nav a { top: 36%; }
    #column-right + #content .flex-direction-nav a { top: 36%; }

    .flex-direction-nav .flex-next {
        
    right0;
        
    backgroundurl(../image/arrows2.0.png) -75px 50no-repeat;
    }
    .
    flex-direction-nav .flex-prev {
        
    left0;
        
    backgroundurl(../image/arrows2.0.pngno-repeat;
    }
    /* Кнопки прокрутки. Управление */
    .flexslider .flex-control-nav {
        
    positionabsolute;
        
    width100%;
        
    bottom: -40px;
        
    text-aligncenter;
        
    margin0 0 0 -10px;
        
    displaynone;
    }
    .
    flex-control-nav li {
        
    displayinline-block;
        
    zoom1;
    }
    .
    flex-control-paging li a {
        
    displayblock;
        
    cursorpointer;
        
    text-indent: -9999px;
        
    width12px;
        
    height12px;
        
    margin0 3px;
        
    background-color#b6b6b6 \9;
        
    -webkit-border-radius12px;
        -
    moz-border-radius12px;
        
    border-radius12px;
        -
    webkit-box-shadowinset 0 0 0 2px #b6b6b6;
        
    -moz-box-shadowinset 0 0 0 2px #b6b6b6;
        
    box-shadowinset 0 0 0 2px #b6b6b6;
    }
    .
    flex-control-paging li a.flex-active {
        
    background-color#82d344;
        
    background-image: -webkit-gradient(linearleft topleft bottomfrom(#82d344), to(#51af34));
        
    background-image: -webkit-linear-gradient(top#82d344, #51af34);
        
    background-image: -moz-linear-gradient(top#82d344, #51af34);
        
    background-image: -o-linear-gradient(top#82d344, #51af34);
        
    background-imagelinear-gradient(to bottom#82d344, #51af34);
        
    -webkit-box-shadownone;
        -
    moz-box-shadownone;
        
    box-shadownone;
    }
    /* Подпись к изображению */
    .flexslider .slides p {
        
    displayblock;
        
    positionabsolute;
        
    left0;
        
    bottom0;
        
    padding0 5px;
        
    margin0;
        
    font-familyHelveticaArialsans-serif;
        
    font-size12px;
        
    font-weightbold;
        
    text-transformuppercase;
        
    line-height20px;
        
    colorwhite;
        
    background-color#222222;
        
    backgroundrgba(0,0,0.9);
        -
    webkit-border-radius2px;
        -
    moz-border-radius2px;
        
    border-radius2px;
    }

    /****************************************************************/
    /******************** FLEXSLIDER SLIDESHOW END ******************/
    /****************************************************************/
    --- Добавлено, 1 мар 2016 ---
    В мозиле работает норм) в Едже - на секунду появляется второй и пропадает. Оперы увы нету.
    --- Добавлено, 1 мар 2016 ---
    Хрому не помогло.
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    778
    Эти стили в отдельном файле? Я сейчас в стилях вообще не вижу того правила, которое кинул выше (кеш чистил).
     
  5. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    617
    Симпатии:
    182
    Обновил.
     
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    778
    Этот вариант не работает. Добавь ещё это:
    Код:
    .slideshow{
        display: block;
        overflow: hidden;
    }
    .slideshow li{
        display: inline-block;
        overflow: hidden;
    }
     
  7. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    617
    Симпатии:
    182
    А первый код убирать? Тот добавил.
    Вставил просто второй код.
     
    Последнее редактирование: 2 мар 2016
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    778
    Попробуй так:
    Код:
    .slideshow{
        display: block;
        overflow: hidden;
        max-height: 316px;
    }
    
    .slideshow li{
        display: inline-block;
        overflow: hidden;
        float: left;
    }
     
  9. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    617
    Симпатии:
    182
    Вот весь стайлшит, может не туда сую.
    Модуль флекс идет в этом же но отмечен отдельно.
     
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    778
    Если б не туда, я б сказал. Стили работают и сейчас эффект уже есть. Проблема теперь в другом: оригинальный размер изображений больше размера в слайдере, потому первое изображение при загрузке показывается в оригинальном размере, а потом уменьшается скриптом слайдера.

    Добавь в блок с .slideshow li ещё это:
    Код:
    max-width: 690px;
    Но шаблон адаптивный, так что нужно будет эту ширину подобрать ещё для остальных разрешений.

    Кстати, зачем мне файл стилей отдельно, если я его полностью вижу в браузере? :Smile:
     
  11. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    617
    Симпатии:
    182
    Получается, если впишу то 690 будет и на остальных "адаптациях", или надо будет конкретно прописывать для каждого?
     
  12. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    778
    Да. Поскольку оно вписывается не в блок с @media, то будет работать для всех разрешений. Но для маленьких разрешений это слишком большое число, там нужно для каждого своё подбирать, иначе толку от него не будет.
    Вообще, это число нужно только на момент загрузки страницы, потом скрипт карусели всё равно вписывает на тег своё значение рассчитанное под конкретный экран.
     
    MGT1 нравится это.
  13. MGT1

    MGT1

    Регистрация:
    5 янв 2013
    Сообщения:
    617
    Симпатии:
    182
    Получается для правки нужны "правильные изображения" меньших размеров?
    --- Добавлено, 15 окт 2016 ---
    Ответ от создателя шаблона:
    "Как говорит Малышева "Это нормально". Почти все слайдеры товаров и картинок, построены, т.к. сверстаны, вертикально, а при помощи скриптов картинки выстраиваются в ряд друг за другом. 1-2 сек - это подгрузка скрипта. Увы, ничего не сделать."
    --- Добавлено, 15 окт 2016 ---
    Надо значит искать другой модуль.
    --- Добавлено, 15 окт 2016 ---
    Поставил ради интереса другой модуль SmartBox - Smart Slider (ver 1.3.0)

    Проблем таких нету, но не отображается на мобильной версии (так как не включен). Ну и по использованию он конечно по тяжелее будет.

     
  14. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.050
    Симпатии:
    778
    Это бред! Как они будут свёрстаны зависит от того, кто верстает.

    Зачем? Слайдер же адаптивный. Надо просто подобрать стили под каждое значение @media.