11521 sujets

JavaScript, DOM et API Web HTML5

Remplacer scrollbar pas flèches (ou autre solution)

Bonjour,

Après avoir cherché pendant des heures comment créer un diaporama (mes photos l'une à côté de l'autre défilantes à l'aide de flèche et automatiquement, j'ai retourné tous les sites possibles, testé tous les slider, slideshow, carrousel et j'en passe et tous ne permette de faire défiler les photos que l'une après l'autre dans un espacer restreint. hors, ce n'est pas ce que je veux. Ce que j'aimerai, c'est que mes photos soient toutes alignées les unes à côtés des autres, et pouvoir déplacer vers la droite et la gauche pour voir le reste des images lorsque le diaporama sort de mon site.

J'ai presque réussi à avoir ce que j'aimerai en les plaçant l'une à côté de l'autre, et en créant une scrollbar. A ce moment là, il suffit de déplacer la scrollbar vers la droite pour voir le reste de mes photos. Après un overflow-hidden, j'ai réussi à intégrer de jolis flèches pour remplacer la scollbar, et maintenant je bloque, puisque les flèches ne remplacent absolument pas la scrollbar. Je viens donc faire appel à vous, je me doute qu'il va être question de javascript ou de codes plus poussés que ça, donc si vous savez comment m'aider.. Un grand merci d'avance car je n'en peux plus de me prendre la tête ! Merci merci merci <3

(voici mon site test pour vous montrer ce que ça donne pour le moment : https://morganesfairyphotographe.blogspot.fr/

et mon code en entier :

<!doctype html>


<style> 
/* Next & previous buttons */
.prev, .next {
 cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -61px;
color: rgba(0, 0, 0, 0.63);
    font-size: 50px;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
color: #ffffff;
}

#main {
    width: auto;
    height: auto;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

#main div {
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}

#HTML2 {
overflow: hidden;
}
</style>



<div id="main">
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/k46u.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/n7o1.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/zpo1.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/rchg.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/a9sx.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/22qd.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/qmpi.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/csqk.jpg" style="width:auto" />
</div>
<div class="mySlides fade">
  <img src="http://zupimages.net/up/17/29/wxx3.jpg" style="width:auto" />
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>



</!doctype>

Modifié par morganesfairy (21 Jul 2017 - 01:13)
Bonjour,

Peut-être que le plugin jQuery Smooth Div Scroll répondra à tes besoins...

EDIT : pense à remettre ton HTML un peu conforme, parce que là c'est un peu la foire, et non le doctype ça ne se ferme pas ! Smiley cligne
Modifié par SolidSnake (20 Jul 2017 - 13:49)
Merci beaucoup, mais comment l'adapter à mon code actuel ? Je suis un peu novice sur ce sujet..

EDIT : désolé, comme je l'ai dis, j'adore faire des templates mais je reste novice et j'ai encore beaucoup de choses à apprendre ! Je viens ici pour ça d'ailleurs Smiley smile
Modifié par morganesfairy (20 Jul 2017 - 13:48)
Pas de problème,
En somme quand tu veux utiliser un plugin, il faut au départ suivre à la lettre les instructions (l'architecture) de l'auteur.

C'est à dire ici en HTML :
<div id="makeMeScrollable">
	<img src="mon-image-1.jpg"/>
	<img src="mon-image-2.jpg"/>
	<img src="mon-image-3.jpg"/>
	...
</div>


en CSS, tu récupères celui associé :
http://www.smoothdivscroll.com/css.html

Et pour le JS, en plus des dépendances (surtout jQuery), commence par le code basic :
$(document).ready(function () {
	$("#makeMeScrollable").smoothDivScroll({
		mousewheelScrolling: "allDirections",
		manualContinuousScrolling: true,
		autoScrollingMode: "onStart"
	})
})
// Voire plus basic encore...
$(document).ready(function () {
	$("#makeMeScrollable").smoothDivScroll()
})


Et pour info, l'architecture de base HTML5 :
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
  
</body>
</html>

Modifié par SolidSnake (21 Jul 2017 - 07:55)
Merci beaucoup ! J'ai dû faire quelques chose de mal car visiblement ça ne fonctionne pas.. Voici mon code final :

EDIT : J'ai installé les dépendances, mais sur le site du plugin il est écrit : " modifiez le chemin d'accès au dossier où vous gardez vos fichiers JavaScript " donc je suis encore plus perdu et me demande s'il est possible d'installer ce plugin sur blogger..


<div id="makeMeScrollable">
<img src="http://zupimages.net/up/17/29/nb59.jpg"/>
<img src="http://zupimages.net/up/17/29/nb3a.jpg"/>
<img src="http://zupimages.net/up/17/29/ngmi.jpg"/>
<img src="http://zupimages.net/up/17/29/xckv.jpg"/>
<img src="http://zupimages.net/up/17/29/un21.jpg"/>
<img src="http://zupimages.net/up/17/29/oj1l.jpg"/>
<img src="http://zupimages.net/up/17/29/tgko.jpg"/>
<img src="http://zupimages.net/up/17/29/u2mn.jpg"/>
<img src="http://zupimages.net/up/17/29/e04g.jpg"/>
<img src="http://zupimages.net/up/17/29/n78k.jpg"/>
</div>

<style>
#makeMeScrollable div.scrollableArea {
	position: relative;
	display: block
	float: left;
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
div.scrollingHotSpotLeft
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}

div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; 
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; 

div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}

div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
</style>

<script type="text/javascript">
	$(document).ready(function () {
		$("#makeMeScrollable").smoothDivScroll({
			mousewheelScrolling: "allDirections",
			manualContinuousScrolling: true,
			autoScrollingMode: "onStart"
		});
	});
</script>

Modifié par morganesfairy (20 Jul 2017 - 18:04)
Bonjour,

Premier réflexe quand tu as un soucis en JS (parce que ce doit être je pense le cas ici) => ouvrir le débuggeur de ton navigateur. (la plupart du temps, tu fais un clic droit sur ta page "Inspecter" ou "Inspecter l'élément", puis tu ouvres la console, et recharge ta page au besoin)
Tu devrais retrouver une ou plusieurs erreurs (à poster si possible ici).

EDIT : après à savoir si Blogger permet l'ajout de dépendances JS, ou/et CSS, je ne sais pas.
Si ce n'est pas le cas, il faudra changer de plugin avec des dépendances directement en ligne (CDN) : exemple avec ce slider qui a l'air pas mal et des explications et exemples divers :
http://kenwheeler.github.io/slick/
Modifié par SolidSnake (21 Jul 2017 - 08:09)
Sujet clos
Aller à