Div в верхней части плагина цикла jquery

Question

Я использую плагин цикла jquery, и я хочу добавить раздел на слайд-шоу, где люди могут войти в систему. Это пример того, как я хотел бы, чтобы он выглядел.

mycampus.astate.edu

Я понимаю, как плагин цикла работает, я просто не могу понять, как положить вещи на нем. Я был бы очень признателен за любую помощь.

Спасибо!

Answer 1

Вы можете легко достичь этого, используя несколько вариантов для слайд-шоу:

Во-первых, давайте добавим окно входа в систему, в моем примере это имеет идентификатор login и мы также будем говорить плагин для выбора слайдов на основе на селекторе '> div.cycle-slide', так что логин входа не считается слайдом. Наконец, нам просто нужно убедиться, и установить z-индекс окна входа в систему выше слайдов.

Пример: http://jsfiddle.net/lucuma/87FUR/3/

HTML:

<div class="cycle-slideshow item" data-cycle-timeout="3000" data-cycle-speed="2000" data-cycle-slides="> div.cycle-slide" data-cycle-fx="fade"> 
    <div id="login">Your Login here</div> 
    <div class="cycle-slide"> 
     <img src="http://placehold.it/550x550/" /> 

    </div> 
    <div class="cycle-slide"> 
     <img src="http://placehold.it/550x550/ff0000" /> 

    </div> 
    <div class="cycle-slide"> 
     <img src="http://placehold.it/550x550/" /> 

    </div> 
</div> 

CSS:

div.cycle-slideshow { 
    width: 550px; 
    height: 550px; 
} 
#login { 
    position: absolute; 
    width: 200px; 
    height: 400px; 
    background-color:blue; 
    top: 0; 
    z-index: 99999; 
    opacity: .5; 
} 
img { 
    display:block; 
    max-width:100%; 
}