Не могу получить ползунок Nivo для работы

Я хочу интегрировать слайдер nivo на этой странице Link Слайды должны войти в экран, который у меня есть сверху. На данный момент я изо всех сил пытаюсь получить изображения слайдера на экране.Не могу получить ползунок Nivo для работы

HTML:

<div class="top" > 
<img src="screen.png" style="margin-top: 0px; margin-bottom: 10px; " /> 
     <div class="slider"> 
      <img src="slide-1.png" alt="" /> 
      <img src="slide-2.png" alt="" /> 
      <img src="slide-3.png" alt="" /> 
    </div>    
</div>

CSS:

#content { height: 800px; width: 1000px; float: left; display: block; margin-top: 20px; } 
#content .top { width: 1000px; height: 300px; display: block; float: left; position: relative; margin-left: 20px; margin-top: 20px; } 
#content .text3 { width: 200px; display: inline-block; margin-left: 20px; } 
#content .text4 { width: 300px; height: 90px;margin-bottom: 10px; } 
#content .face { width: 300px; height: 300px; display: block; float: left; position: relative; margin-top: 20px; } 
#content .bottom { width: 1000px; height: 400px; display: block; float: left; position: relative; margin-left: 0px; margin-top: 45px; } 
#content .box1 { width: 236px; height: 350px; background:url(box1.png) no-repeat; display: block; float: left; position: relative; margin-left: 0px; margin-top: 20px; } 
#content .box2 { width: 236px; height: 350px; background:url(box2.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; } 
#content .box3 { width: 236px; height: 350px; background:url(box3.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; } 
#content .box4 { width: 236px; height: 350px; background:url(box4.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; } 
#content .slider { width: 360px; height: 235px; margin-left: 60px; margin-top: 40px; overflow: hidden; }

Вот весь мой код:

HTML: Link

CSS: Link

Что нужно сделать для правильной работы слайдера nivo?

Я использовал Javascript и CSS с этого сайта Link

источник

2013-07-22 Daniel Hernandez

Где ссылка JS? – feitla

Я разместил ссылку на Javascript, я использовал –

Вы вносите в заголовок #slider, но div является class="slider «измените его на идентификатор или переключите идентификатор на соответствующий класс

/** EDITED **/

Измените свой CSS к этому:

#content .slider { 
width: 350px; 
height: 235px; 
margin-left: 60px; 
margin-top: 40px; 
overflow: hidden; 
position: absolute; 
top: 12px; 
right: 133px; 
}

источник

2013-07-22 18:23:03 feitla

Теперь я изменил его на класс, но я не могу получить слайдер в экране на изображении. –

Это можно сделать с помощью Z-индекса? –

Нет, это было ваше позиционирование – feitla

вы звоните Nivo слайдер по идентификатору в JS и в то время как вы только с помощью класса CSS есть в HTML использовать этот

$(window).load(function() { 
       $('.slider').nivoSlider({ 
         effect: 'random', // Specify sets like: 'fold,fade,sliceDown' 
         animSpeed: 500, // Slide transition speed 
         pauseTime: 6000, // How long each slide will show 
         startSlide: 0, // Set starting Slide (0 index) 
         controlNav: true, // 1,2,3... navigation 
         directionNav: false, // Next & Prev navigation 
         pauseOnHover: true // Stop animation while hovering 
       }); 
     });

или wrapp div с именем слайдер вокруг слайдера класса

источник

2013-07-22 18:22:51 Hushme

Теперь я изменил его на класс, но я не могу получить слайдер в экране на изображении. –

Это можно сделать с помощью Z-индекса? –

его рабочие часы там – Hushme

Не могу получить ползунок Nivo для работы

ответ

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