Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2017, 12:08
Аспирант
Отправить личное сообщение для Фридрих Посмотреть профиль Найти все сообщения от Фридрих
 
Регистрация: 10.09.2013
Сообщений: 59

Slider прокрутка карусели
нужна прокрутка для слайдера по кругу как в лево так и в право - поблочно....блоки dl в нутри id=slide...за ранее очень благодарен!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#slide-wrapper {
display: inline-block;
width: 694px;
height: 2em;
overflow: hidden;
border: 1px solid #666;
font-family: "Liberation Sans", Arial, sans;
}
#slide {
float: left;
margin: 0;
padding: 0;
width: 90%;
height: 100%;
border-left: 1px solid #666;
border-right: 1px solid #666;
box-sizing: border-box;
overflow: hidden;
}
#slide dl{
position: relative;
float: left;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#slide dl dt{
float: left;
width: 20%;
height: 100%;
text-align: center;
line-height: 1.8em;
border-right: 1px solid #666;
cursor: pointer;
box-sizing: border-box;
background: rgba(249, 114, 85, 1);
}
#slide dl dt:nth-child(5){
border: none;
}
#slide-left, #slide-right{
float: left;
width: 5%;
height: 100%;
text-align: center;
line-height: 1.9em;
cursor: pointer;
box-sizing: border-box;
background: rgba(249, 114, 85, 1);
}
#slide-left:hover, #slide-right:hover, #slide dl dt:hover{
background: rgba(250, 169, 86, 0.8);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script> 
$(document).ready(function(){


});
</script>
</head>
<body>
<dl id="slide-wrapper">
    <dt id="slide-left">&lt;</dt>
    <dt id="slide">        
        <dl><dt>1 серия</dt><dt>2 серия</dt><dt>3 серия</dt><dt>4 серия</dt></dl>
        <dl><dt>6 серия</dt><dt>7 серия</dt><dt>8 серия</dt><dt>9 серия</dt><dt>10 серия</dt></dl>       
        <dl><dt>11 серия</dt><dt>12 серия</dt><dt>13 серия</dt><dt>14 серия</dt><dt>15 серия</dt></dl>
    </dt>
    <dt id="slide-right">&gt;</dt>
</dl>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2017, 00:33
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

надежней подключить готовый ротатор.
советую OWLCarousel2
может вращать абсолютно любой контент.
Множество настроек.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
user adaptive slider s24344 Элементы интерфейса 1 18.02.2016 12:21
user adaptive slider s24344 Элементы интерфейса 0 18.02.2016 12:14
custom adaptive slider s24344 Элементы интерфейса 0 18.02.2016 11:01
Автоматическая прокрутка JQ карусели supermike Events/DOM/Window 0 13.09.2013 10:54
Некорректная прокрутка карусели. плагин к jq zlodiak jQuery 1 09.07.2013 14:32