Bonjour a tous

Cela fait plusieurs heures que je cherche comment faire pour activé le hover lorsque l'image correspondant est affiché dans mon slide.

Je suis hyper nul en js, je pense qu'il faut utilisé la function addclass mais comment détecter quelle image est affiché et activé le hover sur son élément de navigation et le désactivé une fois que le carrousel affiche l'image suivante et cela ainsi de suite.

Vous remerciant par avance pour ceux qui m'apporteront leur aide et à tous ceux qui me liront.

Mon code

<div id="carousel" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner" role="listbox">
		<div class="item active">
		  <img src="./img/image.jpg" />
		</div>
		<div class="item">
		  <img src="./img/image0.jpg" />
		</div>
		<div class="item">
		  <img src="./img/image1.jpg" />
		</div>
		<div class="item">
		  <img src="./img/image2.jpg" />
		</div>
	</div>
	<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

<div class="container">
	<div class="row navslide">
		<div class="col-xs-3"><a data-target="#carousel" data-slide-to="0" class="active" id="0" href="#carousel" role="button" title="0">0</a></div>
		<div class="col-xs-3"><a data-target="#carousel" data-slide-to="1" id="1" href="#carousel" role="button" title="1">1</a></div>
		<div class="col-xs-3"><a data-target="#carousel" data-slide-to="2" id="2" href="#carousel" role="button" title="2">2</a></div>
		<div class="col-xs-3"><a data-target="#carousel" data-slide-to="3" id="3" href="#carousel" role="button" title="3">3</a></div>
	</div>
</div>

-
Edité par Azote75 22 février 2018 à 23:20:20

Yop,

Je ne connais pas du tout comment marche le slide en js mais je sais que dans des listes tu peux faire un .selected en jQuery peut être qu'il y a un équivalent pour le slide a ce moment la sa te permettras de récupérer l'image affiché a ce moment la et tu pourras donc lui ajouter un mouseover qui devrais te permettre de faire ce que tu veux je pense. (tout ca est pur spéculation je ne connais pas le slide) ^^"

Bonjour

J'ai regarder sur le net mais je ne comprends pas comment utilisé .selected de jQuery.

J'ai essayer de faire cela, j'ai trouvé ce bout de code sur le net mais cela ne semble pas fonctionner.

Le bout de code est il correct ?

$('#carousel').carousel({
  interval: 4000
});


$('.navslide > div > a').click(function() {
	
    var item = Number($(this).attr('href').substring(1));
	
    $('#carousel').carousel(item - 1);
	
    $('.navslide .active').removeClass('active');
	
    $(this).parent().addClass('active');
	
    return false;
});


$('#carousel').bind('slid', function() {
	
    $('.navslide .active').removeClass('active');
	
    var idx = $('#carousel .item.active').index();
	
    $('.navslide div:eq(' + idx + ')').addClass('active');

});

Tu utilise un truc pour ajouter carousel() ?

hmmm je vais regarder tous çà cette aprem je pense et je te te dit ce que j'ai trouvé

-
Edité par Sanapag 23 février 2018 à 11:58:36

Bonjour Sanapag

Tous le code "html" et "js" utilisé pour le carousel est posté sur le post.

Je te remercie d'avance pour le temps que tu as consacrer a mon problème.

Merci

-
Edité par Azote75 23 février 2018 à 12:03:07

Bonjour

Je vais me mettre au Jquery en me basant sur le cours disponible sur le site. Ce sera plus simple pour moi, plutôt que galerer a chaque bout de code Js ou jQuery. Et je gagnerais en independance. Et sa fera plaisir a mon webdesigner .

Je referais dnc un nvx post une fois que j'aurais pondu le carousel avec la lib jQuery . Comme cela vous pourrez me donnerer vos retour sur l'optimisation du code final pr mise en prod. 

Vs remerciant pour vos messages.