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

[sibulba]

Подскажите пожалуйста как вставить карусель брендов в левое меню на сайте profkrovlya61.ru

[Vaccina]

Уточните какую именно карусель вы хотите установить?
Можете просмотреть вариации по следующей ссылке:
http://freeweber.ru/...dlya-sayta.html

[sibulba]

http://baijs.com/tinycarousel/
вот эта наверное подойдет лучше всего

[Vaccina]

Скачайте файлик по вашей ссылке, внутри архива из папки simple загружаем в Редактор шаблонов следующие файлы:
- jquery.tinycarousel.js
- tinycarousel.css

Далее в шаблоне HTML перед:

<!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=shine"></script>

пропишите:

<link rel="stylesheet" href="{ASSETS_STYLES_PATH}tinycarousel.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.tinycarousel.js"></script>

далее найдите:

<li class="categories">
					<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">
							<a href="{catalog.URL}"
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul><br />
				  </li>

после него вставьте:

<script type="text/javascript">
  $(document).ready(function()
  {
   $('#slider1').tinycarousel();
  });
</script>
<li>
<div id="slider1">
  <a class="buttons prev" href="#">&#60;</a>
  <div class="viewport">
   <ul class="overview">
	<li><img src="ссылка на картинку" /></li>
	<li><img src="ссылка на картинку" /></li>
	<li><img src="ссылка на картинку" /></li>
	<li><img src="ссылка на картинку" /></li>
	<li><img src="ссылка на картинку" /></li>
	<li><img src="ссылка на картинку" /></li>
   </ul>
  </div>
  <a class="buttons next" href="#">&#62;</a>
</div>
</li>

[sibulba]

добавил
подскажите а как сделать вертикальное отображение?
и как сделать автоматическую прокрутку?

отображать нужно по 3 логотипа

[Ирина345]

sibulba (16 Апрель 2015 - 10:52) писал:

добавил
подскажите а как сделать вертикальное отображение?
и как сделать автоматическую прокрутку?

отображать нужно по 3 логотипа

Здравствуйте, найдите в шаблоне hTML

<script type="text/javascript">
  $(document).ready(function()
  {
   $('#slider1').tinycarousel();
  });
</script>
<li>
<div id="slider1">
 <a class="buttons prev" href="#">&#60;</a>
  <div class="viewport">
   <ul class="overview">
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
   </ul>
  </div>
	<a class="buttons next" href="#">&#62;</a>
</div>
</li>

замените на

<script type="text/javascript">

$(document).ready(function()
{
	$("#slider5").tinycarousel({
		axis   : "y"
	});
});
</script>
<li>
<div id="slider5">
 <a class="buttons prev" href="#">&#60;</a>
  <div class="viewport">
   <ul class="overview">
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
		<li><img src="ссылка на картинку" /></li>
   </ul>
  </div>
	<a class="buttons next" href="#">&#62;</a>
</div>
</li>

[sibulba]

изменил. но отображается не коректно?
как отобразить по 3  логотипа и чтобы они каждые 4 секунды изменялись последующими логотипами?

[sibulba]

Vaccina выручайте пожалуйста. ничего не отображается по человечески) на вас вся надежда)

[Vaccina]

<script type="text/javascript">
$(document).ready(function()
{
	 $("#slider5").tinycarousel({
			 axis : "y"
	 });
});
</script>

замените на:

<script type="text/javascript">
$(document).ready(function()
{
$('#slider1').tinycarousel({
axis : "y"
, animation : true
, interval: true
});
});
</script>

Далее в tinycarousel.css найдите:

#slider1 .viewport {
  height: 125px;
  overflow: hidden;
  position: relative;
}

замените на:

#slider1 .viewport {
  height: 265px;
  overflow: hidden;
  position: relative;
}

[sibulba]

Vaccina (17 Апрель 2015 - 03:20) писал:

<script type="text/javascript">
$(document).ready(function()
{
	 $("#slider5").tinycarousel({
			 axis : "y"
	 });
});
</script>

замените на:

<script type="text/javascript">
$(document).ready(function()
{
$('#slider1').tinycarousel({
axis : "y"
, animation : true
, interval: true
});
});
</script>

Далее в tinycarousel.css найдите:

#slider1 .viewport {
height: 125px;
overflow: hidden;
position: relative;
}

замените на:

#slider1 .viewport {
height: 265px;
overflow: hidden;
position: relative;
}

волшебница

последний вопрос надеюсь.
как сделать кнопки ручного перелистывания над и под логотипами?

сам разобрался

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

[Firefly]

sibulba (17 Апрель 2015 - 10:55) писал:

волшебница

последний вопрос надеюсь.
как сделать кнопки ручного перелистывания над и под логотипами?

сам разобрался

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

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> tinycarousel.css найдите код:

#slider1 .buttons	   {
	background: #C01313;
	border-radius: 35px;
	display: block;
	top: 50%;
	left: 0;
	width: 35px;
	height: 35px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 35px;
	text-decoration: none;
	font-size: 20px;

Замените на:

#slider1 .buttons	   {
	background: #C01313;
	border-radius: 35px;
	display: block;
	top: 50%;
	left: 0;
	width: 35px;
	height: 35px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 35px;
	text-decoration: none;
	font-size: 20px;
	margin: 0 auto;
}

[korki]

Vaccina (17 Апрель 2015 - 03:20) писал:

<script type="text/javascript">
$(document).ready(function()
{
	 $("#slider5").tinycarousel({
			 axis : "y"
	 });
});
</script>

замените на:

<script type="text/javascript">
$(document).ready(function()
{
$('#slider1').tinycarousel({
axis : "y"
, animation : true
, interval: true
});
});
</script>

Далее в tinycarousel.css найдите:

#slider1 .viewport {
height: 125px;
overflow: hidden;
position: relative;
}

замените на:

#slider1 .viewport {
height: 265px;
overflow: hidden;
position: relative;
}

Здравствуйте!
Поставил слайдер по образцу. Но отображаются сразу обе картинки, а не по очереди. Помогите, пожалуйста исправить.

[Юля123]

korki (13 Ноябрь 2015 - 15:11) писал:

Здравствуйте!
Поставил слайдер по образцу. Но отображаются сразу обе картинки, а не по очереди. Помогите, пожалуйста исправить.

Здравствуйте, Вы этот же слайдер устанавливали?

сначала замените код:

<li>
<div id="slider5">
<a class="buttons prev" href="#">&#60;</a>
  <div class="viewport">
   <ul class="overview">
		<li><img src="{ASSETS_IMAGES_PATH}sboku.jpg" /></li>
		<li><img src="{ASSETS_IMAGES_PATH}sboku2.jpg" /></li>
   </ul>
  </div>
  <a class="buttons next" href="#">&#62;</a>
</div>
</li>

на код:

<div id="slider1">
<a class="buttons prev" href="#">&#60;</a>
  <div class="viewport">
   <ul class="overview">
		<li><img src="{ASSETS_IMAGES_PATH}sboku.jpg" /></li>
		<li><img src="{ASSETS_IMAGES_PATH}sboku2.jpg" /></li>
   </ul>
  </div>
  <a class="buttons next" href="#">&#62;</a>
</div>

[korki]

Юля123 (13 Ноябрь 2015 - 20:01) писал:

Здравствуйте, Вы этот же слайдер устанавливали?

сначала замените код:

<li>
<div id="slider5">
<a class="buttons prev" href="#">&#60;</a>
<div class="viewport">
<ul class="overview">
	 <li><img src="{ASSETS_IMAGES_PATH}sboku.jpg" /></li>
	 <li><img src="{ASSETS_IMAGES_PATH}sboku2.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">&#62;</a>
</div>
</li>

на код:

<div id="slider1">
<a class="buttons prev" href="#">&#60;</a>
<div class="viewport">
<ul class="overview">
	 <li><img src="{ASSETS_IMAGES_PATH}sboku.jpg" /></li>
	 <li><img src="{ASSETS_IMAGES_PATH}sboku2.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">&#62;</a>
</div>

Нет, я другой слайдер ставил..
Заменил код, отображается один слайд с кнопками, но как-то все криво (картинка обрезана, кнопки как-то криво и сбоку, картинки не меняются)

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

• 

[korki]

Юля123 (13 Ноябрь 2015 - 20:01) писал:

Здравствуйте, Вы этот же слайдер устанавливали?

сначала замените код:

<li>
<div id="slider5">
<a class="buttons prev" href="#">&#60;</a>
<div class="viewport">
<ul class="overview">
	 <li><img src="{ASSETS_IMAGES_PATH}sboku.jpg" /></li>
	 <li><img src="{ASSETS_IMAGES_PATH}sboku2.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">&#62;</a>
</div>
</li>

на код:

<div id="slider1">
<a class="buttons prev" href="#">&#60;</a>
<div class="viewport">
<ul class="overview">
	 <li><img src="{ASSETS_IMAGES_PATH}sboku.jpg" /></li>
	 <li><img src="{ASSETS_IMAGES_PATH}sboku2.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">&#62;</a>
</div>

Ответьте, пожалуйста по слайдеру, а то сейчас сайт выглядит совершенно неудобоваримо...

[korki]

Кроме этого сайт выдает ошибку из-за этого слайдера.

[Юля123]

korki (16 Ноябрь 2015 - 11:27) писал:

Кроме этого сайт выдает ошибку из-за этого слайдера.

Здравствуйте, пришлите, пожалуйста, ссылку на слайдер, что Вы устанавливали.

[korki]

Юля123 (16 Ноябрь 2015 - 12:11) писал:

Здравствуйте, пришлите, пожалуйста, ссылку на слайдер, что Вы устанавливали.

http://baijs.com/tinycarousel/

[Юля123]

korki (16 Ноябрь 2015 - 13:15) писал:

http://baijs.com/tinycarousel/

На сколько я вижу, это тот же слайдер. Тогда Вам необходимо загрузить файлы, которые указаны в сообщении №4.

Цитата

- jquery.tinycarousel.js
- tinycarousel.css

[korki]

Юля123 (16 Ноябрь 2015 - 13:49) писал:

На сколько я вижу, это тот же слайдер. Тогда Вам необходимо загрузить файлы, которые указаны в сообщении №4.

Загрузил. Ничего не поменялось.