Перейти к содержимому


Изменение Размеров Слайдера

слайдер движение

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 134

#1 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 28 Июль 2014 - 14:07

Мучаюсь со слайдером, хочу уменьшить его по ширине и высоте. Как это сделать?

#2 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 28 Июль 2014 - 15:02

Просмотр сообщения1egi0n (28 Июль 2014 - 14:07) писал:

Мучаюсь со слайдером, хочу уменьшить его по ширине и высоте. Как это сделать?
В main.css:
строку:

.camera_wrap {display: none; float: left; position: relative;z-index: 0;}

замените на:

.camera_wrap {display: none;position: relative;z-index: 0;}

строку:

.camera_wrap {width: 100%;}

на

.camera_wrap {width: 80%;margin: 0 auto;}

вместо 80% можете поставить свое значение;

и в строке:

.camera_wrap {height: 600px !important;}

замените 600 на нужную вам высоту.

#3 Hetvild

Hetvild

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 29 Июль 2014 - 09:50

Добрый день,
Подскажите, а как полностью убрать этот слайдер?

#4 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 29 Июль 2014 - 10:19

Просмотр сообщенияHetvild (29 Июль 2014 - 09:50) писал:

Добрый день,
Подскажите, а как полностью убрать этот слайдер?
В шаблоне "HTML"
Находим и удаляем:
	{% IF index_page %}
	  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}camera.css">
	  <script type='text/javascript' src='{ASSETS_JS_PATH}camera.min.js'></script> 
	  <script>
	   jQuery(function(){   
	 jQuery('#camera_wrap_1').camera({
			minHeight: '400px',
			maxHeight: '600px',
			pagination: false,
	 thumbnails: false,
			time: 3000
	 });
	 });
	 </script>
	{% ENDIF %}

Находим и удаляем:
	  {% IF index_page %}	 
	  <div class="fluid-container">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg">
			<div class="camera_caption moveFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg">
			<div class="camera_caption moveFomRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg">
			<div class="camera_caption moveFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg">
			<div class="camera_caption moveFomRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg">
			<div class="camera_caption fadeFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg">
			<div class="camera_caption fadeFromRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg">
			<div class="camera_caption fadeFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg">
			<div class="camera_caption fadeFromRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		</div><!-- #camera_wrap_1 -->
		<div class="clear"></div>
	  </div><!-- .fluid_container -->

	  {% ENDIF %} 


В файле "style.css".
Найти и удалить:
.home #header{height: auto;text-align: left;position: absolute;background: none;z-index: 1000;left: 50%;margin-left: -600px;}


#5 Hetvild

Hetvild

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 29 Июль 2014 - 11:01

Большое спасибо

#6 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 31 Июль 2014 - 10:50

Просмотр сообщенияDars (28 Июль 2014 - 15:02) писал:

В main.css:
строку:

.camera_wrap {display: none; float: left; position: relative;z-index: 0;}

замените на:

.camera_wrap {display: none;position: relative;z-index: 0;}

строку:

.camera_wrap {width: 100%;}

на

.camera_wrap {width: 80%;margin: 0 auto;}

вместо 80% можете поставить свое значение;

и в строке:

.camera_wrap {height: 600px !important;}

замените 600 на нужную вам высоту.

у меня нету main.css, а в style.css нет такой строки

#7 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2014 - 10:51

Просмотр сообщения1egi0n (31 Июль 2014 - 10:50) писал:



у меня нету main.css, а в style.css нет такой строки

Данные изменения необходимо производить в файле camera.css

#8 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 31 Июль 2014 - 11:43

Смог сам разобраться, правда изменения делал в файле style.css. Не знаю какие будут последствия).

#9 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 31 Июль 2014 - 12:10

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

#10 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 31 Июль 2014 - 12:12

Просмотр сообщения1egi0n (31 Июль 2014 - 12:10) писал:

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

В шаблоне HTML найдите код:
<script>
	   jQuery(function(){	
	   jQuery('#camera_wrap_1').camera({
			minHeight: '400px',
			maxHeight: '600px',
			pagination: false,
		thumbnails: false,
			time: 3000
	   });
	  });
	 </script>

и измените значение time

#11 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 31 Июль 2014 - 15:28

Заливаю картинку под уменьшенные размеры слайдера. Обновляю страницу. Вижу, что картинку всю растянуло и ее полностью не видно. Как с этим бороться?
Такое ощущение , что слайдер любую картинку растягивает до опред размера.

#12 batta

batta

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2014 - 17:03

Просмотр сообщения1egi0n (31 Июль 2014 - 15:28) писал:

Заливаю картинку под уменьшенные размеры слайдера. Обновляю страницу. Вижу, что картинку всю растянуло и ее полностью не видно. Как с этим бороться?
Такое ощущение , что слайдер любую картинку растягивает до опред размера.
Картинки в слайдере лучше ставить размером 1920х600px
Изображение действительно будет растягиваться под ширину всей страницы монитора. Если Вы не хотите этого, можете перенести слайдер чуть ниже и поставить справа от категорий. Таким образом ширина всех изображений слайдера будет не более 650 пикселей

#13 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 01 Август 2014 - 12:28

на самом деле ширина у меня 1920, я уменьшал высоту до 451. в итоге изображение растянуто
trendstuff.ru посмотрите

#14 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 01 Август 2014 - 21:05

Просмотр сообщения1egi0n (01 Август 2014 - 12:28) писал:

на самом деле ширина у меня 1920, я уменьшал высоту до 451. в итоге изображение растянуто
trendstuff.ru посмотрите
Изображение на Вашем сайте размером 1280 × 825. Соответственно при растяжении его в слайдере до 1920 пикселей отображаться оно будет именно так, как сейчас.

#15 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 02 Август 2014 - 10:47

Залил новое фото 1920*450, смотрите как его "разперло" с потерей качества.
trendstuff.ru

#16 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 02 Август 2014 - 11:26

Просмотр сообщения1egi0n (02 Август 2014 - 10:47) писал:

Залил новое фото 1920*450, смотрите как его "разперло" с потерей качества.
trendstuff.ru

Здравствуйте, сейчас на вашем сайте загружено 2 слайда, оба с разными размерами. Для корректной работы слайдера необходимо использовать все слайды одного размера (например, 1920х450px).
Отредактируйте все слайды до нужных размеров, затем в шаблоне HTML
Найти:
<script>
	   jQuery(function(){   
	 jQuery('#camera_wrap_1').camera({
			minHeight: '400px',
			maxHeight: '300px',
			pagination: false,
	 thumbnails: false,
			time: 3000
	 });
	 });
	 </script>

Заменить:
<script>
	   jQuery(function(){   
	 jQuery('#camera_wrap_1').camera({
			minHeight: '300px',
			height: '450px',
			pagination: false,
	 thumbnails: false,
			time: 3000
	 });
	 });
	 </script>

В файле "style.css".
Найти:
.fluid-container  {position: relative;height:600px;/*min-height: 400px;background: url('{ASSETS_IMAGES_PATH}slide4.jpg') center center;*/}
.camera_wrap {height:600px !important;}

Заменить:
.fluid-container  {position: relative;height:450px;/*min-height: 400px;background: url('{ASSETS_IMAGES_PATH}slide4.jpg') center center;*/}
.camera_wrap {height:450px !important;}


#17 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 02 Август 2014 - 11:32

Сейчас попробую, то что разные залиты - это для экспериментов, но основной планирую 1920*450.

#18 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 02 Август 2014 - 11:38

НЕ помогло, оставил один слайд всего. Поменял, что вы сказали.

#19 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 02 Август 2014 - 11:50

Просмотр сообщения1egi0n (02 Август 2014 - 11:38) писал:

НЕ помогло, оставил один слайд всего. Поменял, что вы сказали.

Пожалуйста, выполняйте инструкции в точности так как они написаны, малейшие неточности в выполнении инструкций могут привести к неверному результату.

В шаблоне "HTML"
Находим:
<script>
	  	jQuery(function(){  			
				jQuery('#camera_wrap_1').camera({
			minHeight: '300px',
			Height: '450px',
			pagination: false,
					thumbnails: false,
			time: 5000
				});
			});
		</script>

Заменяем на:
<script>
	  	jQuery(function(){  			
				jQuery('#camera_wrap_1').camera({
			minHeight: '300px',
			height: '450px',
			pagination: false,
					thumbnails: false,
			time: 5000
				});
			});
		</script>

Должно быть с маленькой буквы height: '450px',

#20 1egi0n

1egi0n

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 70 сообщений

Отправлено 02 Август 2014 - 12:25

О БОГИ!! Получилось, не знал что здесь регистр важен. Спасибо)




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных