Опубликовано: 22 января 2016
Слайдер как на Алиэкспресс
Доброго времени суток, подскажите пожалуйста,
Как можно изменить слайдер- сделать его уже , и стороны добавить статичные баннеры , как на алиэкспресс?Заранее спасибо за ответ
- Коломна, ул. Кирова, 60а, офис 7
- +7 (995) 656-25-45
- kolmakov.igor@gmail.com
Комментарии (13)
Здравствуйте!
Как можно изменить слайдер- сделать его уже , и стороны добавить статичные баннеры , как на алиэкспресс?в пользовательских стилях пропишите
@media only screen and (min-width: 993px){ .slider-homepage{ width:70%; } }в файле "homepage.slider.html" (магазин-витрина-шаблоны)
прописать код
внутри этого элемента прописать/вставить то что Вам необходимо
и
в пользовательских стилях прописать правило
.slider-hom-left{ display:none; } @media only screen and (min-width: 993px){ .slider-hom-left{ width:29%; display:inline-block; vertical-align:top; } }* указанное уменьшит ширину слайдера до 70% и отобразит справа от него элемент с Вашим содержимым (для экранов с областью просмотра от 993px)
Большое спасибо, если Вас не затруднит , подскажите пожалуйста как вставить внутрь этого элемента :
<div class="slider-hom-left">
</div>
две статичные промо-карточки?
В каком смысле "статичные"?
обычный список промо карточек такой
{$promocards2 = $wa->shop->promos()}
{if $promocards2}
<div class="promos">
<ul><!--
{foreach $promocards2 as $promo}
--><li id="s-promo-{$promo.id}" style="width:100%;">
<a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
<div class="background-color-layer"></div>
{if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
{if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if}
</a>
</li><!--
{/foreach}
--></ul>
</div>
{/if}
Пробовал вставлять , но встает либо сверху либо снизу,но справа никак не получается. "Статичные" я имел ввиду чтобы они не менялись как на слайдере.
Заранее Вам спасибо за ответ
Сделайте скриншот что получилось, и укажите адрес сайта
https://tereza88.host.webasyst.com/
Моя ошибка
в правиле которое я писал выше
@media only screen and (min-width: 993px){ .slider-homepage{ width:70%; } }под
width:70%;
пропишите еще свойство
display:inline-block;
Игорь, огромное Вам спасибо, всё получилось
Подскажите пожалуйста как правильно прописать ссылку на картинку внутри этого элемента:
<div class="slider-hom-left">
</div>
если просто вставляю ссылку, отображается в виде текста...
Читаем основы HTML, тег <a>:
http://htmlbook.ru/html/a
http://wm-azbook.ru/index.php/gipertekst/giperssyl...
Делаем:
Добрый день!
Сделал все выше перечисленное, а именно:
в пользовательских стилях:
@media only screen and (min-width: 993px){
.slider-homepage{
width:70%;
display:inline-block;
}
}
.slider-hom-left{
display:none;
}
@media only screen and (min-width: 993px){
.slider-hom-left{
width:29%;
display:inline-block;
vertical-align:top;
}
}
в файле homepage.slider.html:
<div class="slider-hom-left">
<a href="тут адрес ссылки" title="тут подсказка по ссылке">тут имя ссылки</a>
</div>
Но слайдер не сузился а ссылка снизу получилась.
http://rebenokvdome.com/shop2/
Видимо правила CSS прописали не туда, сверьтесь с инструкцией:
http://wm-site.ru/profitbuy/290/blok-polzovatelskie-stili/
Здравствуйте!
Нет, все сделал по правилам. В блоке пользовательских стилей все работает, кроме этих правил.
В файле homepage.slider.html куда именно вставлять:
<div class="slider-hom-left">
<a href="тут адрес ссылки" title="тут подсказка по ссылке">тут имя ссылки</a>
</div>
http://wm-site.ru/profitbuy/432/ispolzovanie-promo...
Спасибо!
.slider-homepage. поменялся после обновления на .global-promo-slider