Bonjour, je me permets de créer ce sujet car je me retrouve bloquer. En effet, j'essaie de faire en sorte que lorsque je clique sur le bouton 'voir plus', de la diapo car oui c'est un carousel fait avec OWL CAROUSEL. Celui-ci s'ouvre et affiche le fond en arrière plan. 

Pour cela il me faut du Js car dans l'idée je veux que lorsqu'on clique sur le bouton la class déploiement se met sur le diapo, en revanche je n'arrive pas a trouver comment faire pour qu'il arrive seulement sur le diapo ou on a cliquer et pas les autres. Car au final il porte tous la même class 'item'. De plus j'aimerai que lorsque l'utilisateur a déployer le diapo s'il slide le diapo se rétracte

Merci pour votre aide, j'espère avoir été clair maintenant j'illustre avec des image.

	<main>
		<section class="wrapper-carousel">
			<div class="first-section carousel">
				<div class="owl-carousel owl-theme">
					<div class="item first">
						<div class="wrapper-img-categorie">
							<h4>Fenêtre</h4>
							<div class="btn-hover-top">
								<a href="#"><span class="text">Voir plus</span></a>
							</div>
						</div>
					</div>
					<div class="item two">
						<div class="wrapper-img-categorie">
							<h4>Porte</h4>
							<div class="btn-hover-top">
								<a href="#" class="button_carousel"><span class="text">Voir plus</span></a>
							</div>
						</div>
					</div>
					<div class="item three">
						<div class="wrapper-img-categorie">
							<h4>Volet</h4>
							<div class="btn-hover-top">
								<a href="#"><span class="text">Voir plus</span></a>
							</div>
						</div>
					</div>
					<div class="item four">
						<div class="wrapper-img-categorie">
							<h4>Porte de garage</h4>
							<div class="btn-hover-top">
								<a href="#"><span class="text">Voir plus</span></a>
							</div>
						</div>
					</div>
					<div class="item five">
						<div class="wrapper-img-categorie">
							<h4>Extérieur</h4>
							<div class="btn-hover-top">
								<a href="#"><span class="text">Voir plus</span></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="second-section desk">
				<div class="container">
					<div class="wrapper-title">
						<h2 class="title">Toutes nos catégories</h2>
						<div class="text black">Une meilleure manière de découvrir vos produits</div>
					</div>
					<img  src="<?= base_url(); ?>/assets/images/habitat_large.png">
				</div>
			</div>
		</section>
	</main>
	

Salut,

tu peux rajouter un id unique pour chaque titre, et quand tu cliques, tu récupères cet id, et tu changes l'attribut "src" de ton <img...> dans ta page html qui est en fond. 

<div class="t" id="moi">click</div>
<div class="t" id="elle">click 2</div>
<img src="" id="image" alt="" title="image"/>

<script type="text/javascript">
var a = document.getElementsByClassName("t");
for (var i=0; i<a.length; i++){
  a[i].addEventListener("click", function(e){
    console.log("resultat : "+e.target.id);
    var nom = e.target.id;//le nom de l'id
    document.getElementById("image").src = nom+".jpg";//on rajoute ".jpg" au nom de l'id
  });
}

Ici, pour que ça marche, tu es censé avoir 2 images sur ton ordi : "moi.jpg" et "elle.jpg" car j'ai appelé mes id "moi" et "elle".