Answer 1

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

Comments

Спасибо! Я не правильно сказала. На главной в фото? А если выбрать др. дизайн все ломается. Я не имею больше сил редактировать.

---

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

---

Хорошо, спасибо огромное ! Я боюсь, пока подумаю.

---

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

---

webanet,

Спасибо! Буду пробовать!

---

webanet,

Шаблон поменяла, ничего не получается. Слайдер не работает. Все добавила кроме одного места. С ним тоже плохо в верхней части страницы. ПОМОГИТЕ!!!! Не могу уже.

---

Оксана Козинец,

О том как создать слайдер читайте материал https://www.ucoz.ru/qa/index.php/107179

---

Yuri_Geruk,

Ничего не получается, даже стандартная картинка теперь не ставиться. Что можно сделать?

---

Оксана Козинец,

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

---

Yuri_Geruk,

<section>

<div class="wrapper">

 вот здесь ставьте код слайдера

</div>

</section>

---

Оксана Козинец,

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

---

Yuri_Geruk,

Спасибо!!! Хорошо!!! Это все в промо поставить, то удалить???

---

Оксана Козинец,

Как сделать я уже ответил выше и поправил и выделил куда.

---

Yuri_Geruk,

Все сделала,  как здесь https://manual.ucoz.net/board/10-1-0-462 написано не получилось.http://schoole-3.my1.ru/. Что не так?

Это в промо: 

<div class="container" id="example"><div id="slides"><div class="slides_container"> 

<div class="slide"> 
<a href="#"><img src="http://schoole-3.my1.ru/Foto/1_sentjabrja_1.jpeg" width="570" height="270" alt="Slide 1"></a> 
<div class="caption" style="bottom:0"><p>Логотип uCoz</p> 
</div></div> 

<div class="slide"> 
<a href="#"><img src="http://schoole-3.my1.ru/Foto/1_sentjabrja_2.jpeg" width="570" height="270" alt="Slide 2"></a> 
<div class="caption"> 
<p>    </p> 
</div></div> 

<div class="slide"> 
<a href="#"><img src="http://schoole-3.my1.ru/Foto/1_sentjabrja_3.jpeg" width="570" height="270" alt="Slide 3"></a> 
<div class="caption"> 
<p>    </p> 
</div></div> 

<div class="slide"> 
<a href="http://schoole-3.my1.ru/Foto/1_sentjabrja_4.jpeg"><img src="http://schoole-3.my1.ru/Foto/1_sentjabrja_4.jpeg" width="570" height="270" alt="Slide 4"></a> 
<div class="caption"> 
<p>   </p> 
</div></div> 

<div class="slide"> 
<a href="#"><img src="http://schoole-3.my1.ru/Foto/1_sentjabrja_6.jpeg" width="570" height="270" alt="Slide 5"></a> 
<div class="caption"> 
<p> </p> 
</div></div> 

</div> 

<a href="#" class="prev"><img src="arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
<a href="#" class="next"><img src="arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 

</div> 
<img src="example-.png" width="739" height="341" alt="Example Frame" id="frame"> 
</div>
</div>
</section>

Это Css

.container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;} 
#example {width:600px;height:350px;position:relative;} 
#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;} 
#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;} 
#slides {position:absolute;top:15px;left:4px;z-index:100;} 
.slides_container {width:570px;overflow:hidden;position:relative;display:none;} 
.slides_container div.slide {width:570px;height:270px;display:block;} 
#slides .next, #slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;} 
#slides .next {left:585px;} 
.pagination {margin:26px auto 0;width:100px;} 
.pagination li {float:left;margin:0 1px;list-style:none;} 
.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(paginati.png);background-position:0 0;float:left;overflow:hidden;} 
.pagination li.current a {background-position:0 -12px;} 
.caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 20px 0 20px;background:#000;background:rgba(0, 0, 0, .5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid #000;text-shadow:none;} 
.slide{position: absolute; top: 0px; left: 570px; display: none; z-index: 0;}

Это верхняя часть:

<script type="text/javascript" src="/js/slides.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#slides').slides({ 
preload: true, 
preloadImage: 'loading.gif', 
play: 3000, 
pause: 2500, 
hoverPause: true, 
animationStart: function(current){ 
$('.caption').animate({ 
bottom:-35 
},100); 
if (window.console && console.log) { 
console.log('animationStart on slide: ', current); 
}; 
}, 
animationComplete: function(current){ 
$('.caption').animate({ 
bottom:0 
},200); 
if (window.console && console.log) { 
console.log('animationComplete on slide: ', current); 
}; 
}, 
slidesLoaded: function() { 
$('.caption').animate({ 
bottom:0 
},200); 
  effect: 'fade
} 
}); 
});</script>

 

---

Оксана Козинец,

Не так то, что вы скрипт слайдера http://schoole-3.my1.ru/js/slides.js не загрузили себе в папку js и файл отдает ошибку 404.

Аналогично не загрузили иконки переключения слайдов:

<a href="#" class="prev"><img src="arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
<a href="#" class="next"><img src="arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 

вместо выделенного красным нужно прописать ссылки на ваши иконки которые вы загрузили, а не стандартные оставить.

---

Yuri_Geruk,

Не поняла, какие иконки??? Где их взять? Где об этом написано? Ссылки к фото??? Мы же их выше писали??? Еще раз???

---

Оксана Козинец,

Там архив прикреплен к странице с слайдерами, там есть файлы.

Вот фото:

1. https://manual.ucoz.net/files/1/img/arrow-prev.png
2. https://manual.ucoz.net/files/1/img/arrow-next.png
3. https://manual.ucoz.net/files/1/img/example-.png

Скрипт https://manual.ucoz.net/files/1/js/slides.js Загрузить себе в файловый менеджер и прописать в коде который вы установили свои ссылки на файлы фото переключателей и на скрипт.

---

Yuri_Geruk,

В про поменяла:

<a href="#" class="prev"><img src="http://schoole-3.my1.ru/arrow-pr.png" width="24" height="43" alt="Arrow Prev"></a> 
<a href="#" class="next"><img src="http://schoole-3.my1.ru/arrow-ne.png" width="24" height="43" alt="Arrow Next"></a>

В скриптах поменяла:

<script type="text/javascript" src="http://schoole-3.my1.ru/slides.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#slides').slides({ 
preload: true, 
preloadImage: 'loading.gif', 
play: 3000, 
pause: 2500, 
hoverPause: true, 
animationStart: function(current){ 
$('.caption').animate({ 
bottom:-35 
},100); 
if (window.console && console.log) { 
console.log('animationStart on slide: ', current); 
}; 
}, 
animationComplete: function(current){ 
$('.caption').animate({ 
bottom:0 
},200); 
if (window.console && console.log) { 
console.log('animationComplete on slide: ', current); 
}; 
}, 
slidesLoaded: function() { 
$('.caption').animate({ 
bottom:0 
},200); 
  effect: 'fade
} 
}); 
});</script>

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

---

Оксана Козинец,

Не так, вы ссылку на скрипт не прописали http://schoole-3.my1.ru/js/slides.js у вас его в папке js нет. Я выше вам ссылку на него давал https://manual.ucoz.net/files/1/js/slides.js

---

Yuri_Geruk,

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

---

Оксана Козинец,

Стили в строке 62 поправьте и замените на:

#promo {margin: 0 auto;max-width: 1170px;padding:0;position:relative;z-index:10;-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5);}
#promo img {width: 1170px;height:auto;}

---

Yuri_Geruk,

Отлично!!! Спасибо огромное!!!! Молю, можно еще высоту поменьше, там какая-то полоса появилась??

Вот мой код в промо: Может там ошибка???

<!--U1PROMO1Z-->
<section id="promo">
<div class="promo-slider-wrapper">
<div class="promo-slider"><img width="960" height="500"  alt="" src="http://schoole-3.my1.ru/img/1_sentjabrja_9.jpeg" /></div>
<div class="promo-slider"><img width="960" height="560" alt="" src="http://schoole-3.my1.ru/img/1_sentjabrja_2.jpeg" /></div>
<div class="promo-slider"><img width="960" height="500"  alt="" src="http://schoole-3.my1.ru/img/1_sentjabrja_6.jpeg" /></div>
<div class="promo-slider"><img width="960" height="500" alt="" src="http://schoole-3.my1.ru/img/poslednij_zvonok_1.jpeg"></div></div>
<div class="promo-wrapper clearfix">
</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>
<script type="text/javascript"> $(function () { $('.promo-slider-wrapper').bxSlider({ auto: true,speed: 200 }); }); </script>

<!--/U1PROMO1Z-->

 

А здесь есть ошибки??? при добавлении еще фото, делает 2 полосы???

---

Оксана Козинец,

Выделил выше как должно быть. Стили в строках 62-63 заменить на:

#promo {margin: 0 auto;max-width: 1170px;max-height: 500px;overflow: hidden;padding:0;position:relative;z-index:10;-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5); }
#promo img {width: 1170px;max-height: 500px;}

---

Yuri_Geruk,

Хорошо, СПАСИБО ОГРОМНОЕ!!!!

---

Оксана Козинец,

Здравствуйте, Вы не знаете, почему фото слайдера на мониторе ноутбука смотрятся нормально, а на мониторе телефона вытянутые по вертикали? Что можно сделать для корректного отображения???

---

редактируйте параметры #promo img {width: 1170px;max-height: 500px;} и тут #promo {margin: 0 auto;max-width: 1170px;max-height: 500px;  попробуйте прописать вместо max-height: 500px; это height: auto;

---

webanet,

Не помогло. Вот с этим кодом правильно все отображается: 

#promo {margin: 0 auto;max-width: 1170px;padding:0;position:relative;z-index:10;-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5);}
#promo img {width: 1170px;height:auto;}

Что еще можно сделать??

---

не вижу изменений в коде

---

webanet,

Я поменяла на старый. Потому что также и осталось, но появилась внизу полоса. Показалось не красиво. Поменять, чтобы Вы посмотрели??

---

да поменять..........................

---

webanet,

Поменяла. На телефоне искажает также. 

Вот код :#promo {margin: 0 auto;max-width: 1000px;max-height:auto;overflow: hidden;padding:0;position:relative;z-index:10;-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5); }
#promo img {width: 1000px;max-height: 500px;}

 

---

а теперь посмотрите три раза на то что я вам дала. особенно на эту часть

попробуйте прописать вместо max-height: 500px; это height: auto;

---

webanet,

Не  ругайтесь, я ведь прописала в 62 строчке, Вы про 63 ничего не сказали. Поменяла. Все также, полоса внизу , в телефоне криво. Что не так?   Вот с эти кодом хорошо в телефоне, #promo {margin: 0 auto;max-width: 1170px;padding:0;position:relative;z-index:10;-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5);}
#promo img {width: 1170px;height:auto;}но на экране ПК плохо, слишком большое фото.

---

я не писала удалять значение height в первой части кода #promo {margin: 0 auto;max-width: 1170px;max-height: 500px;overflow:  там тоже надо было поменять значение, а не удалять его. и сделайте скрин на сколько все плохо на компьютере и какой у вас браузер

---

webanet,

Да нет так было в самом начале. 

Стили в строке 62 поправьте и замените на:

#promo {margin: 0 auto;max-width: 1170px;padding:0;position:relative;z-index:10;-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5);}
#promo img {width: 1170px;height:auto;}

 

 16.02.2019 | Автор: Yuri_Geruk

 

Гугл, а как скрин вставить? Фото на свой сайт залить?

---

---

Оксана Козинец,

Да, можете на свой сайт залить и здесь ссылку предоставить.