Posted: January 22, 2016

Слайдер как на Алиэкспресс

Доброго времени суток, подскажите пожалуйста,

Как можно изменить слайдер- сделать его уже , и стороны добавить статичные баннеры , как на алиэкспресс?


Заранее спасибо за ответ

Комментарии (13)

  • Колмаков Игорь November 30, 2015 12:11 #

    Здравствуйте!

    Как можно изменить слайдер- сделать его уже , и стороны добавить статичные баннеры , как на алиэкспресс?

    в пользовательских стилях пропишите

    @media only screen and (min-width: 993px){
    .slider-homepage{
    width:70%;
    }
    }

    в файле "homepage.slider.html" (магазин-витрина-шаблоны)

    прописать код

    <div class="slider-hom-left">
    
    </div>

    внутри этого элемента прописать/вставить то что Вам необходимо

    и

    в пользовательских стилях прописать правило

    .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)




    1
  • Тимур Ахм December 2, 2015 19:36 #

    Большое спасибо, если Вас не затруднит , подскажите пожалуйста как вставить внутрь этого элемента :

    <div class="slider-hom-left">

    </div>

    две статичные промо-карточки?

    1
  • Колмаков Игорь December 3, 2015 10:40 #

    В каком смысле "статичные"?

    обычный список промо карточек такой

    {$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}



    1
  • Тимур Ахм December 4, 2015 07:56 #

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

    Заранее Вам спасибо за ответ

    1
  • Колмаков Игорь December 4, 2015 12:57 #

    Сделайте скриншот что получилось, и укажите адрес сайта

    1
  • Тимур Ахм December 6, 2015 18:11 #

    1
  • Колмаков Игорь December 7, 2015 11:46 #

    Моя ошибка

    в правиле которое я писал выше

    @media only screen and (min-width: 993px){
    .slider-homepage{
    width:70%;
    }
    }

    под

    width:70%;

    пропишите еще свойство

    display:inline-block;

    1
  • Тимур Ахм December 7, 2015 13:41 #

    Игорь, огромное Вам спасибо, всё получилось

    1
  • May 12, 2016 00:17 #

    Подскажите пожалуйста как правильно прописать ссылку на картинку внутри этого элемента:

    <div class="slider-hom-left">

    </div>

    если просто вставляю ссылку, отображается в виде текста...


    1
  • Дмитрий June 21, 2016 10:43 #

    Добрый день!

    Сделал все выше перечисленное, а именно:

    в пользовательских стилях:

    @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/


    1
  • Дмитрий July 28, 2016 13:34 #

    Здравствуйте!

    Нет, все сделал по правилам. В блоке пользовательских стилей все работает, кроме этих правил.

    В файле homepage.slider.html куда именно вставлять:

    <div class="slider-hom-left">

    <a href="тут адрес ссылки" title="тут подсказка по ссылке">тут имя ссылки</a>

    </div>


    1
  • Дмитрий July 29, 2016 14:36 #

    Спасибо!

    1
    • September 15, 2016 23:27 #

      .slider-homepage. поменялся после обновления на .global-promo-slider

      1

Add answer

To add a comment please sign up or login

Услуги

Контакты

Дорогие друзья!

К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.

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

Internet Explorer

от Microsoft

Chrome

от Google

Safari

от Apple

Opera

от Opera Software

Firefox

от Mozilla

Вверх