Slideshow Resposívo

[Thiiiziiin 0]

Olá pessoal, estou com o seguinte problema:

Criei um slideshow para meu site do zero, usando o cycle...

Porém, vi que ele não tem uma opção automática para inserção dos botões (Próx. e Ant.) (Pelo menos não encontrei)

Obs.: estou me referindo ao novo cycle, o que tem suporte o design responsívo.

 

Sendo assim, vi uma opção de configuração do próprio cycle, no qual ele te dá a opção dos botões chamando-os em uma div.

Criei uma outra div chamada fundobotoes_slide, para que os botões fiquem dentro dessa div.

Fiz isso tudo certinho, funcionou beleza.

 

Mas aí eu fiz a configuração para que o slide fique 100% até chegar a 1024px depois disso ele se limita a 1024px, ou seja, max-width: 1024px.

Porém isso não está funcionando para esses botões, eles funcionam até antes dos 1024px, depois desconfigura :(

 

Alguém sabe me dizer onde que estou errando?

 

Obs.: Sou novo aqui no forum e não sei se estou postando certo esta mensamgem, se tiver algo de errado por favor me avisem.

 

Segue o código:

slideshow {
    margin-top: 261px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index:1;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}
#next {
    width: 40px;
    height: 40px;
    margin-top: -45px;
    margin-right: 2%;
    float: right;
}
#prev {
    width: 40px;
    height: 40px;
    margin-top: -45px;
    margin-left: 2%;
    float:left;
}
.FundoBotoes_Slide {
    position: relative;
    text-align: center;
    width: 100%;
    z-index:5;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

[Marlon Pacheco 132]

Buenas tchê.

 

Posta o HTML do seu slider tbm.

[Thiiiziiin 0]

Segue o html:

<div class="slideshow"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-fx="fade"
data-cycle-pause-on-hover="true"
data-cycle-speed="400"

>
<img src="Imagens/Slide_Home/01.jpg">
<img src="Imagens/Slide_Home/02.jpg">
<img src="Imagens/Slide_Home/03.jpg">
<img src="Imagens/Slide_Home/04.jpg">
<img src="Imagens/Slide_Home/05.jpg">
<img src="Imagens/Slide_Home/06.jpg">
<img src="Imagens/Slide_Home/07.jpg">
</div>

<div class="fluid FundoBotoes_Slide">
<div id="next" class="fluid"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Próxima','','Imagens/Slide_Home/Proxima1.png',1)"><img id="Próxima" src="Imagens/Slide_Home/Proxima2.png" alt=""></a></div>


<div id="prev" class="fluid"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Anterior','','Imagens/Slide_Home/Anterior1.png',1)"><img id="Anterior" src="Imagens/Slide_Home/Anterior2.png" alt=""></a></div>
</div>

[victorqueiroz 34]

<div class="slideshow"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-fx="fade"
data-cycle-pause-on-hover="true"
data-cycle-speed="400"

>
<img src="Imagens/Slide_Home/01.jpg" class="img" >
<img src="Imagens/Slide_Home/02.jpg" class="img" >
<img src="Imagens/Slide_Home/03.jpg" class="img" >
<img src="Imagens/Slide_Home/04.jpg" class="img" >
<img src="Imagens/Slide_Home/05.jpg" class="img" >
<img src="Imagens/Slide_Home/06.jpg" class="img" >
<img src="Imagens/Slide_Home/07.jpg" class="img" >
</div>

<div class="fluid FundoBotoes_Slide">
<div id="next" class="fluid"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Próxima','','Imagens/Slide_Home/Proxima1.png',1)"><img id="Próxima" src="Imagens/Slide_Home/Proxima2.png" alt=""></a></div>


<div id="prev" class="fluid"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Anterior','','Imagens/Slide_Home/Anterior1.png',1)"><img id="Anterior" src="Imagens/Slide_Home/Anterior2.png" alt=""></a></div>
</div>

CSS

.img { width:100%; }

[Thiiiziiin 0]

Olá sr. VictorQueiroz, boa noite.

Tentei colocar

.img { width:100%; }

Mas todas as imagens ficaram 100%. Não deu certo assim...
Vou postar três imagens para me expressar melhor.
Agradeço a todos que estão respondendo!

 

Esta é a imagem com a tela reduzida, mais ou menos uns 980px:
Obs.: Gostaria que estes botões de próxima e anterior ficassem deste jeito em qualquer resolução de tela.

 

 

2ª imagem mostra como fica depois que passa de 1024px:

 

3ª e última imagem mostra como fica em tela cheia:

 

 

OBS.: NOTEM QUE O SLIDE FICOU ALINHADO CERTINHO, MAS AS SETAS NÃO :(
Na verdade eu só queria que a div "FundoBotoes_Slide", acompanhasse o slide.

[reebr 94]

Deixe as setas com position:absolute, fica mais fácil de definir a posição delas independente do tamanho da imagem, exemplo:

http://jsfiddle.net/rnxn/dp1rg61u/

[Thiiiziiin 0]

Olá sr. rnxn, tentei dessa forma sugerida mas não deu certo. Obrigado pela ajuda.

Mas desencanei rs, vou tentar fazer de outro jeito. Obrigado a todos.