Question

Здраствуйте знаю, что этот вопрос уже звучал, но я ничего не поняла, поэтому спрашиваю еще раз. Как вставить слайдер на сайт? (Чтобы одно избражение сменяло другое)

Пример слайдера - http://delena.ucoz.ru/

1. Откуда слайдер взять.

2. Какие нужны коды.

3. В какое именно место их вставить на сайте.

4. Наверняка нужно будет регулировать размер.

Все желательно по полочкам в ответе, для чайников. Заранее благодарю тех кто отликнется.

Answer 1

Больше слайдеров с стандартных шаблонов uCoz, вы можете найти в материале - здесь.

Слайдеров достаточно, как пример смотрим инструкцию - http://manual.ucoz.net/board/10-1-0-462

Так же можно взять слайдеры с последних новых шаблонов как пример номера - (1322), имеется слайдер:

далее шаблон номер 1051, имеет следующий слайдер:

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

Если вы хотите оригинальный слайдер, вам верно выше ответили, обращаться к фрилансерам за разработкой, если подходит любой с перечисленных выше, это легко можно перенести на ваш шаблон.

Comments

Спасибо за подсказку, я попробую воспользоваться вашим советом... Но я бы выдернула тот что привела в пример в своем вопросе вот только, я понятия не имею какой у него код и  где  он стоит, чтобы его выдернуть.( А вы не можете помочь мне его выдернуть?

---

Нет, выдернуть с чужого сайта, это не есть хорошо. Это называется рипнуть слайдер, то есть если простыми словами - украсть слайдер.

С этим вам здесь не помогут, только на - http://upartner.pro/

---

Ну сайт на самом деле моей подруги,  просто до этого на сайте был дизайнер, который этот слайдер на сайт вставил, а ни меня ни ее в курс дела не ввел какой, и куда именно.)

---

Я попробовала в качестве эксперимента применить примеры дизайна что мы дали, но у меня почему то в шапке сайта ни один из предложаных слайдеров не отобразился.

---

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

---

Здравствуйте, скажите пож-та если можно код слайлера в дизайне №1051, и куда его нужно вставить? (то есть я хочу слайлер вытащить и себе поставить) заранее спасибо)))

---

Слайдер с шаблона 1051

1. Сам скелет слайдера, вставить в той части шаблона где хотите видеть слайдер, обычно это верхняя часть сайта:

<div class="slider-row">
<div class="cap"></div>
<div class="cont-wrap">
<div class="slider pattern" id="camera_wrap">
<div data-src="ссылка на изображение">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится над изображением</h2>
<div class="slide-descr">Описание к слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к первому  слайду</a>
</div>
<div class="fadeIn camera_effected slide-inner-b"></div>
</div>

<div data-src="ссылка на изображение">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится над изображением</h2>
<div class="slide-descr">Описание к слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к первому  слайду</a>
</div>
<div class="fadeIn camera_effected slide-inner-b"></div>
</div>

<div data-src="ссылка на изображение">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится над изображением</h2>
<div class="slide-descr">Описание к слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к первому  слайду</a>
</div>
<div class="fadeIn camera_effected slide-inner-b"></div>
</div>

<div data-src="ссылка на изображение последнего слайда">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится для изображения последнего слайда</h2>
<div class="slide-descr">Описание к последнему слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к последнему слайду</a>
</div>                     
                    
<div class="fadeIn camera_effected" style="position: absolute;"></div>
                    
</div> 
</div>
</div>

<div class="cap"></div>
</div>

выделил синим и красным чтобы вы понимали как добавляются дополнительные слайды в слайдер.

Скрипты к слайдеру 1051

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

<script type='text/javascript' src='/.s/t/1051/template.min.js'></script>    

<script>  

jQuery(function(){    

jQuery('#camera_wrap').camera({  

height: '390px',   

loader: 'none',   

pagination: true,   

thumbnails: false,   

navigation: false,   

hover: false,   

opacityOnGrid: false,   

overlayer: true,   

playPause: false,   

time: 30000,   

imagePath: '/.s/t/1051/'  });   });  

</script>

это скрипт обеспечивает корректную работу слайдера, без данного скрипта он работать не будет.

---

Стили к слайдеру 1051

стили копируем с гугл диска https://docs.google.com/document/d/1xgiGmN2BmFuZnhmuHxxIxheslp-IwwpgHf6MpVfSuSc/edit?usp=sharing

Вроде как все.

---

Благодарю))) Но у меня еще вопрос по первому слайдеру из инструкции. http://manual.ucoz.net/board/10-1-0-462

1. Можно ли убрать из него всплывающее описание? И Вообще эту встлывающую полоску?Чтобы ее не было?

2.Где именно регулируется его ширина и высота?

3. Можно ли полностью сменить его дизайн самостоятельно в ФШ?

---

К слайдерам прилагается инструкция, если что-то хотите изменить под себя, обращайтесь на - http://upartner.pro/ где вам не только перерисуют элементы слайдера, но и напишут нужный вам.

---

Благодарю за ответ)))

---

Слайдер с шаблона 1322

1. В верхнюю часть сайта ставим код, скелет слайдера и управляющий скрипт:

 

код слайдера 1322

  <section>

  <div id="slider">

     <ul class="slides">

      <li class="slide">

      <img src="ссылка на изображение слайдера -1" alt="">

      <div class="caption">

             <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайдер">название к слайдеру -1</a></div>

             <div class="cap-ds">описание к слайду -1</div>

            </div>

      </li>

        <li class="slide">

      <img src="ссылка на изображение слайдера -2" alt="">

      <div class="caption">

             <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайдер">название к слайдеру -2</a></div>

             <div class="cap-ds">описание к слайду -2</div>

            </div>

      </li>

        <li class="slide">

      <img src="ссылка на изображение слайдера -3" alt="">

      <div class="caption">

             <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайдер">название к слайдеру -3</a></div>

             <div class="cap-ds">описание к слайду -3</div>

            </div>

      </li>

     </ul>

    </div>

    <script type="text/javascript" src="/.s/t/1322/jquery.flexslider-min.js"></script>

  </section>

  <div class="clr"></div>

 

<script>
  $('#slider').flexslider({
      animation: "slide",
      slideshowSpeed: 10000,
      directionNav: false
      });
</script>

если нужно добавить дополнительные слайды, после кода:

 <li class="slide">
             <img src="ссылка на изображение слайдера -3" alt="">
             <div class="caption">
             <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайдер">название к слайдеру -3</a></div>
             <div class="cap-ds">описание к слайду -3</div>
            </div>
         </li>

добавляем еще слайды вот так:

 

код 1322

 <li class="slide">

      <img src="ссылка на изображение слайдера -4" alt="">

      <div class="caption">

             <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайдер">название к слайдеру -4</a></div>

             <div class="cap-ds">описание к слайду -4</div>

            </div>

      </li>

Стили к слайдеру 1322

 

стили 1322

#slider {position:relative;overflow:hidden; margin:0 0 30px;}
.slides,.slide {padding:0; margin:0; list-style:none;}
.slide {position:relative; display:none;}
.slide:first-child {display:block;}
.slide img {display:block; padding:0; margin:0;}
.caption {position:absolute; padding:0 0 20px; left:0; bottom:0; width:100%; background:rgba(26,188,156,.8); color:#fff;}
.cap-ttl {padding:20px 20px 10px; font-size:20px; text-transform:uppercase;font-family:'PT Sans';}
.cap-ttl a {color:#fff;}
.cap-ds {padding:0 20px 20px; font-size:15px;}

#slider {text-align: center;}
.flex-viewport {text-align: left;}
.flex-control-nav {margin: 0; padding: 0; list-style: none;}
.flex-control-nav {position: relative;bottom:25px; text-align: center; display: inline-block;}
.flex-control-nav li {margin: 0 6px; display: block; float: left;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #fff; cursor: pointer; text-indent:100%; overflow:hidden; white-space:nowrap; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
.flex-control-paging li a:hover { background: #f27935; }
.flex-control-paging li a.flex-active { background: #f27935; cursor: default; }
.clr {clear:both;}

@media only screen and (max-width: 960px) {
.cap-ttl {padding:15px 20px 10px; font-size:18px;}
.cap-ds {padding:0 20px 15px; font-size:14px;}
}
@media only screen and (max-width: 640px){
.cap-ttl {font-size:15px;}
.cap-ds {font-size:12px;}
}
@media only screen and (max-width: 480px) {
.cap-ttl {padding:10px 20px; font-size:14px;}
.cap-ds {display:none;}
}
@media only screen and (max-width: 360px) {
#slider {display:none;}
}

вроде как все.

---

Слайдер с шаблона 1728

Например в глобальном блоке верхняя часть сайта ставим код:

 

код слайдера

<section id="promo">
                    <div class="promo-slider-wrapper">
                        <div class="promo-slider">
                            <img src="/.s/t/1728/promo1.jpg" alt="">
                            <div class="promo-caption">
                                <span class="promo-title">
                                    Lorem ipsum dolor sit amet consectetur
                                </span>
                                <a href="#" type="button">Read more</a>
                            </div>
                        </div>
                        <div class="promo-slider">
                            <img src="/.s/t/1728/promo1.jpg" alt="">
                            <div class="promo-caption">
                                <span class="promo-title">
                                    Lorem ipsum dolor sit amet consectetur
                                </span>
                                <a href="#" type="button">Read more</a>
                            </div>
                        </div>
                        <div class="promo-slider">
                            <img src="/.s/t/1728/promo1.jpg" alt="">
                            <div class="promo-caption">
                                <span class="promo-title">
                                    Lorem ipsum dolor sit amet consectetur
                                </span>
                                <a href="#" type="button">Read more</a>
                            </div>
                        </div>
                        <div class="promo-slider">
                            <img src="/.s/t/1728/promo1.jpg" alt="">
                            <div class="promo-caption">
                                <span class="promo-title">
                                    Lorem ipsum dolor sit amet consectetur
                                </span>
                                <a href="#" type="button">Read more</a>
                            </div>
                        </div>
                    </div>
                    
                </section>
                <link rel="stylesheet" href="/.s/t/1728/jquery.bxslider.min.css">
                <script src="/.s/t/1728/jquery.bxslider.min.js"></script>
                <script>
                    $(function () {
                        $('.promo-slider-wrapper').bxSlider({controls:!1,auto: true});
                    });
                </script>

 

код

Настраиваем автоматическое листание слайдов

Инструкция по настройке в материале https://www.ucoz.ru/qa/index.php/169600

---

Yuri_Geruk,

В стили к слайдеру 1728 прописать:

 

стили

.promo-caption{position:absolute;top:0;left:0;width:33.3%;background-color:rgba(7,74,140,0.93);height:100%;text-align:center;padding:2.5em;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;color:#dae7f2}
.promo-caption span{font-size:1rem;line-height:1.44;text-transform:uppercase;display:inline-block;padding:20px 0}
#promo .bx-wrapper .bx-pager{position:absolute;left:0;width:33.3%;bottom:20px}
#promo .bx-wrapper .bx-pager.bx-default-pager a{background:transparent;width:15px;height:15px;border-radius:50%;padding:4px;margin:0 2px}
.promo-slider-wrapper{overflow:hidden}
.promo-slider-wrapper .promo-slider:not(:first-child){visibility:hidden;height:0}
.bx-viewport .promo-slider-wrapper .promo-slider{visibility:visible;height:auto}
#promo .bx-wrapper .bx-pager.bx-default-pager a:hover,#promo .bx-wrapper .bx-pager.bx-default-pager a.active{background-color:rgba(12,127,242,0.93)}
#promo .bx-wrapper .bx-pager.bx-default-pager a:after{content:'';display:block;height:7px;width:7px;border-radius:50%;background:rgba(255,255,255,0.9)}
.promo-slider img{object-fit:cover;width:100%}
.promo-slider{position:relative}
#promo .bx-wrapper{border:0;margin-bottom:15px;}
#promo{margin:0 0 15px;overflow:hidden;}
.promo-i{width:calc(100% / 3);float:left;height:450px;padding:0;position:relative;background:rgba(255,255,255,0.93);color:#4f535f}
.promo-i:not(:last-child) .news-descr{border-right:1px solid rgba(11,114,217,0.15)}
.promo-i .img-wrapper{overflow:hidden;line-height:0;height:155px}
.promo-i .img-wrapper img{width:100%;height:100%;object-fit:cover}
.promo-i .news-descr{padding:20px;height:calc(100% - 155px);position:relative}
.promo-i h4{font-size:1rem;font-weight:400;color:#0c7ff2;line-height:1.57;margin:0;text-transform:uppercase;max-height:55px;overflow:hidden}
.promo-date{font-size:.85rem;line-height:1.75;padding:10px 0}
.promo-message{font-size:1rem;line-height:1.64;max-height:154px;overflow:hidden;padding-bottom:10px;margin-top:10px;position:relative}
.link-holder{bottom:10px;padding:10px 20px;left:0;width:100%;text-align:right;position:absolute}
.link-holder a{display:inline-block}

 

@media only screen and (max-width:1200px){

    .wrapper{width:100%;padding:0 20px}

.promo-caption{padding:1em}

}

@media only screen and (max-width:960px){

#header .wrapper{width:100%;padding:0}

}

@media only screen and (max-width:768px){

.promo-i,.promo-i:first-child{width:50%}

.promo-i:first-child .img-wrapper{float:none;width:100%;height:155px}

.promo-i:first-child .news-descr{width:100%;padding:25px}

.promo-i:first-child h4{font-size:1rem;font-weight:700}

.promo-i:first-child .link-holder{width:100%;bottom:15px}

.promo-i:first-child .promo-message{max-height:118px}

}@media only screen and (max-width:640px){

    .wrapper{padding:0 15px}

.promo-caption{width:100%;height:100%;bottom:0;top:auto}

span.promo-title{font-size:1rem;padding:10px}

#promo .bx-wrapper .bx-pager{display:none}

}

@media only screen and (max-width:480px){

.promo-i,.promo-i:first-child{width:100%}

.promo-i .link-holder,.promo-i:first-child .link-holder{bottom:30px}

}

@media only screen and (max-width:360px){.wrapper{padding:0 10px}

}

ссылки на фото в коде выше замените на свои и текст отредактируйте на свой.