Страница 1 из 11
Модератор форума: dotbot 
Сообщество uCoz » Архивариус » Корзина » Установка слайдера
Установка слайдера
AlexBoycko
Сообщений: 110
Репутация: -43
Уровень замечаний:

Сообщение # 1 | 14:07:52
Здравствуйте мне нужно установить слайдер,но у меня не получается(( Вот код слайдера
Код
<style>
.slider {
float:left;
/* Ширина слайдера */
width:680px;
/* Высота слайдера */
height:331px;
position:relative;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
/* Ширина слайдера */
width:680px;
/* Высота слайдера */
height:331px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://delaisait.ucoz.ru/img/1/1/dsslider/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 img{
position:absolute;
/* Ширина слайдера */
width:680px;
/* Высота слайдера */
height:331px;
background:#000;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
}
.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://delaisait.ucoz.ru/img/1/1/dsslider/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">
<a href="http://borisovka.at.ua/index/radio/0-24"> <img src="http://testingshablon.at.ua/radio_borisovka.jpg" border="0" alt="" /></a>
</div>
<div class="item">
<a href="http://borisovka.at.ua/index/socialnye_seti/0-18"> <img src="http://testingshablon.at.ua/bud_na_svjazi.jpg" border="0" alt="" /></a>
</div>
<div class="item">
<a href="http://borisovka.at.ua/index/br_book/0-30"><img src="http://testingshablon.at.ua/BRBOOK.jpg" border="0" alt="" /></a>
</div>
<div class="item">
<img src="http://testingshablon.at.ua/chast_komandy.jpg" border="0" alt="" />
</div>
<div class="item">
<a href="http://borisovka.at.ua/index/obratnaja_svjaz/0-16"><img src="http://testingshablon.at.ua/sluzhba_pod.jpg" border="0" alt="" /></a>
</div>
<div class="item">

</div>
</div>
</div>
<script src="http://delaisait.ucoz.ru/js/jQuery/mobilyslider.js" type="text/javascript">a
</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>

Мне нужно установить между панелью меню и контентом сайта вот ссылка на сайт testin.do.am нужно сделать так чтобы он находился в центре между блоками ну вообщем как на картинке
Прикрепления: 9962874.jpg(175Kb)
Yuri_G
Модератор форума
Сообщений: 4182
Репутация: 895

Сообщение # 2 | 19:18:28
AlexBoycko, Панель управления - Дизайн - Управление дизайном(шаблоны) - Верхняя часть сайта:
Цитата
<header>
<div id="top" class="clearfix">
<div class="t-container">
<?if($SEARCH_FORM$)?>
<div id="show-search" class="show-search"></div>
<div id="b-search" class="b-search pull-right b-search-min">
$SEARCH_FORM$
</div>
<?endif?>
<div id="show-menu" class="show-menu"></div>
<nav>
<!-- <sblock_nmenu> -->
<?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
<!-- </sblock_nmenu> -->
</nav>
</div>
</div>
Вот здесь код слайдера
<div class="b-usermenu t-container">
<?if($USER_LOGGED_IN$)?>
<a title="Мой профиль" href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a> | <a title="Выход" href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a>
<?else?>
<a title="Регистрация" href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a title="Вход" href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a>
<?endif?>
</div>
</header

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

AlexBoycko
Сообщений: 110
Репутация: -43
Уровень замечаний:

Сообщение # 3 | 19:29:28
Ucoz_fan, вот моя верхняя часть сайта 
Код
<header>
  <div id="top" class="clearfix">  
  <div class="t-container">  
   
  <div id="show-search" class="show-search"></div>  
  <div id="b-search" class="b-search pull-right b-search-min">  
  <div class="searchForm"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><div align="center" class="schQuery"><input type="text" name="q" maxlength="30" size="20" class="queryField"></div><div align="center" class="schBtn"><input type="submit" class="searchSbmFl" name="sfSbm" value="Найти"></div></form></div>  
  </div>  
   
  <div id="show-menu" class="show-menu"></div>  
  <nav>
  <!-- <sblock_nmenu> -->
  <?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
  <!-- </sblock_nmenu> -->
</div>  
  <div id="cont-menu"><a dir="ltr" href="http://playerbor.at.ua/" onclick="window.open(this.href, '', 'resizable=yes,status=yes,location=yes,toolbar=no,menubar=yes,fullscreen=no,scrollbars=no,dependent=no,width=640,height=480'); return false;"><u><img src="http://testin.do.am/2014-07-03_083921.jpg" border="0" alt="" /></u></a></p>
  <p></p></div></nav>  
  </div>
</script>
</header>
AlexBoycko
Сообщений: 110
Репутация: -43
Уровень замечаний:

Сообщение # 4 | 19:30:48
Ucoz_fan, Я его поставил но получилось весьма не красиво
Прикрепления: 1109250.jpg(224Kb)
Yuri_G
Модератор форума
Сообщений: 4182
Репутация: 895

Сообщение # 5 | 19:34:30
Цитата AlexBoycko ()
Я его поставил но получилось весьма не красиво
зашел на сайт, а там уже ничего нет. Я вам выше говорил

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

AlexBoycko
Сообщений: 110
Репутация: -43
Уровень замечаний:

Сообщение # 6 | 19:38:12
Ucoz_fan, ну вот смотрите я вернул всё назад как оно было изначально
Код
<header>
  <div id="top" class="clearfix">  
  <div class="t-container">  
   
  <div id="show-search" class="show-search"></div>  
  <div id="b-search" class="b-search pull-right b-search-min">  
  <div class="searchForm"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"><div align="center" class="schQuery"><input type="text" name="q" maxlength="30" size="20" class="queryField"></div><div align="center" class="schBtn"><input type="submit" class="searchSbmFl" name="sfSbm" value="Найти"></div></form></div>  
  </div>  
   
  <div id="show-menu" class="show-menu"></div>  
  <nav><a href="$HOME_PAGE_LINK$"><img style="border: 0; position: absolute; left: 0; top: 0;" src="http://borisovka.at.ua/12.png" /></a>
  <a href="http://unitedcountry.com.ua"><img style="border: 0; position: absolute; right: 0; top: 0;" src="http://unitedcountry.com.ua/img/3" alt="Єдина Країна! Единая Страна!"></a>
  <!-- <sblock_nmenu> -->
  <?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>
  <!-- </sblock_nmenu> -->
</div>  
  <div id="cont-menu">                                           <a href="http://vk.com/borisovka.group" style="line-height: 1.6; text-align: center;" target="_blank"><img src="http://borisovka.at.ua/panel.jpg" border="0" alt="" />   <a href="http://instagram.com/borisovka_nikopol" target="_blank"><img src="http://borisovka.at.ua/panel_insta.jpg" border="0" alt="" /></a>   <a href="http://www.odnoklassniki.ru/group/50192924016716" style="line-height: 1.6; text-align: center;" target="_blank"><img src="http://borisovka.at.ua/panel_odnok.jpg" border="0" alt="" /></a>                                                                                                                                                         <img src="http://borisovka.at.ua/bez-imeni-3.gif" border="0" alt="" /><a dir="ltr" href="http://playerbor.at.ua/" onclick="window.open(this.href, '', 'resizable=yes,status=yes,location=yes,toolbar=no,menubar=yes,fullscreen=no,scrollbars=no,dependent=no,width=640,height=480'); return false;"><u><img src="http://testin.do.am/2014-07-03_083921.jpg" border="0" alt="" /></u></a><img src="http://borisovka.at.ua/bez-imeni-3.gif" border="0" alt="" /></p>
  <p></p></div></nav>  
  </div>

</header>

Пожалуйста помогите его втиснуть между панелью и контентом, а то я уже совсем ничего не понимаю,
Yuri_G
Модератор форума
Сообщений: 4182
Репутация: 895

Сообщение # 7 | 19:46:48
Цитата AlexBoycko ()
ну вот смотрите я вернул всё назад как оно было изначально
поставьте на сайт слайдер и сообщите когда установите, тогда можно будет посмотреть какие стили подгонять куда и сколько.

AlexBoycko
Сообщений: 110
Репутация: -43
Уровень замечаний:

Сообщение # 8 | 19:48:13
Ucoz_fan, всё поставил
Yuri_G
Модератор форума
Сообщений: 4182
Репутация: 895

Сообщение # 9 | 20:13:11
Цитата AlexBoycko ()
всё поставил
Код
Перейти в таблицу стилей CSS, заменить стили строка 446 на:
.b-maincontent {
float: right;
width: 681px;
margin-top: 10px;
}

строка 262 заменить на:
#top {
width: 100%;
font: 14px Arial;
font-weight: bold;
box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.14);
z-index: 25;
}

строка 421 заменить на:
.b-logo {
float: left;
width: 280px;
padding: 35px 15px 25px;
text-align: center;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 10px;
}

Заменить  стили для слайдера на
.slider {
width: 70%;
height: 331px;
position: relative;
padding-bottom: 26px;
margin: auto;
padding-top: 5px;
}
.sliderContent {
float: left;
width: 100%;
height: 331px;
clear: both;
position: relative;
overflow: hidden;
}
.sliderContent .item img {
width: 100%;
height: 331px;
background: #000;
position: absolute;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
}

Должно выйти вот так:


AlexBoycko
Сообщений: 110
Репутация: -43
Уровень замечаний:

Сообщение # 10 | 20:19:09
Ucoz_fan, всё сделал
Yuri_G
Модератор форума
Сообщений: 4182
Репутация: 895

Сообщение # 11 | 20:23:55
Цитата AlexBoycko ()
всё сделал
замените текущие стили слайдера на те что я дал. а не просто в файл стилей скопировали и 2 одинаковых класса в разных местах, заменить нужно, я проверял все работает, результат на скрине видно, меняйте.

Сообщество uCoz » Архивариус » Корзина » Установка слайдера
Страница 1 из 11
Поиск: