Не могу заставить слайдер Nivo работать

Я хочу интегрировать слайдер 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: ссылка

CSS: ссылка

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

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


html css nivo-slider
person Daniel Hernandez    schedule 22.07.2013    source источник
comment
Где ссылка на JS?   -  person feitla    schedule 22.07.2013
comment
Я разместил ссылку на Javascript, который я использовал   -  person Daniel Hernandez    schedule 22.07.2013

Ответы (2)


arrow_upward
1
arrow_downward

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

/** ИЗМЕНЕНО **/

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

#content .slider {
width: 350px;
height: 235px;
margin-left: 60px;
margin-top: 40px;
overflow: hidden;
position: absolute;
top: 12px;
right: 133px;
}
person feitla    schedule 22.07.2013
comment
Теперь я изменил его на класс, но я не могу вывести ползунок на экран на изображении. - person Daniel Hernandez; 22.07.2013
comment
Нет, это было ваше позиционирование - person feitla; 22.07.2013
comment
Большое Вам спасибо. Было бы неплохо, если бы вы проголосовали за мой вопрос. - person Daniel Hernandez; 22.07.2013

arrow_upward
1
arrow_downward

вы вызываете слайдер 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
                });
        });

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

person Hushme    schedule 22.07.2013
comment
Теперь я изменил его на класс, но я не могу вывести ползунок на экран на изображении. - person Daniel Hernandez; 22.07.2013
comment
Мне нужно расположить ползунок поверх изображения экрана. Как это сделать? - person Daniel Hernandez; 22.07.2013
comment
по абсолютной позиции см. css там внизу - person Hushme; 22.07.2013
comment
Большое Вам спасибо. Было бы неплохо, если бы вы проголосовали за мой вопрос. - person Daniel Hernandez; 22.07.2013