Сообщений в теме: 8

[kidsneed]

Добрый день!
Помогите отцентровать слайдер, сейчас он прижат к левой стороне
если я правильно понимаю делается это в этом коде :

/* FlexSlider слайдер на главной */
.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 {margin: 0; padding: 0;}
.flexslider ul, .flexslider il li {list-style:none;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 60%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider {margin: 0 0 30px; position: relative; min-height:110px; zoom: 1; overflow:hidden;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 55px}
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 60px; height: 60px; margin:-20px 0 0 0; display: block; background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') -25px 18px no-repeat; background-color: #222222; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;}
.flex-direction-nav .flex-next, .flex-direction-nav .next {right: -50px;*right: -70px; }
.flex-direction-nav .flex-prev, .flex-direction-nav .prev {background:url('{ASSETS_IMAGES_PATH}arrows.png?design=spring') 20px 18px no-repeat; background-color: #222222; left: -50px; *left: -70px; }
.flexslider:hover .flex-next, .flexslider:hover .next {opacity: 0.8; right: 20px;}
.flexslider:hover .flex-prev, .flexslider:hover .prev {opacity: 0.8; left: 20px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover, .flexslider:hover .next:hover, .flexslider:hover .prev:hover  {opacity: 1; transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* END FlexSlider слайдер на главной */

Заранее спасибо

[Юля123]

kidsneed (17 Декабрь 2015 - 17:23) писал:

Добрый день!
Помогите отцентровать слайдер, сейчас он прижат к левой стороне


Заранее спасибо

Здравствуйте, в main.css найдите код:

.flexslider .slides img {width: 60%; display: block;}

и замените на код:

.flexslider .slides img {width: 60%; display: block; margin:0 auto;}

[kidsneed]

Спасибо =)

[GeryM]

Добрый день подскажите пожалуйста, после изменения высоты слайдера( было 1920 на 571... сделали 1920 на 450 нужно было просто поуже сделать высоту слайдера чтоб др элементы были видны..) картинки стали прыгать... изменили размеры самих картинок ужали ... но слайдер стал их подгонять каким то образом под преждние размеры...  сейчас при загрузке страницы ( главной)  картинка сначала становится большой ( как прежние размеры слайдера)  а потом ужимаются под текущие... но все равно виден этот скачет и он на самом деле очень негативно сказывается на впечатлении от стиля... помогите исправить...

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

Аккаунт SL-372236

http://ger-begovel.storeland.ru/

P/S/ Данный эфект прослеживается в Google Chrome ...

[Firefly]

GeryM (14 Февраль 2016 - 17:45) писал:

Добрый день подскажите пожалуйста, после изменения высоты слайдера( было 1920 на 571... сделали 1920 на 450 нужно было просто поуже сделать высоту слайдера чтоб др элементы были видны..) картинки стали прыгать... изменили размеры самих картинок ужали ... но слайдер стал их подгонять каким то образом под преждние размеры...  сейчас при загрузке страницы ( главной)  картинка сначала становится большой ( как прежние размеры слайдера)  а потом ужимаются под текущие... но все равно виден этот скачет и он на самом деле очень негативно сказывается на впечатлении от стиля... помогите исправить...

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

Аккаунт SL-372236

http://ger-begovel.storeland.ru/

P/S/ Данный эфект прослеживается в Google Chrome ...

Здравствуйте. Попробуйте сейчас загрузить изображения с высотой 450px. Затем очистить кэш браузера и проверить.
На данный момент изображения сжимаются по причине несоответствия размера тела слайдера (указана высота 450px) и изображения (сейчас высота 570px).

[GeryM]

пробовали и меньший размер заливать и больший у вас там стоит какая-то функция привязки от ширены и от высоты... т.е. если я сделаю размер картинки меньше то функция все равно ее будет увеличивать на х процентов или раз так чтоб картинка занимала всю область слайдера... крайне не удобно... сегодня копался нашел мельком... ( сейчас не могу найти)  свойство которое увеличивало картинку на 1. 00018 ... не успе разобраться нужно было убегать... задача такова... Нужно разместить слайдер на первой странице таким образом чтоб его высота не превышала 450 зч и на экранах сразрешением 1650 на 1050 умещались данные до кнопки ХИТЫ... сейчас все рушится я не могу выстроить таким образом чтоб высота слайдера была четко по размерам 1920 на 450 ... область слайдера все равно больше... (невидимая часть) отменяя  /* */ высоту слайдера... фон и бэкграуд картинка принимают более мение нужные размеры но при этом в других страницах поле где отображаются название товара и элементы управления станвятся на всю высоту страницы... Помогите пожалуйста разобраться с этой дилемой...

сейчас поставили высоту картинок 1920 на 570 и они вписываются в блок но стоит поставить картинку меньшей высоты 450 или даже 440 так ее какая то функция увеличивает так что она вылезает даже за край области слайдера становится еще больше чем 570 по высоте... не можем понять в чем дело!!!! что то увеличивает картинку в соответствии с каким-то коэффецентом... нужно это срочно исправить...

Сейчас стоят картинки 1920 на 570 но функция ее ужимает до width: 1654px; height: 454.548px; ПРОПОРЦИОНАЛЬНО!!! ставим меньшие картинки по размеру... ее распирает чуть ли не на пол экрана!!!!

[GeryM]

вот нашел элемент который и дергает картинки <div style="position: absolute; top: 0px; left: 0px; width: 1637.45px; height: 450px; transform-origin: 0px 0px 0px; transform: scale(1.01011);">

Если отключить transform: scale(1.01011);"> то все картинки становятся нормальными без увеличения... но не могу в коде найти эту функцию...  нахожу через Хром F12 показать свойства элемента...

[GeryM]

вот так скачат картинки при загрузке или обновлении главной страницы

Прикрепленные изображения

• 

[Vaccina]

Попробуйте отключить данный стиль следующим образом, в main.css добавьте:

#slider > div {
	transform-origin: inherit !important;
	transform: inherit !important;
}

Хотя на данный момент эти стили наоборот уменьшают картинку в зависимости от разрешения экрана и центрируют ее.