По теме думаю понятно. Попробовал Флекс слайдер и ОВЛ - в обоих одинаковый результат. Сайт --- Добавлено, 1 мар 2016 --- Такой же недочет и на оригинале (демо). Есть идеи из-за чего? --- Добавлено, 1 мар 2016 --- Ответ "создателя" - Как говорит Малышева "Это нормально". Почти все слайдеры товаров и картинок, построены, т.к. сверстаны, вертикально, а при помощи скриптов картинки выстраиваются в ряд друг за другом. 1-2 сек - это подгрузка скрипта. Увы, ничего не сделать.
Ответ поражает своим гениальным непрофессионализмом. Чтоб ничего не прыгало, надо такие стили писать, чтоб слайдер и в случае, если скрипт совсем не подгрузится, выглядел нормально (не работал, но хотя бы одна картинка стояла как надо и ничего лишнего не вылазило). Попробуй для начала добавить в стили вот это: Код: .flex-viewport{ display: block; overflow: hidden; }
Стиль всего флекс модуля - вставил, сейчас почищу куки посмотрю. PHP: /****************************************************************//********************* FLEXSLIDER SLIDESHOW *********************//****************************************************************/.slideshow{ padding: 15px; margin-bottom: 20px; background-color: #fff; -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); border-bottom: 10px solid #F5F5F5; border-top: 5px solid #22B699; position: relative;}/* Сброс настроек браузера */.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus { outline: none; }.slides,.flex-control-nav,.flex-direction-nav { margin: 0; padding: 0; list-style: none;}.flexslider a img { outline: none; border: none; }.flexslider { margin: 0; padding: 0;}/* Скрываем слайды перед загрузкой ява-скрипта */.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden;}.flexslider .slides img { width: 100%; display: block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}/* Чистим предидущее изображение для .slides */.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}html[xmlns] .slides { display: block; }* html .slides { height: 1%; }/* Основной стиль слайдера */.flexslider { position: relative; zoom: 1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2); box-shadow: 0px 1px 1px rgba(0,0,0, .2);}.flex-viewport{ display: block; overflow: hidden;}/* Вы можете изменить под свои требования*/.flex-container { min-width: 150px; max-width: 1220px; overflow: hidden; position: relative;}.flexslider .slides { zoom: 1; }/* Кнопки прокрутки. Стили */.flex-direction-nav a { display: block; position: absolute; width: 45px; height: 118px; top: 39%; cursor: pointer; 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 { right: 0; background: url(../image/arrows2.0.png) -75px 50% no-repeat;}.flex-direction-nav .flex-prev { left: 0; background: url(../image/arrows2.0.png) no-repeat;}/* Кнопки прокрутки. Управление */.flexslider .flex-control-nav { position: absolute; width: 100%; bottom: -40px; text-align: center; margin: 0 0 0 -10px; display: none;}.flex-control-nav li { display: inline-block; zoom: 1;}.flex-control-paging li a { display: block; cursor: pointer; text-indent: -9999px; width: 12px; height: 12px; margin: 0 3px; background-color: #b6b6b6 \9; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: inset 0 0 0 2px #b6b6b6; -moz-box-shadow: inset 0 0 0 2px #b6b6b6; box-shadow: inset 0 0 0 2px #b6b6b6;}.flex-control-paging li a.flex-active { background-color: #82d344; background-image: -webkit-gradient(linear, left top, left bottom, from(#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-image: linear-gradient(to bottom, #82d344, #51af34); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}/* Подпись к изображению */.flexslider .slides p { display: block; position: absolute; left: 0; bottom: 0; padding: 0 5px; margin: 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; line-height: 20px; color: white; background-color: #222222; background: rgba(0,0,0, .9); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}/****************************************************************//******************** FLEXSLIDER SLIDESHOW END ******************//****************************************************************/ --- Добавлено, 1 мар 2016 --- В мозиле работает норм) в Едже - на секунду появляется второй и пропадает. Оперы увы нету. --- Добавлено, 1 мар 2016 --- Хрому не помогло.
Эти стили в отдельном файле? Я сейчас в стилях вообще не вижу того правила, которое кинул выше (кеш чистил).
Этот вариант не работает. Добавь ещё это: Код: .slideshow{ display: block; overflow: hidden; } .slideshow li{ display: inline-block; overflow: hidden; }
Попробуй так: Код: .slideshow{ display: block; overflow: hidden; max-height: 316px; } .slideshow li{ display: inline-block; overflow: hidden; float: left; }
Если б не туда, я б сказал. Стили работают и сейчас эффект уже есть. Проблема теперь в другом: оригинальный размер изображений больше размера в слайдере, потому первое изображение при загрузке показывается в оригинальном размере, а потом уменьшается скриптом слайдера. Добавь в блок с .slideshow li ещё это: Код: max-width: 690px; Но шаблон адаптивный, так что нужно будет эту ширину подобрать ещё для остальных разрешений. Кстати, зачем мне файл стилей отдельно, если я его полностью вижу в браузере?
Получается, если впишу то 690 будет и на остальных "адаптациях", или надо будет конкретно прописывать для каждого?
Да. Поскольку оно вписывается не в блок с @media, то будет работать для всех разрешений. Но для маленьких разрешений это слишком большое число, там нужно для каждого своё подбирать, иначе толку от него не будет. Вообще, это число нужно только на момент загрузки страницы, потом скрипт карусели всё равно вписывает на тег своё значение рассчитанное под конкретный экран.
Получается для правки нужны "правильные изображения" меньших размеров? --- Добавлено, 15 окт 2016 --- Ответ от создателя шаблона: "Как говорит Малышева "Это нормально". Почти все слайдеры товаров и картинок, построены, т.к. сверстаны, вертикально, а при помощи скриптов картинки выстраиваются в ряд друг за другом. 1-2 сек - это подгрузка скрипта. Увы, ничего не сделать." --- Добавлено, 15 окт 2016 --- Надо значит искать другой модуль. --- Добавлено, 15 окт 2016 --- Поставил ради интереса другой модуль SmartBox - Smart Slider (ver 1.3.0) Проблем таких нету, но не отображается на мобильной версии (так как не включен). Ну и по использованию он конечно по тяжелее будет.
Это бред! Как они будут свёрстаны зависит от того, кто верстает. Зачем? Слайдер же адаптивный. Надо просто подобрать стили под каждое значение @media.
