Question

хочу усановить его у себя на главной странице вместо первого-верхнего фото шаблон-1719

Answer 1

Все доступные слайдеры с шаблонов Юкоз можете найти в материале https://www.ucoz.ru/qa/index.php/107179 в шаблоне 1730 это не слайдер, а подобия ему с одним фото и без скрипта который бы переключал фото.

Comments

Ждите, в течение часа будет вам код.

---

Инструкцию по установке слайдера с шаблона 1730, вы можете найти в материале - здесь.

---

Yuri_Geruk,

Огромное Спасибо.! буду пробывать..
а скажите нужно у себя удалять тот блок или то что находится в нём на своём сайте.?
собераюсь поставить это в шаблоне-1719 на главной странице вместо первой фото на верху..

---

Алексей К.,

В блоке промо найдите подобный код:

    <section class="promo-wrapper">
    <div class="promo">
          <img src="/.s/t/1719/promo.jpg" alt="img">
          <div class="caption-wrap">
            <div class="caption">
                <div class="cap-ttl item-1">Lorem ipsum dolor</div>
                <div class="cap-ds description item-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo in scelerisque vehicula, nisl lorem euismod quam, eu varius nulla lectus sed felis.</div>
                <div class="cap-ds item-3"><a role="button" href="#">More</a></div>
            </div>
          </div>
    </div>

    </section>

вместо выделенного красным пробуйте ставить код слайдера.

---

Алексей К.,

Инструкция чуть поправлена, не все стили добавил какие должны быть.

---

Yuri_Geruk,

Подскажите ПЖЛ..а коды CSS для стиля слайдера здесь будут нужны или нет.?
если да то где их взять и как установить.? Подскажите..
но хотел чтобы шрифт и его цвет сохранились в стиле своего сайта-как в шаблоне 1719

библиотеки jQuery, выберите версию 1.12.4..
у меня установлена версия-1.10.2..будет работать.?

---

Алексей К.,

Все стили прописаны сразу в коде слайдера:

<link rel="stylesheet" href="/.s/t/1730/zoomslider.css">

и еще:

<style>
#promo{height:90vh;background-image:url(/.s/t/1730/image_01.jpg);background-size:cover;margin-top:-2px;min-height:530px}
.promo-container{position:absolute;z-index:22;width:100%;max-width:940px;text-align:center;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%);padding:0 40px}
.promo-container h1{line-height:1.2;font-size:4.2vw;color:#fff;margin:0}
.promo-container a[type="button"]{margin-top:20px;padding:12px 30px}
 .mouse-scroll{border:2px solid #fff;transition:none;text-align:inherit;margin:0;padding:0;width:32px;height:48px;border-radius:50px;display:block;position:absolute;bottom:40px;z-index:9;left:50%;transform:translateX(-50%)}
html.touch .mouse-scroll{display:none}
.mouse-scroll:after{content:'';width:4px;height:8px;position:absolute;left:50%;top:7px;border-radius:4px;background-color:#fff;margin-left:-2px;opacity:1;transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px);-webkit-transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px);animation:1.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s normal none infinite running scrollAnimation;-webkit-animation:1.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s normal none infinite scrollAnimation}
a[type="button"],input[type="button"]:hover,button:hover,[type="button"]:hover{background:#6277d9;border:2px solid #6277d9;color:#fff}
input[type="button"]:active,[type="button"]:active{background:#5669bf;border:2px solid #5669bf}
input[type="button"]:disabled,select:disabled,[type="button"]:disabled{opacity:.5}   
@media screen and (max-width:640px){
.zs-enabled .zs-slideshow .zs-bullets{left:0;width:100%;top:calc(100% - 15px)}
.promo-container h1{font-size:10vw}}
@media screen and (max-width:960px){.promo-container h1{font-size:8vw}}
</style>

• > у меня установлена версия-1.10.2..будет работать.?
• >> Проверяйте, будет ли. я не проверял при этой версии.

---

Yuri_Geruk,

Спасибо.! всё получилось..работает..
http://дверипитер.рф   но вот на третей фото почему то притормаживает, не двигается..
подскажите..что нетак.? может где то нужно что то исправить.?

---

Алексей К.,

Ссылку на сайт уточните.

---

Yuri_Geruk,

http://дверипитер.рф 

---

Алексей К.,

Зачем было 3 одинаковых фото ставить, вы разные ставьте и увидите разницу.

---

Yuri_Geruk,

да., хорошо, сделаю..
а подскажите..в каких строчках можно прописать стиль и цвет текста.?
чтобы он был един с дизайном сайта..

заранее Спасибо.!

---

Алексей К.,

Замените стили:

.promo-container h1{line-height:1.2;font-size:4.2vw;color:#fff;margin:0}

на:

.promo-container h1 { font-family: "Rosa Marena"; line-height: 1.2; font-size: 4.2vw; color: #f5d9b5; margin: 0; }

После найти стили:

.promo-container{position:absolute;z-index:22;width:100%;max-width:940px;text-align:center;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%);padding:0 40px}

и заменить их на:

.promo-container { position: absolute; z-index: 22; width: 100%; max-width: 940px; text-align: center; color: #f5d9b5; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 0 40px; }

---

Yuri_Geruk,

а можно ли сделать свой текст-надписать для каждого фото свой текст.?
если да, то подскажите ПЖЛ как..

---

Алексей К.,

Нельзя. Особенность данного слайдера в том, что здесь текст статический (один и тот же) для всех слайдов.