Вставка Слайдера И Баннеров На Главной
#1
Отправлено 09 Март 2016 - 20:30
#2
Отправлено 10 Март 2016 - 09:21
Lis (09 Март 2016 - 20:30) писал:
Здравствуйте, у Вас не получается установить слайдер из-за того, что его версия устарела и поэтому возникает конфликт. Лучше установить слайдер Flexslider. Там же Вы можете выбрать какой конкретно из слайдеров Вам больше нравится. Он "легкий" и прост в установке. Вас устроит такой вариант?
#3
Отправлено 10 Март 2016 - 11:31
Юля123 (10 Март 2016 - 09:21) писал:
#4
Отправлено 10 Март 2016 - 11:41
Lis (10 Март 2016 - 11:31) писал:
Инструкция по установке.
#5
#6
Отправлено 10 Март 2016 - 12:45
Lis (10 Март 2016 - 11:57) писал:
Вам нужно из папки 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
Отправлено 10 Март 2016 - 12:51
Юля123 (10 Март 2016 - 12:45) писал:
<!-- 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
Отправлено 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
Отправлено 10 Март 2016 - 14:54
Юля123 (10 Март 2016 - 13:52) писал:
#10
Отправлено 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
Отправлено 10 Март 2016 - 23:07
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных