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


Вопрос По Слайдеру


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

#21 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 29 Октябрь 2015 - 04:19

На данный момент слайдер адаптивен и не перекрывает баннеры =)

На счет второго вопроса, в main,css найдите:
#breadcrumbs:before, #slideshow:before{background-image:url("http://design.ffgears.ru/sl-bg.jpg");background-position:top center;background-repeat:no-repeat;bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:-80px;z-index:-1;}

попробуйте заменить на:
#breadcrumbs:before{background-image:url("http://design.ffgears.ru/sl-bg.jpg");background-position:top center;background-repeat:no-repeat;bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:-80px;z-index:-1;}


#22 Santos

Santos

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

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

Отправлено 29 Октябрь 2015 - 15:23

Просмотр сообщенияVaccina (29 Октябрь 2015 - 04:19) писал:

На данный момент слайдер адаптивен и не перекрывает баннеры =)

На счет второго вопроса, в main,css найдите:
#breadcrumbs:before, #slideshow:before{background-image:url("http://design.ffgears.ru/sl-bg.jpg");background-position:top center;background-repeat:no-repeat;bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:-80px;z-index:-1;}

попробуйте заменить на:
#breadcrumbs:before{background-image:url("http://design.ffgears.ru/sl-bg.jpg");background-position:top center;background-repeat:no-repeat;bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:-80px;z-index:-1;}
Vaccina, спасибо большое! все ок!
Еще вопросик, на слайдере в лазури только один эффект перелистывания (горизонтально справа - налево), возможно поставить  другой эффект (более интересный)???

#23 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 30 Октябрь 2015 - 03:29

Просмотреть все виды анимации для данного слайдера вы можете по следующей ссылке:
http://www.jssor.com...ion-viewer.html

Список анимации указан в выпадающем списке на данном сайте.

#24 Santos

Santos

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

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

Отправлено 30 Октябрь 2015 - 16:53

Просмотр сообщенияVaccina (30 Октябрь 2015 - 03:29) писал:

Просмотреть все виды анимации для данного слайдера вы можете по следующей ссылке:
http://www.jssor.com...ion-viewer.html

Список анимации указан в выпадающем списке на данном сайте.
Здравствуйте! Код эффекта выбрал, вот только не пойму, куда его ставить?
У меня есть, вот такой блок с похожими кодами:

// Слайдер на главной
function slideShow() {
  var _CaptionTransitions = [];
  _CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
  _CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity:      $JssorEasing$.$EaseLinear }, $Opacity: 2 };
  _CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} };
  _CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} };
  _CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} };
  _CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
  _CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
  _CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };

Куда то, в него надо вставлять???

#25 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 31 Октябрь 2015 - 01:47

В шаблоне main.js найдите:
$CaptionSliderOptions: {							//[Optional] Options which specifies how to animate caption
		  $Class: $JssorCaptionSlider$,				   //[Required] Class to create instance to animate caption
		  $CaptionTransitions: _CaptionTransitions,	  

после:
_CaptionTransitions

сразу вставьте выбранный эффект, обозначается он как
["ZMF|10"]

то есть должно получиться
$CaptionSliderOptions: {							//[Optional] Options which specifies how to animate caption
		  $Class: $JssorCaptionSlider$,				   //[Required] Class to create instance to animate caption
		  $CaptionTransitions: _CaptionTransitions["ZMF|10"],  


#26 Santos

Santos

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

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

Отправлено 31 Октябрь 2015 - 14:52

Просмотр сообщенияVaccina (31 Октябрь 2015 - 01:47) писал:

В шаблоне main.js найдите:
$CaptionSliderOptions: {						 //[Optional] Options which specifies how to animate caption
		 $Class: $JssorCaptionSlider$,				 //[Required] Class to create instance to animate caption
		 $CaptionTransitions: _CaptionTransitions,	

после:
_CaptionTransitions

сразу вставьте выбранный эффект, обозначается он как
["ZMF|10"]

то есть должно получиться
$CaptionSliderOptions: {						 //[Optional] Options which specifies how to animate caption
		 $Class: $JssorCaptionSlider$,				 //[Required] Class to create instance to animate caption
		 $CaptionTransitions: _CaptionTransitions["ZMF|10"],
Сделал все по вашей инструкции...ни чего не изменилось((( как был старый эффект (справа-налево) так и остался...
Какие могут быть еще варианты?

#27 Santos

Santos

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

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

Отправлено 03 Ноябрь 2015 - 03:06

Ожидаю инструкций...кто нибудь!

#28 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Ноябрь 2015 - 04:18

Простите за неточность, в main.js найдите:
$CaptionSliderOptions: {						 //[Optional] Options which specifies how to animate caption
		 $Class: $JssorCaptionSlider$,				 //[Required] Class to create instance to animate caption
		 $CaptionTransitions: _CaptionTransitions["CLIP|LR"],	 //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
	

замените на:
$CaptionSliderOptions: {						 //[Optional] Options which specifies how to animate caption
		 $Class: $JssorCaptionSlider$,				 //[Required] Class to create instance to animate caption
		 $CaptionTransitions: _CaptionTransitions,	 //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
	

далее найдите:
$BulletNavigatorOptions: {						 //[Optional] Options to specify and enable navigator or not
		 $Class: $JssorBulletNavigator$,				 //[Required] Class to create navigator instance
		 $ChanceToShow: 2,							 //[Required] 0 Never, 1 Mouse Over, 2 Always
		 $AutoCenter: 1,								 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
		 $Steps: 1,									 //[Optional] Steps to go for each navigation request, default value is 1
		 $Lanes: 1,									 //[Optional] Specify lanes to arrange items, default value is 1
		 $SpacingX: 8,								 //[Optional] Horizontal space between each item in pixel, default value is 0
		 $SpacingY: 8,								 //[Optional] Vertical space between each item in pixel, default value is 0
		 $Orientation: 1								 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
	 },


перед ним вставьте:
$SlideshowOptions: {
				 $Class: $JssorSlideshowRunner$,
				 $Transitions: _SlideshowTransitions,
				 $TransitionsOrder: 1,
				 $ShowLink: true
			 },
далее найите:
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
_CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} };
_CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} };
_CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} };
_CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
_CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
_CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };


после него вставьте:
var _SlideshowTransitions = [{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}];

в последующем в этой строке для смены анимации необходимо заменять:
{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}

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

#29 Santos

Santos

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

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

Отправлено 03 Ноябрь 2015 - 23:36

Просмотр сообщенияVaccina (03 Ноябрь 2015 - 04:18) писал:

Простите за неточность, в main.js найдите:
$CaptionSliderOptions: {						 //[Optional] Options which specifies how to animate caption
		 $Class: $JssorCaptionSlider$,				 //[Required] Class to create instance to animate caption
		 $CaptionTransitions: _CaptionTransitions["CLIP|LR"],	 //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
	

замените на:
$CaptionSliderOptions: {						 //[Optional] Options which specifies how to animate caption
		 $Class: $JssorCaptionSlider$,				 //[Required] Class to create instance to animate caption
		 $CaptionTransitions: _CaptionTransitions,	 //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
	

далее найдите:
$BulletNavigatorOptions: {						 //[Optional] Options to specify and enable navigator or not
		 $Class: $JssorBulletNavigator$,				 //[Required] Class to create navigator instance
		 $ChanceToShow: 2,							 //[Required] 0 Never, 1 Mouse Over, 2 Always
		 $AutoCenter: 1,								 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
		 $Steps: 1,									 //[Optional] Steps to go for each navigation request, default value is 1
		 $Lanes: 1,									 //[Optional] Specify lanes to arrange items, default value is 1
		 $SpacingX: 8,								 //[Optional] Horizontal space between each item in pixel, default value is 0
		 $SpacingY: 8,								 //[Optional] Vertical space between each item in pixel, default value is 0
		 $Orientation: 1								 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
	 },


перед ним вставьте:
$SlideshowOptions: {
				 $Class: $JssorSlideshowRunner$,
				 $Transitions: _SlideshowTransitions,
				 $TransitionsOrder: 1,
				 $ShowLink: true
			 },
далее найите:
var _CaptionTransitions = [];
_CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
_CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
_CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} };
_CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} };
_CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} };
_CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
_CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
_CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };


после него вставьте:
var _SlideshowTransitions = [{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}];

в последующем в этой строке для смены анимации необходимо заменять:
{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}

узнать аналогичную строку для другой анимации вы можете по ссылке с просмотром примеров выше
Спасибо большое! Все отлично))




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

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