Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Слайдер конфликтует с ucoz (Подскажите)
Слайдер конфликтует с ucoz
MikhailovCity
Сообщений: 249
Репутация: 22

Сообщение # 1 | 22:17:42
Здравствуйте!

Нашёл интересный слайде ссылка

Вот простое демо ставлю на сайт ucoz, не работает конфликтует с

Код
<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>


Подскажите как поставить?
Rostislav
Сообщений: 2394
Репутация: 591

Сообщение # 2 | 11:00:16
MikhailovCity, отключите подключаемую автоматически библиотеку jQuery от uCoz на странице со слайдером. Инструкция по отключению http://forum.ucoz.ru/forum/64-37184-1 Не забудьте добавить другие необходимые для работы системные скрипты

MikhailovCity
Сообщений: 249
Репутация: 22

Сообщение # 3 | 15:17:37
Rostislav, Спасибо, большое)))
MikhailovCity
Сообщений: 249
Репутация: 22

Сообщение # 4 | 23:20:46
Здравствуйте! Как в слайдере 1322 шаблона в слайдере, сделать картинку резиновой или адаптивной? Хочу поставить слайдер в доску объявлений в блок. Если в него поставить длинную картинку, маленькую, то она в нём смотрится маленькой, подскажите как всё настроить?

CSS

Код

<style>

#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 auto;
}
.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;
}
}
</style>


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


HTML

Код


<section>
<div id="slider">
<ul class="slides">
<li class="slide">
<img src="/_bd/14/53755529.jpg" alt="">
<div class="caption">
<div class="cap-ttl">
<a href="/_bd/14/53755529.jpg">название к слайдеру -1</a>
</div>
<div class="cap-ds">описание к слайду -1</div>
</div>
</li>
<li class="slide">
<img src="/_bd/9/33600318.jpg" alt="">
<div class="caption">
<div class="cap-ttl">
<a href="/_bd/9/33600318.jpg">название к слайдеру -2</a>
</div>
<div class="cap-ds">описание к слайду -2</div>
</div>
</li>
<li class="slide">
<img src="/_bd/14/53755529.jpg" alt="">
<div class="caption">
<div class="cap-ttl">
<a href="/_bd/14/53755529.jpg">название к слайдеру -3</a>
</div>
<div class="cap-ds">описание к слайду -3</div>
</div>
</li>
</ul>
</div>
</section>



Скрипт

Код


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

nataliVL
Сообщений: 18
Репутация: 0

Сообщение # 5 | 21:45:23
Здравствуйте. подскажите, плиз, как в шапке сайта можно сделать слайдер фотографий. чтоб автоматически передвигалось несколько фотографий
Сообщение отредактировал nataliVL - Суббота, 21 Янв 2017, 23:30:02
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Слайдер конфликтует с ucoz (Подскажите)
Страница 1 из 11
Поиск: