>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Слайдер вместо шапки

голоса: 0

Добрый день ! Подскажите пожалуйста будет ли работать у меня на сайте такой слайдер (нашла в интернете).Если да ,то куда это вставить,чтобы было на главной там где фото детей.Боюсь все испортить,а обычно так и происходит.Заранее благодарю.

<div align="center"><style>

<style>

#content {

/* Ширина слайдера */

width:700px;

margin:0px;

}

.slider {

float:left;

/* Ширина слайдера */

width:700px;

/* Высота слайдера */

height:350px;

position:relative;

padding-bottom:26px;

background:url(http://zornet.ru/CSS-ZORNET/Skript/bottom_shadow.png) no-repeat bottom center;

}

.sliderContent {

float:left;

/* Ширина слайдера */

width:700px;

/* Высота слайдера */

height:350px;

clear:both;

position:relative;

overflow:hidden;

}

.sliderArrows a {

display:block;

text-indent:-9999px;

outline:none;

z-index:50;

background-image:url(http://zornet.ru/CSS-ZORNET/Skript/prev_next.png);

width:42px;

height:42px;

position:absolute;

top:50%;

margin-top:-34px;

}

.prev {

background-position:0 0;

left:15px;

}

.prev:hover {

background-position:0 -44px;

}

.next {

right:15px;

background-position:-44px 0;

}

.next:hover {

background-position:-44px -44px;

}

.sliderContent .item {

position:absolute;

/* Ширина слайдера */

width:700px;

/* Высота слайдера */

height:350px;

background:#fff;

}

.sliderBullets {

position:absolute;

bottom:0;

left:50%;

z-index:50;

margin-left:-45px;

}

.sliderBullets a {

display:block;

float:left;

text-indent:-9999px;

outline:none;

margin-left:5px;

width:10px;

height:11px;

background:url(http://zornet.ru/CSS-ZORNET/Skript/bullets.png) no-repeat;

}

.sliderBullets .active {

background-position:0 -11px;

}

.sliderContent a {

outline:none;

}

</style>

<div class="slider dsslider">

<div class="sliderContent">

<div class="item">

<img src=" Ссылка к картинке 1" alt="" />

</div>

<div class="item">

<img src="  Ссылка к картинке 2 " alt="" />

</div>

<div class="item">

<img src="   Ссылка к картинке 3" alt="" />

</div>

</div>

</div>

<script src="http://zornet.ru/CSS-ZORNET/Skript/mobilyslider.js" type="text/javascript">

</script>

<script type="text/javascript">

$('.dsslider').mobilyslider({

// Тип воспроизведения (vertical) или удалить всю строку

transition: 'fade',

// Скорость перелистывания

animationSpeed: 800,

// Автовоспроизведение включено

autoplay: true,

// Скорость автовоспроизведения

autoplaySpeed: 3000,

// Остановка во время наведения курсора (false)

pauseOnHover: true,

// Показывать кнопки вперёд назад (false)

bullets: true,

// Показывать нижние кнопки управления (false)

arrowsHide: true

});

</script><div align="center"><style>

<style>

 

 

 

Адрес сайта http://1a.ucoz.ua/
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0
 
Лучший ответ
В данном случае чтобы все было правильно, весь код и скрипты слайдера нужно установить в глобальном блоке Promo - http://1a.ucoz.ua/panel/?a=tmpl;m=1;pda=0;t=PROMO вместо текущего кода который там сейчас.
| Автор:
Выбор ответа лучшим | | Автор: iрина мiтлевич
Я правильно поняла:удаляю все что есть в PROMO и вставляю то, что я  Вам показала?
| Автор:
iрина мiтлевич,

1. Делаем следующее, это добавить в таблицу стилей CSS в самый низ:

#content {

/* Ширина слайдера */

width:700px;

margin:0px;

}

.slider {

float:left;

/* Ширина слайдера */

width:700px;

/* Высота слайдера */

height:350px;

position:relative;

padding-bottom:26px;

background:url(http://zornet.ru/CSS-ZORNET/Skript/bottom_shadow.png) no-repeat bottom center;

}

.sliderContent {

float:left;

/* Ширина слайдера */

width:700px;

/* Высота слайдера */

height:350px;

clear:both;

position:relative;

overflow:hidden;

}

.sliderArrows a {

display:block;

text-indent:-9999px;

outline:none;

z-index:50;

background-image:url(http://zornet.ru/CSS-ZORNET/Skript/prev_next.png);

width:42px;

height:42px;

position:absolute;

top:50%;

margin-top:-34px;

}

.prev {

background-position:0 0;

left:15px;

}

.prev:hover {

background-position:0 -44px;

}

.next {

right:15px;

background-position:-44px 0;

}

.next:hover {

background-position:-44px -44px;

}

.sliderContent .item {

position:absolute;

/* Ширина слайдера */

width:700px;

/* Высота слайдера */

height:350px;

background:#fff;

}

.sliderBullets {

position:absolute;

bottom:0;

left:50%;

z-index:50;

margin-left:-45px;

}

.sliderBullets a {

display:block;

float:left;

text-indent:-9999px;

outline:none;

margin-left:5px;

width:10px;

height:11px;

background:url(http://zornet.ru/CSS-ZORNET/Skript/bullets.png) no-repeat;

}

.sliderBullets .active {

background-position:0 -11px;

}

.sliderContent a {

outline:none;

}

2. В глобальном блоке промо ставим лишь код:

<div class="slider dsslider">
<div class="sliderContent">
<div class="item">
<img src=" Ссылка к картинке 1" alt="" />
</div>

<div class="item">
<img src="  Ссылка к картинке 2 " alt="" />
</div>

<div class="item">
<img src="   Ссылка к картинке 3" alt="" />
</div>
</div>
</div>

<script src="http://zornet.ru/CSS-ZORNET/Skript/mobilyslider.js" type="text/javascript">

</script>

<script type="text/javascript">

$('.dsslider').mobilyslider({

// Тип воспроизведения (vertical) или удалить всю строку

transition: 'fade',

// Скорость перелистывания

animationSpeed: 800,

// Автовоспроизведение включено

autoplay: true,

// Скорость автовоспроизведения

autoplaySpeed: 3000,

// Остановка во время наведения курсора (false)

pauseOnHover: true,

// Показывать кнопки вперёд назад (false)

bullets: true,

// Показывать нижние кнопки управления (false)

arrowsHide: true

});

</script>

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

| Автор:
Посмотрите,пожалуйста,вроде все вставила куда надо,а что-то не то.
| Автор:
iрина мiтлевич,

вы допустили ошибки при установке стилей, выше зацепили другие стили и удалили кавычки, замените стили с строки номер 1206, до конца на следующие стили:

 #content {
width:780px;
margin:0px;
}
.slider {
float:left;
width:780px;
height:350px;
position:relative;
padding-bottom:26px;
background:url(http://zornet.ru/CSS-ZORNET/Skript/bottom_shadow.png) no-repeat bottom center;
}

.sliderContent {
float:left;
width:780px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderContent img {width:780px;height:auto!important;}

.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://zornet.ru/CSS-ZORNET/Skript/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}

.prev {
background-position:0 0;
left:15px;
}

.prev:hover {
background-position:0 -44px;
}

.next {
right:15px;
background-position:-44px 0;
}

.next:hover {
background-position:-44px -44px;
}

.sliderContent .item {
position:absolute;
width:780px;
height:350px;
background:#fff;}

.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}

.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://zornet.ru/CSS-ZORNET/Skript/bullets.png) no-repeat;
}

.sliderBullets .active {
background-position:0 -11px;
}

.sliderContent a {
outline:none;
}

после все будет корректно.

| Автор:
...