Aide "module slider" pour site associatif

Par Meridias, il y a 9 ans

Les bases HTML/CSS

Bonjour,

Depuis quelque temps je travaille sur un site associatif à présent presque finis structurellement parlant. A base de html(léger php).
Cependant je bloque sur un module de "slider" .

Je voudrais arriver à un résultat de ce style environ https://smartslider3.com/image-slider/ sous cette forme :

rendu souhaiter

Pour le moment je n'ai que sa pour le html:

<article class="section sliderbox"> <div class="l-container"> <div class="slider"> <div class="slider-nav"> <a href="">A Amitie</a> <a href="">S Solidartie</a> <a href="">F Famille</a> </div> <div class="slider-image"> <img src="http://lorempicsum.com/futurama/225/465/4" alt=""> </div> <div class="slider-content"> Bonjour </div> </div> </div> </article>

Et pour le css:

.sliderbox { margin-bottom: 10px; } .slider { height: 465px; position: relative; background-color: #ff00f0; overflow: hidden; *zoom: 1; } .slider-image { float: right; } .slider-nav { float: left; width: 225px; height: 465px; border-right: 2px solid #FFF; }

Je vous remercierez beaucoup de votre aide car la je suis completement perdue c'est le seul module à finir presque et sa me bloque vraiment. Je ne sais même pas si il vaux mieux utliser javascript ou autre.

Voila lettre d'un déséspéré, à bon entendeur.

9 réponses

saibe, il y a 9 ans

;) sorry...
j'entends par interactions la possibilité d'avancer ou reculer, et l'ajout d'une nav bar.
par params, un truc du genre :

params = { duree : 8000, effect : 'fade' }; var slider = new Slideshow( "#main-slider", params );
saibe, il y a 9 ans

heu, ça ne fonctionne pas...
il manque une ',' avant la déclaration de ton 'stopStart'....

Meridias, il y a 9 ans

une erreur dans le copié coller désoler :)

  • Je l'ai re save tel qu'il est actuellement je n'avais pas modif
saibe, il y a 9 ans

pas mal :)
reste à ajouter 2 3 interactions et le tour est joué ;)
et peut-être aussi une petite passation de params à l'initialisation de ton object ;)

Meridias, il y a 9 ans

Tu me parle un peu en chinois mais je vais voir ce que je pourrais faire

Meridias, il y a 9 ans

En effet sa serait plus lisible comme cela, mais juste pour afficher du texte sur chaque image c'est sur le même principe que l'affichage des images je suppose ?

saibe, il y a 9 ans

hello, tout dépend de tes connaissances.
full css c possible mais plus difficile, avec un peu de javascript tu arriveras à tes fins plus rapidement.
commence par une petite recherche "jquery slideshow" tu auras plein d'exemples et de plugins à télécharger ensuite pour la mise en place on pourra t'aider...

Meridias, il y a 9 ans

Après quelques recherche j'obtiens un javascript resemblant à sa :
https://codepen.io/anon/pen/peWxxp

Je pense c'est pas trop mal aprês je pense pas c'est optimiser et tout mais bon.

saibe, il y a 9 ans

oui, tu peux englober tes images ds une div et y ajouter du contenu,
en gros comme ça :

<div class="slide"> <img src="http://lorempixel.com/1024/465/animals" /> <p>contenu</p> <:div>

si tu veux gérer les transition en css, quand tu modifies la class de ton slide tu peux faire de même pour les éléments '.slide p'...
comme un translate par exemple ;)