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

голоса: 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;}

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

...