Помогите Поставить Слайдер Интересных Предложений

dimabart (09 Декабрь 2012 - 18:13) писал:

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

Eugie89 (19 Январь 2013 - 18:49) писал:

Вам нужно в шаблоне HTML перед кодом:

</head>

Добавить следующий код:

<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}demo.css" />
  <link rel="stylesheet" type="css" href="{ASSETS_STYLES_PATH}style.css" />
  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.jscrollpane.css" media="all" />
  <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
  <link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
  <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.1.3.js"></script>
  <!-- Скрипт jScrollPane -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.mousewheel.js"></script>
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.contentcarousel.js"></script>

Загрузить эти стили и скрипты через Сайт->Редактор тем->Файлы
Также в стилях необходимо исправить путь до картинок. Например, вместо:

background:#fff url(../images/cross.png) no-repeat center center;

Вам нужно:

background:#fff url({ASSETS_IMAGES_PATH}cross.png) no-repeat center center;

Загрузите картинки через Сайт->Редактор тем->Файлы
На нужную вам страницу вставьте следующий код:

<div class="container">
   <div class="header">
	<a href="http://www.ruseller.com" target="_blank"><span>Материалы проекта</span> RUSELLER.COM</a>
   </div>
   <h1>Бесконечная карусель содержания <span>на jQuery</span></h1>
   <div id="ca-container" class="ca-container">
	<div class="ca-wrapper">
	 <div class="ca-item ca-item-1">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>Stop factory farming</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span>
	   </h4>
		<a href="#" class="ca-more">Больше ...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>Animals are not commodities</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	 <div class="ca-item ca-item-2">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>Respect Life &amp; Rights</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>I hold that the more helpless a creature, the more entitled it is to protection by man from the cruelty of man.</span>
	   </h4>
		<a href="#" class="ca-more">Больше...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>Would you eat your dog?</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	 <div class="ca-item ca-item-3">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>Become 100% meat-free</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>I feel that spiritual progress does demand at some stage that we should cease to kill our fellow creatures for the satisfaction of our bodily wants.</span>
	   </h4>
		<a href="#" class="ca-more">Больше...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>You can change the world</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	 <div class="ca-item ca-item-4">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>Make a difference</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>A man is but the product of his thoughts what he thinks, he becomes.</span>
	   </h4>
		<a href="#" class="ca-more">Больше...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>Think globally, act locally</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	 <div class="ca-item ca-item-5">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>Say no to killing</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>A weak man is just by accident. A strong but non-violent man is unjust by accident.</span>
	   </h4>
		<a href="#" class="ca-more">Больше...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>Animals have rights, too!</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	 <div class="ca-item ca-item-6">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>Don't believe the lies</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it.</span>
	   </h4>
		<a href="#" class="ca-more">Больше...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>How essential is meat?</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	 <div class="ca-item ca-item-7">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>Save the planet</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>A small body of determined spirits fired by an unquenchable faith in their mission can alter the course of history.</span>
	   </h4>
		<a href="#" class="ca-more">Больше...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>Collateral damage?</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	 <div class="ca-item ca-item-8">
	  <div class="ca-item-main">
	   <div class="ca-icon"></div>
	   <h3>It's time to move on</h3>
	   <h4>
		<span class="ca-quote">&ldquo;</span>
		<span>A nation's culture resides in the hearts and in the soul of its people.</span>
	   </h4>
		<a href="#" class="ca-more">Больше...</a>
	  </div>
	  <div class="ca-content-wrapper">
	   <div class="ca-content">
		<h6>Let's finally become humans</h6>
		<a href="#" class="ca-close">Закрыть</a>
		<div class="ca-content-text">
		 <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		 <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
		 <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
		</div>
		<ul>
		 <li><a href="#">Читать еще</a></li>
		 <li><a href="#">Поделиться</a></li>
		 <li><a href="#">Вступить в клуб</a></li>
		 <li><a href="#">Стать спонсором</a></li>
		</ul>
	   </div>
	  </div>
	 </div>
	</div>
   </div>
  </div>
  <script type="text/javascript">
   $('#ca-container').contentcarousel();
  </script>

Я все установила, а у меня на главной ничего не отображается(((
Что я сделала не так?

http://moy-domovenok.ru/

Помогите установить карусель, пожалуйста.

Kalina (28 Январь 2013 - 17:40) писал:

Добрый вечер.
Хотелось бы узнать что ? и куда вы устанавливали?
Возможно вы в чём то ошиблись ....

Скачала Tiny. Нужен слайдер 2, чтоб изображал по три товара на главной странице и из настроек в админке, при внесении товара в раздел "Товары на главной".

Руководствовалась вот этим:

Для установки данного слайдера необходимо следующее:

1) Скачать архив http://baijs.nl/tiny...sel/example.zip

2) Извлечь все файлы в архиве и закачать файлы website.css, jquery.tinycarousel.min.js, buttons.png в разделе редактора тем.

3) В шаблоне "HTML" перед строкой

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

вставить

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

Далее в шаблоне "HTML" найти

<!-- Список товаров на главной -->
                          {% IFNOT index_page_goods_empty %}
                                <h3>Интересные предложения</h3>
                                <table>
                                  <tr>
                                        {% FOR index_page_goods %}
                                                  <td class="goodsListItem">  
                                                <div class="goodsListItemBlock withBorder cornerAll">
                                                         <div class="goodsListItemImage"><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></div>
                                                         <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3>
                                                   <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a>
                                                   {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %}
                                                        <br /><a href="{index_page_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
                                                  {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %}
                                                        <br /><a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a>
                                                  {% ENDIF %}
                                                </div>
                                          </td>
                                                  {% IFNOT index_page_goods.last %}{index_page_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
                                          {% ENDFOR index_page_goods %}
                                  </tr>
                                </table>
                          {% ENDIF %}      
                          <!-- end Список товаров на главной -->

и заменить на

<!-- Список товаров на главной -->
                          {% IFNOT index_page_goods_empty %}
                                <h3>Интересные предложения</h3>
                                <div id="slider-code">
                                  <a class="buttons prev" href="#">left</a>
                                  <div class="viewport">
                                         <ul class="overview">
                                           {% FOR index_page_goods %}
                                                 <li><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></li>
                                           {% ENDFOR index_page_goods %}
                                        </ul>
                                 </div>
                                 <a class="buttons next" href="#">right</a>
                           </div>
                          {% ENDIF %}      
                          <!-- end Список товаров на главной -->

Далее в файле main.js после строки

$(document).ready(function(){

вставьте

$('#slider-code').tinycarousel({ display: 2 });

После данных изменений на вашем сайте должен появиться слайдер из 3х товаров из раздела "Товары на главной".

Ничего не вышло, вообще не видно слайдера

А в идеале хотелось бы вот так, только слайдер в самом верху, а под ним текст.
Помогите пожалуйста. Ну очень надо.

Теперь приступим к установке карусели.
Почти все действия нужно производить в панели администратора. Сайт -> Редактор тем.
Загрузить и распаковать архив себе на компьютер.
  horizantal-carousel-news.zip   8.91К   28 Количество загрузок:
Содержимое архива нужно загрузить на сайт.

Теперь подключим загруженные css и js файлы к сайту.
Открыть файл HTML.
После кода:

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

Добавить:

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

Находим в "HTML"

<!-- Список товаров на главной -->
..........................................................
<!-- end Список товаров на главной -->

Весь код меняем на этот

<!-- Список товаров на главной -->
				 {% IF index_page %}
				 <script type="text/javascript">
	 jQuery(document).ready(function() {
	 // Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
		 jQuery('.d-carousel .carousel').jcarousel({
			 scroll: 1
	 });
});
</script>
			 {% IFNOT index_page_goods_empty %}
			 <h2 style="font-size:22px;color:#fff;padding:5px 10px;background:#FF4500;border-radius:10px;text-align:center;width:650px;text-decoration:none">Интересные предложения</h2>
				 <table>
				 <tr>
				 <!-- Begin Wrapper -->
	 <div id="wrapper">
	 <div class="d-carousel">
		 <ul class="carousel">
				 {% FOR index_page_goods %}
				 <li
					 < class="goodsListItemBlock withBorder cornerAll" style="position:relative;" title="Посмотреть описание &laquo;{index_page_goods.NAME}&raquo;">
					 <div class="goodsListItemImage"><div class="height-img"><a href="{index_page_goods.URL}"><img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></div>
					 <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3>
					 <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a>
					 </div>
					 {% IFNOT index_page_goods.last %}{index_page_goods.index | is_divided("50","</tr><tr>","")}{% ENDIF %}
				 {% ENDFOR index_page_goods %}
				 </ul>
			 </div>
			 <div class="clear"></div>
			 </div>
	 <!-- End Wrapper -->
	 {% ENDIF %}
			 </tr>
			 </table>
			 {% ENDIF %}
<!-- end Список товаров на главной -->	

Ну и конечно нужно "побаловаться" со стилями в carousel.css

Цитата

В данный момент на вашем сайте карусель в виде "Интересные предложения" отображается на вашей главной странице, и корректно работает. Как я понимаю вы разобрались с данным вопросом самостоятельно, воспользовавшись инструкцией выше, и данный вопрос уже не актуален?

Да, пытаюсь разобраться))) А вот такой вопрос: изображения можно как то побольше в карусели сделать? Или они автоматически идут из карточки товара в неизменном виде?

Спасибо Вам!   У меня получилось, только пока это ужасно выглядит

Ой, у меня вообще все слетело. Теперь все изображения в столбик выстроились

Цитата

Изображение подставляется из карточки товара. Если вы хотите сделать размер изображения меньше, то вы можете или изменить размер в разделе Настройки -> Основные (в данном случае уменьшатся все изображения а не только в карусели), или же можно задать принудительный размер, но в данном случае возможны потери в качестве отображения. Для задания принудительного размера необходимо задать атрибуты width или height у тега img пример

<img class="goods-image-small" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_goods.NAME}" width="100" height="80" />

Цитата

Попробуйте восстановить шаблон из резервной копии.

Выдает ошибку.

На странице возникла JS ошибка:
TypeError: $(...).tinycarousel is not a function на стоке: 63.
Адрес файла: http://moy-domovenok.../154376/main.js

Подскажите , как поправить?

И еще вопрос:  в моем случае идея заводить в карусель "Товары на главной" оказалось не очень удачной из-за маленьких изображений, как тогда сделать просто слайдер, в который я смогу загрузить фотографии нужного размера?

Заранее благодарю.

Kalina (29 Январь 2013 - 03:52) писал:

Вы можете приложить изображение с тем, как бы Вы хотели бы, чтобы этот слайдер выглядел? Вы пробовали установить слайдер, предложенный в разделе F.A.Q.?

Kalina (29 Январь 2013 - 03:37) писал:

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

Слайдер такой же
http://mircvetov76.ru/

Kalina (29 Январь 2013 - 11:01) писал:

Это карусель, Вам нужно установить точно такую же?
Такое было реализовано здесь и здесь. Сделать стрелочки точно такие же как там тоже не проблема. Просто их нужно будет потом скачать с того сайта и заменить на те имена стрелочек как идет у данных слайдеров.

Спасибо, сейчас попробую сделать))

А как поставить вертикальный слайдер товаров?

Bayer (29 Январь 2013 - 15:29) писал:

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

support 2.0 (29 Январь 2013 - 11:11) писал:

Ура! Все получилось!

Сразу не обратила внимание, но у меня на главной странице теперь двоятся Новинки. Одни показывает карусель, а другие идут таблицей чуть ниже. Как оставить только в карусели Новинки? И как отцентровать изображение и надписи  в карусели? И как сделать так, чтобы цена тоже была в карусели? И каких параметров должно быть изображение, чтобы нормально смотрелось в карусели?

Подскажите пожалуйста.