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


Вставка Слайдера И Баннеров На Главной


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

#1 Lis

Lis

    Пользователь

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

Отправлено 09 Март 2016 - 20:30

Здравствуйте. Аккаунт SL-379298. Подскажите пожалуйста, как на главной странице установить этот слайдер http://www.jssor.com...lideshow.slider  и баннеры как указано на рисунке. Все файлы с архива распаковал и загрузил на сайт. Пробовал следовать инструкциям которые есть на форуме, в результате появляются ошибки js. Помогите пожалуйста.

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

  • Рис 5.png


#2 Юля123

Юля123

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

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

Отправлено 10 Март 2016 - 09:21

Просмотр сообщенияLis (09 Март 2016 - 20:30) писал:

Здравствуйте. Аккаунт SL-379298. Подскажите пожалуйста, как на главной странице установить этот слайдер http://www.jssor.com...lideshow.slider  и баннеры как указано на рисунке. Все файлы с архива распаковал и загрузил на сайт. Пробовал следовать инструкциям которые есть на форуме, в результате появляются ошибки js. Помогите пожалуйста.

Здравствуйте, у Вас не получается установить слайдер из-за того, что его версия устарела и поэтому возникает конфликт. Лучше установить слайдер Flexslider. Там же Вы можете выбрать какой конкретно из слайдеров Вам больше нравится. Он "легкий" и прост в установке. Вас устроит такой вариант?

#3 Lis

Lis

    Пользователь

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

Отправлено 10 Март 2016 - 11:31

Просмотр сообщенияЮля123 (10 Март 2016 - 09:21) писал:

Здравствуйте, у Вас не получается установить слайдер из-за того, что его версия устарела и поэтому возникает конфликт. Лучше установить слайдер Flexslider. Там же Вы можете выбрать какой конкретно из слайдеров Вам больше нравится. Он "легкий" и прост в установке. Вас устроит такой вариант?
Да, устроит. Скачал flexslider с их сайта. Там очень много файлов. Какие именно нужно загружать на сайт?

#4 Юля123

Юля123

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

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

Отправлено 10 Март 2016 - 11:41

Просмотр сообщенияLis (10 Март 2016 - 11:31) писал:

Да, устроит. Скачал flexslider с их сайта. Там очень много файлов. Какие именно нужно загружать на сайт?


Инструкция по установке.

#5 Lis

Lis

    Пользователь

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

Отправлено 10 Март 2016 - 11:57

Просмотр сообщенияЮля123 (10 Март 2016 - 11:41) писал:

Сделал все как указано в инструкции, за исключением bg_direction_nav.png и файла с кнопками. Не нашел их в архиве.

#6 Юля123

Юля123

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

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

Отправлено 10 Март 2016 - 12:45

Просмотр сообщенияLis (10 Март 2016 - 11:57) писал:

Сделал все как указано в инструкции, за исключением bg_direction_nav.png и файла с кнопками. Не нашел их в архиве.

Вам нужно из папки fonts загрузить flexslider-icon.ttf (format TrueType). Далее в шаблоне  HTMl код:


<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=caramel" />
</li>
</ul>
</div>

и заменить на код:

<!-- Place somewhere in the <body> of your page -->
<div class="col-xs-8">
<div class="flexslider">
<ul class="slides">
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=caramel" />
</li>
</ul>
</div>
</div>


В конце  Main.css добавьте код:

.col-xs-8 {
	width: 66%;
}

Далее я Вам помогу с установкой шрифта и баннеров. Слайдер будет занимать 2/3 страницы.

#7 Lis

Lis

    Пользователь

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

Отправлено 10 Март 2016 - 12:51

Просмотр сообщенияЮля123 (10 Март 2016 - 12:45) писал:

Вам нужно из папки fonts загрузить flexslider-icon.ttf (format TrueType). Далее в шаблоне  HTMl код:


<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=caramel" />
</li>
</ul>
</div>

и заменить на код:

<!-- Place somewhere in the <body> of your page -->
<div class="col-xs-8">
<div class="flexslider">
<ul class="slides">
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=caramel" />
</li>
<li>
		 <img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=caramel" />
</li>
</ul>
</div>
</div>


В конце  Main.css добавьте код:

.col-xs-8 {
width: 66%;
}

Далее я Вам помогу с установкой шрифта и баннеров. Слайдер будет занимать 2/3 страницы.
Спасибо, сделано. Ожидаю дальнейших инструкций.

#8 Юля123

Юля123

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

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

Отправлено 10 Март 2016 - 13:52

Просмотр сообщенияLis (10 Март 2016 - 12:51) писал:

Спасибо, сделано. Ожидаю дальнейших инструкций.

Шрифт для стрелок я Вам установила. Далее начнем добавлять баннеры. Для этого после кода:

<!-- Place somewhere in the <body> of your page -->
<div class="col-xs-8">
<div class="flexslider">
<ul class="slides">
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=caramel" />
</li>
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=caramel" />
</li>
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=caramel" />
</li>
<li>
				 <img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=caramel" />
</li>
</ul>
</div>
</div>

добавьте код:

<div class="banner">
  <img src="ссылка на изображение" alt="" title="" />
  <img src="ссылка на изображение.jpg" alt="" title="" />
  <img src="ссылка на изображение" alt="" title="" />
</div>


"ссылка на изображение" меняйте соответственно. Далее в конце main.css добавьте код:

.banner {
	width: 33%;
	float: right;
}

Для установленных картинок, скорее всего, потребуется дополнительные настройки отображения.

#9 Lis

Lis

    Пользователь

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

Отправлено 10 Март 2016 - 14:54

Просмотр сообщенияЮля123 (10 Март 2016 - 13:52) писал:

Для установленных картинок, скорее всего, потребуется дополнительные настройки отображения.
Внес изменения. Баннеры оказались ниже слайдера по правой стороне. Нужно их поднять вверх. Также нужно чтобы слайдер с баннерами полностью отображались на экране по высоте и ширине.

#10 Юля123

Юля123

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

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

Отправлено 10 Март 2016 - 15:21

Просмотр сообщенияLis (10 Март 2016 - 14:54) писал:

Внес изменения. Баннеры оказались ниже слайдера по правой стороне. Нужно их поднять вверх. Также нужно чтобы слайдер с баннерами полностью отображались на экране по высоте и ширине.

после кода:

<div class="banner">
  <img src="{ASSETS_IMAGES_PATH}Banner1.jpg" alt="" title="" />
  <img src="{ASSETS_IMAGES_PATH}Banner2.jpg" alt="" title="" />
  <img src="{ASSETS_IMAGES_PATH}Banner3.jpg" alt="" title="" />
</div>

добавьте код:

<div class="clearfix"></div>

далее в main.css код:

.col-xs-8 {
width: 66%;
}

замените на код:

.col-xs-8 {
width: 66%;
float:left;
}

далее в конце main.css добавьте код:

.clearfix {
	content: "";
	clear: both;
}

затем в flexslider.css найдите код:

.flexslider {
  margin: 0 0 60px;
  background: #ffffff;
  border: 4px solid #ffffff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}

замените на код:

.flexslider {
	margin: 0 0 60px;
	background: #ffffff;
	border: 4px solid #ffffff;
	position: relative;
	zoom: 1;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
	-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
	box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
	max-height: 460px;
}

далее код:

.flexslider .slides img {
  height: auto;
  -moz-user-select: none;
}

замените на код:

.flexslider .slides img {
  height: 455;
  -moz-user-select: none;
}

Соответственно Вам нужно заменить картинки. Картинки должны быть не меньше размера 1250*455px, и пропорциональны этим значениям.

#11 Lis

Lis

    Пользователь

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

Отправлено 10 Март 2016 - 23:07

Все получилось! Спасибо огромнейшее!




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

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