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


Слайдер И Карусели


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

#1 valeriruss

valeriruss

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

  • Пользователи
  • PipPipPipPip
  • 345 сообщений
  • ГородПятигорск

Отправлено 07 Февраль 2019 - 01:46

Здравствуйте.Подскажите,пожалуйста, какой параметр меняет плавность прокрутки слайдера и каруселей в шаблоне?

#2 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 09 Февраль 2019 - 07:03

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - jquery.slitslider.js - найдите:
  // transitions speed
  speed : 2000,

измените в нем значение скорости анимации при переключении, 2000 = 2 секунды.

#3 valeriruss

valeriruss

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

  • Пользователи
  • PipPipPipPip
  • 345 сообщений
  • ГородПятигорск

Отправлено 11 Февраль 2019 - 13:10

Просмотр сообщенияVaccina (09 Февраль 2019 - 07:03) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - jquery.slitslider.js - найдите:
// transitions speed
speed : 2000,

измените в нем значение скорости анимации при переключении, 2000 = 2 секунды.

Спасибо,получилось.

#4 ussrbot

ussrbot

    Новичок

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

Отправлено 21 Октябрь 2019 - 08:27

Доброго времени суток!
Суть вопроса такова: 1)Как изменить размер слайдера?
2) Как изменить надпись "Каталог"
3) Как убрать некоторые иконки платежных систем в самом низу сайта

Заранее благодарен!

#5 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 19 Ноябрь 2019 - 08:11

Здравствуйте.

1. Если вы хотите, чтобы слайдер был на всю ширину сайта, то зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
		<div class="container demo-2">
		  <div id="slider" class="sl-slider-wrapper">
					<div class="sl-slider">
						<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
							<div class="sl-slide-inner first-slide">
								<div class="bg-img bg-img-1"></div>
								<h2>Вкусные завтраки</h2>
							  <blockquote>
								  <p>в Sushi-Shio!</p>
								  <cite><a href="/catalog">Перейти в меню</a></cite>
							  </blockquote>
							</div>
						</div>
						<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
							<div class="sl-slide-inner second-slide">
								<div class="bg-img bg-img-2"></div>
								<h2>Свежие и оригинальные</h2>
								<blockquote>
								  <p>Десерты!</p>
								  <cite><a href="/catalog">Перейти в меню</a></cite>
								 </blockquote>
							</div>
						</div>
						<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
							<div class="sl-slide-inner third-slide">
								<div class="bg-img bg-img-3"></div>
								<h2>Суши-Шио</h2>
							  <blockquote>
								  <p>Доставка вкусного наслаждения!</p>
								  <cite><a href="/catalog">Перейти в меню</a></cite>
							  </blockquote>
							</div>
						</div>
					</div><!-- /sl-slider -->
			<div class="slider_nav">
				<nav id="nav-arrows" class="nav-arrows">
					<span class="nav-arrow-prev"><span class="fa fa-long-arrow-left"></span></span>
					<span class="nav-arrow-next"><span class="fa fa-long-arrow-right"></span></span>
				</nav>
			</div>
				</div><!-- /slider-wrapper -->
			  </div>
		<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.ba-cond.min.js"></script>
		<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.slitslider.js"></script>
		<script type="text/javascript">	
					  $(function() {
						  var Page = (function() {
							  var $navArrows = $( '#nav-arrows' ),
								  $nav = $( '#nav-dots > span' ),
								  slitslider = $( '#slider' ).slitslider( {
									  onBeforeChange : function( slide, pos ) {
										  $nav.removeClass( 'nav-dot-current' );
										  $nav.eq( pos ).addClass( 'nav-dot-current' );
									  }
								  } ),
		  
								  init = function() {
									  initEvents();
								  },
								  initEvents = function() {
									  // add navigation events
									  $navArrows.children( ':last' ).on( 'click', function() {
										  slitslider.next();
										  return false;
									  } );
									  $navArrows.children( ':first' ).on( 'click', function() {
										  slitslider.previous();
										  return false;
									  } );
									  $nav.each( function( i ) {
										  $( this ).on( 'click', function( event ) {
											  var $dot = $( this );
											  if( !slitslider.isActive() ) {
												  $nav.removeClass( 'nav-dot-current' );
												  $dot.addClass( 'nav-dot-current' );
											  }
											  slitslider.jump( i + 1 );
											  return false;
										  } );
									  } );
								  };
								  return { init : init };
						  })();
						  Page.init();
						  /**
						   * Notes:
						   *
						   * example how to add items:
						   */
						  /*
						  var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
						  // call the plugin's add method
						  ss.add($items);
						  */
					  });
				  </script>
          
          
далее чуть выше найдите:
		  <div class="clear"></div>
		  </div>
		</div>
	  </div>
	{%ENDIF%}


<div class="mainContent {%IF index_page%}index_margin{%ENDIF%}">
  <div class="mainwidth">

после него вставьте:
	{% IF index_page %}
		<div class="container demo-2">
		  <div id="slider" class="sl-slider-wrapper">
					<div class="sl-slider">
						<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
							<div class="sl-slide-inner first-slide">
								<div class="bg-img bg-img-1"></div>
								<h2>Вкусные завтраки</h2>
							  <blockquote>
								  <p>в Sushi-Shio!</p>
								  <cite><a href="/catalog">Перейти в меню</a></cite>
							  </blockquote>
							</div>
						</div>
						<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
							<div class="sl-slide-inner second-slide">
								<div class="bg-img bg-img-2"></div>
								<h2>Свежие и оригинальные</h2>
								<blockquote>
								  <p>Десерты!</p>
								  <cite><a href="/catalog">Перейти в меню</a></cite>
								 </blockquote>
							</div>
						</div>
						<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
							<div class="sl-slide-inner third-slide">
								<div class="bg-img bg-img-3"></div>
								<h2>Суши-Шио</h2>
							  <blockquote>
								  <p>Доставка вкусного наслаждения!</p>
								  <cite><a href="/catalog">Перейти в меню</a></cite>
							  </blockquote>
							</div>
						</div>
					</div><!-- /sl-slider -->
			<div class="slider_nav">
				<nav id="nav-arrows" class="nav-arrows">
					<span class="nav-arrow-prev"><span class="fa fa-long-arrow-left"></span></span>
					<span class="nav-arrow-next"><span class="fa fa-long-arrow-right"></span></span>
				</nav>
			</div>
				</div><!-- /slider-wrapper -->
			  </div>
		<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.ba-cond.min.js"></script>
		<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.slitslider.js"></script>
		<script type="text/javascript">	
					  $(function() {
						  var Page = (function() {
							  var $navArrows = $( '#nav-arrows' ),
								  $nav = $( '#nav-dots > span' ),
								  slitslider = $( '#slider' ).slitslider( {
									  onBeforeChange : function( slide, pos ) {
										  $nav.removeClass( 'nav-dot-current' );
										  $nav.eq( pos ).addClass( 'nav-dot-current' );
									  }
								  } ),
		  
								  init = function() {
									  initEvents();
								  },
								  initEvents = function() {
									  // add navigation events
									  $navArrows.children( ':last' ).on( 'click', function() {
										  slitslider.next();
										  return false;
									  } );
									  $navArrows.children( ':first' ).on( 'click', function() {
										  slitslider.previous();
										  return false;
									  } );
									  $nav.each( function( i ) {
										  $( this ).on( 'click', function( event ) {
											  var $dot = $( this );
											  if( !slitslider.isActive() ) {
												  $nav.removeClass( 'nav-dot-current' );
												  $dot.addClass( 'nav-dot-current' );
											  }
											  slitslider.jump( i + 1 );
											  return false;
										  } );
									  } );
								  };
								  return { init : init };
						  })();
						  Page.init();
					  });
				  </script>
{% ENDIF %}

2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.catalogheader a{color:white;font-size:24px;padding:0 20px;line-height:60px;}
.catalogheader{text-transform:uppercase;font-size:23px;font-weight:normal;background:#99c800;}

измените цветовое значение стиля background если хотите изменить фон, измените цветовое значение стиля color если хотите изменить цвет шрифта, font-size отвечает за размер шрифта.

3. Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
		  <div class="footer_payment">
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_1.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_2.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_3.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_4.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_5.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_6.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_7.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_8.png"/></div>
			<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_9.png"/></div>
		  </div>
  
удалите ненужные строки, например, за иконку RBK отвечает следующая строка:
<div class="ic"><img src="{ASSETS_IMAGES_PATH}oplata_7.png"/></div>

В левой колонке вы можете открыть и просмотреть указанные в коде иконки(oplata_1.png, oplata_2.png, ...).




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

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