Держите ползунок полной ширины внутри div

Я делаю ползунок полной ширины, но с определенной высотой (500 пикселей). Этот слайдер идет после меню, и я пытаюсь удерживать слайдер внутри div, но он не работает, содержимое плавает вне div. Как я могу сохранить содержимое, заключенное в div?Держите ползунок полной ширины внутри div

Вот мой код.

HTML

<div id="container"> 
    <div id="header"> 
     <h1>Easy Slider jQuery Plugin - continuous demo</h1> 
    </div> 
    <div id="content"> 
     <div id="slider"> 
      <ul>     
       <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> 
       <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li> 
       <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> 
       <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> 
       <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>   
      </ul> 
     </div> 
    </div> 
</div>

CSS

#container {  
    margin: 0 auto; 
    position: relative; 
    text-align: left; 
    width: 696px; 
    background: #fff;  
    margin-bottom: 2em; 
} 
#header { 
    height: 80px; 
    line-height: 80px; 
    background: #5DC9E1; 
    color: #fff; 
}    
#content{ 
    position: relative; 
}   

/* Easy Slider */ 
#slider ul, #slider li, 
#slider2 ul, #slider2 li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#slider2 { 
    margin-top: 1em; 
} 
#slider li, #slider2 li { 
    /* 
     define width and height of list item (slide) 
     entire slider area will adjust according 
     to the parameters provided here 
    */ 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
} 

#prevBtn, #nextBtn, 
#slider1next, #slider1prev { 
    display: block; 
    width: 30px; 
    height: 77px; 
    position: absolute; 
    left: -30px; 
    top: 71px; 
    z-index: 1000; 
} 
#nextBtn, #slider1next { 
    left: 696px; 
}              
#prevBtn a, #nextBtn a, 
#slider1next a, #slider1prev a { 
    display: block; 
    position: relative; 
    width: 30px; 
    height: 77px; 
    background: url(../images/btn_prev.gif) no-repeat 0 0; 
} 
#nextBtn a, #slider1next a { 
    background: url(../images/btn_next.gif) no-repeat 0 0; 
}

источник

2014-01-13 Thrice89

Jquery не требуется для этого.
Используйте вместо этого:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.slider{ 
    overflow:auto; 
    height: 50px; 
    width:50px; 
} 
</style> 
</head> 
<body> 
<div class="slider"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
    <div>Item 4</div> 
    <div>Item 5</div> 
    <div>Item 6</div> 
    <div>Item 7</div> 
    <div>Item 8</div> 
    <div>Item 9</div> 
    <div>Item 10</div> 
    <div>Item 11</div> 
    <div>Item 12</div> 
</div> 
</body>

И не используйте #id для классов использовать класс = "Classname" и в вашем CSS: .classname, смотри пример.

источник

2014-01-13 15:14:44 WhiteFang

Спасибо! Если мне нужен ползунок полной ширины 100%, мне просто нужно заменить ширину от 50 px до 100%, и она должна работать правильно? Мне не нужно скользить, чтобы реагировать только на отображение изображений ... – Thrice89

Держите ползунок полной ширины внутри div

ответ

Смежные вопросы