[Résolu] Image de slideshow qui ne ressortent pas totalemen par TimRig - page 1

Bonjour, j'ai un petit soucis avec mes sllideshow, ma seconde et deuxième slide show ne s'affichent pas totalement après que la première se soit affiché. Est ce que quelqu'un aurait une idée de l'erreur ?

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My Miaou</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
	<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
	<link src="catP.js"defer></script>
</head>
<body>
<!--tete debut-->
<header>
	<input type="checkbox"name="" id="toggler">
	<label for="toggler" class="fas fa-bars"></label>
	<a class="logo"> <img src="catP/Ologo.png"></a>
	
	<nav class="navbar">
		
		<a href="#home">Home</a>
		<a href="#M&I">M&I</a>
		<a href="#Cat">Cat Magazine</a>
		<a href="#About ">About </a></li>
		<a href="#Contact ">Contact </a>
		
		<i class="uil uil-search search-icon" id="searchIcon"></i>
      	<div class="search-box">
        <i class="uil uil-search search-icon"></i>
        <input type="text" placeholder="Search here..." />
      </div>
		
	</nav>
	
	<div class="icons">
		<a href="#" class="fas fa-heart"></a>
		<a href="#" class="fas fa-cat"></a>
		<a href="#" class="fas fa-user"></a>
		<!--<a href="#" class="fas fa-shopping-cart"></a>-->

	</div>	
</header>
<!--tete fin-->
<!--home start-->
<section class="home" id="home">
	<div class="content">
		<div class="container">
			<div class="overlay"></div>		
				<img class="responsive" width="600" height="400" id="slide" src="catP/catbox.jpg">
				<img class="responsive" width="600" height="400" id="slide" src="catP/cat3.jpg">
				<img class="responsive" width="600" height="400" id="slide" src="catP/catf2.jpg">

				<span > Find your soulmate with a cat</span>
				<p> Whether you're cuddly or adventurous, quiet or playful, we have the perfect four-legged companion to match your personality.</p>	
		</div>
		<!--<form >
		 	<input type="text" placeholder="cat name" required data-aos="fade-center" data-aos-duration="1000">
		 	<button type="submit" class="btn" data-aos="fade-center" data-aos-duration="1000">Search</button>
		</form>-->
		<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">Discover more</a>

	</div>
</section>
<!--home fin-->
<!--Div type de chat-->
<section class="Cat">
<h1 data-aos="fade-up" data-aos-duration="500">Discover the diversity of cat breeds </h1>
	<p data-aos="fade-up" data-aos-duration="500"> Find your perfect companion among these wonderful four-legged creatures.</p>
	<div class="row" data-aos="fade-up" data-aos-duration="1000">
		<div class="Breeds-col">
			<img src="catP/British.jpg" data-aos="fade-up" data-aos-duration="500">
			<h3 data-aos="fade-up" data-aos-duration="500">British Shorthair</h3>
			<p data-aos="fade-up" data-aos-duration="500">Le British Shorthair est originaire de Grande-Bretagne et fait fortement penser au chat du Cheshire d'Alice au pays des merveilles.</p>
			<br><br><br><br>
			<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">More</a>
		</div>
	
		<div class="Breeds-col" >
				<img src="catP/siamonis.jpg" data-aos="fade-up" data-aos-duration="500">
			<h3 data-aos="fade-up" data-aos-duration="500">Siamois</h3>
			<p data-aos="fade-up" data-aos-duration="500">Le Siamois, qui trouve ses origines au XIVe siècle dans l'ancien royaume de Siam (aujourd'hui la Thaïlande), est un chat apprécié pour son élégance et son intelligence.</p>
			<br><br>
			<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">More</a>
		</div>
			<div class="Breeds-col">
				<img src="catP/Bengal.jpg" data-aos="fade-up" data-aos-duration="500">
			<h3 data-aos="fade-up" data-aos-duration="500"> Bengal</h3>
			<p data-aos="fade-up" data-aos-duration="500">Le Bengal, né du croisement d'un chat domestique et d'un chat léopard d'Asie, possède un pelage unique qui rappelle ses origines sauvages, avec un fascinant motif tacheté ou marbré de différentes couleurs. </p>
			<a href="#" class="btn"data-aos="fade-center" data-aos-duration="1000">More</a>
			</div>
		</div>

</section>
<!--end of breeds-->
<!--about Us-->
<section class="About" id="About">
<h1 class="heading"> <span>about</span> Us</h1>
<div class="row">
	<div class="video-container">
		<img src="catP/cat5.jpg" loop autoplay muted data-aos="fade-right" data-aos-duration="2000"></img>
		<h3>Find ur friend</h3>
	</div>
	<div class="content">
		<h3 data-aos="fade-right" data-aos-duration="1000">Why choose us</h3>
		<p data-aos="fade-left" data-aos-duration="1000">Discover a unique online chat experience where every meow counts. Our personalized platform helps you find the perfect feline companion that suits your personality and preferences. Browse through our diverse selection of cats and let yourself be charmed by your perfect four-legged friend. Meet your future life companion today on our chat site.</p>
		<a href="#" class="btn" data-aos="fade-right" data-aos-duration="2000">Learn More</a>
	</div>
</div>	
</section>

<!--conctact section-->
<section class="Contact" id="Contact" data-aos="fade-left" data-aos-duration="1000">
	<h1 class="heading"><span>Contact</span> Us</h1>
	<div class="row">
		<form action="">
			<input type="text" placeholder ="name" class="box" required>
			<input type="email" placeholder="email" class="box" required>
			<input type="password" placeholder="password" class="box" required>
			<textarea name=""class="box" placeholder="Message" id="" cols="30" rows="10" ></textarea>
			<input type="submit" value="send message" class="btn">
			
		</form>
		
		
		   <footer>
           
            <a href="https://github.com/helb-prigogine/BAC1-2324-Q2-PRJ-WEB-TEAM5.git" target="_blank"><img class="social-media-img" src="catP/github-142-svgrepo-com.svg" alt="GitHub"></a>
            <a href="#" target="_blank"><img class="social-media-img" src="catP/instagram-color-svgrepo-com.svg" alt="Instagram"></a>
            <a href="#" target="_blank"><img class="social-media-img" src="catP/linkedin-svgrepo-com.svg" alt="LinkedIn"></a>
            <a href="#" target="_blank"><img class="social-media-img" src="catP/twitter-svgrepo-com.svg" alt="Twitter"></a>
            
        </footer>
  
	</div>

</section>
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

:root{
    --pink:#e84393;
  }
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  
  body{
    background: #fffffe;
  }
  html
  {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    overflow-x: hidden;
  }
  
  section{
    padding: 2rem 9%;
  }
  .heading{
    text-align: center;
    font-size: 4rem;
    color: #333;
    padding: 1rem;
    margin: 2rem 0;
    background:#e3f6f5;
  }
  
  .btn{
    display: inline-block;
    margin-top: 1rem;
    border-radius: 5rem;
    background:black;
    color: #fff;
    padding: .9rem 3.5rem;
    cursor: pointer;
    font-size: 1.7rem;
  }
  .btn:hover{
    background: #ffd803;
  }
  
  header
  {
    position: fixed;
    top: 0;left: 0;right: 0;
    background: #fffffe;
    padding: 2rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  }
  header .logo {
    font-size: 3rem;
    color: #333;
    font-weight: bolder;
  }
  .navbar .search-icon {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .navbar .search-box {
    position: absolute;
    right: 250px; 
    height: 45px;
    max-width: 555px;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s linear;
  }
  .navbar.openSearch .search-box {
    opacity: 1;
    pointer-events: auto;
  }
  .search-box .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    left: 15px;
    color: #4a98f7;
    transform: translateY(-50%);
  }
  .search-box input {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 6px;
    background-color: #fff;
    padding: 0 15px 0 45px;
  }
  .navbar .navOpenBtn,
  .navbar .navCloseBtn {
    display: none;
  }
  
  @media screen and (max-width: 1160px) {
    .nav {
      padding: 15px 100px;
    }
    .nav .search-box {
      right: 150px;
    }
  }
  @media screen and (max-width: 950px) {
    .nav {
      padding: 15px 50px;
    }
    .nav .search-box {
      right: 100px;
      max-width: 400px;
    }
  }
  @media screen and (max-width: 768px) {
    .nav .navOpenBtn,
    .nav .navCloseBtn {
      display: block;
    }
  /* pour faire en sorte que la barre de recherche soit en dessous de la navbar en fenêtré*/
    .nav .search-box {
      top: calc(100% + 10px);
      max-width: calc(100% - 20px);
      right: 50%;
      transform: translateX(50%);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
  }
  header .logo{
    font-size: 3rem;
    color: #333;
    font-weight:bolder;
  }
  header .navbar a{
    font-size: 2rem;
    padding: 0 1.5rem;
    color:#272343;
  }
  header .navbar a:hover{
    color:#ffd803;
  }
  header .icons a
  {
    font-size: 2.5rem;
    color: #333;
    margin-left: 1.5rem;
  }
  header .icons a:hover{
    color:#ffd803;
  }
  header #toggler
  {
    display: none;
  }
  header .fa-bars
  {
    font-size: 3rem;
    color: #333;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    cursor: pointer;
    border: .1rem solid rgba(0, 0, 0, .3);
    display: none;
  
  }
  
.container{
  height: 100vh;
  margin-top: 6rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.overlay{
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  max-width: 100%;
  top: 0;
  left: 0;
  height: 100%; 
  z-index: 10;
}

@keyframes fade {
  0% {
    opacity: 1;
}
33%  {
    opacity: 0;
}
67%{
    opacity: 0;
}
100%{
    opacity: 1;
}
}
#slide
{
  width: 100%;
  height: 100%;
  display: block;
  display: flex;  
  object-fit: cover;  
  position: absolute;
  top: 0;
  left: 0;    
  animation: fade 9s ease-in-out infinite alternate;
}

.img:nth-of-type(1){
  animation-delay: 0s;
}
.img:nth-of-type(2){
    animation-delay: 3s;
}
.img:nth-of-type(3){
    animation-delay: 6s;
}
.container span,
.container p {
  z-index: 100;
  position: relative;
}

.container span {
  font-size: clamp(3rem, 5vw, 3.8rem); 
  color: #ffd803;
  padding: 1rem 0;
  line-height: 1.5;
}

.container p {
  font-size: clamp(1rem, 2.5vw, 1.8rem); 
  color: #212121;
  padding: 1rem 0;
  line-height: 1.5;
}*/


*/
  .Cat{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
    /*background-color: #bae8e8;*/
  }
  .Cat h1{
    font-size:36px ;
    font-weight: 600;
    color: #272343;
  }
  .Cat h3{
    text-align: center;
    font-weight: 600;
    margin: 10px;
  }
  .Cat p{
    color:#777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px 0;
  }
  .Cat img{
    height:210px;
    width: 210px;
    border-radius: 2rem;
  }
  .Cat .row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
  }
  .Cat .Breeds-col{
    flex-basis: 31%;
    background: #bae8e8;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
  }
  .Cat .Breeds-col:hover{
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
  }
  
  .About .row{
    display:flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 2rem 0;
    padding-bottom: 3rem;
  }
  .About .row .video-container{
    flex: 1 1 40rem;
    position: relative;
  
  }
  .About .row .video-container img{
    width: 100%;
    border: 1.5rem solid #fff;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    height: 100%;
    object-fit:cover ;
  
  }
  .About .row .video-container h3{
    position: absolute;
    top: 50%;transform: translateY(-50%);
    background: #fff;
    font-size: 3rem;
    width: 100%;
    padding: 1rem 2rem;
    text-align: center;
    mix-blend-mode: screen;
  }
  .About .row .content{
  
    flex: 1 1 40rem;
  }
  
  .About .row .content h3{
    font-size: 3rem;
    color: #333;
  }
  .About .row .content p{
    font-size: 1.5rem;
    color: #999;
    padding: 5rem 0;
    padding-top: 1rem;
    line-height:1.5 ;
  
  }
  .Contact .row{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  align-items: center;
  }
  .Contact .row form{
    flex: 1 1 40rem;
    padding: 2rem 2.5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
    border: .1rem solid rgba(0, 0, 0, .1);
    background: #fff;
  border-radius: .5rem;
  
  }
  
  .Contact .row .image{
    flex: 1 1 40rem;
  }
  .Contact .row .image img{
  width: 100%;
  }
  .Contact .row form .box{
    padding: 1rem;
    font-size: 1.7rem;
    color: #333;
    text-transform: none;
    border: .1rem solid rgba(0, 0, 0, .1);
    border-radius: 5rem;
    margin: .7rem 0;
    width: 100%;
  }
  .Contact .row form .box:focus{
    border-color: yellow;
  }
  .Contact .row form textarea{
    height: 15rem;
    resize: none;
  
  }
  
  /*footer*/
  footer
  {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 20vh;
      width: 75%;
      margin: auto;
      opacity: 0.2;
      border-top: 1px solid #212121;
      margin-top: 2%;
  }
  
  footer:hover
  {
      animation: fade 0.3s ease;
      opacity: 0.9;
  }
  .social-media-img
  {
      height: 5vh;
  }
  
  .codecell-img
  {
      height: 10vh;
  }
  
  @keyframes fade
  {
      0%
      {
          opacity: 0.2;
      }
  
      100%
      {
          opacity: 0.9;
      }
  }
  
  /* Media queries */
  
  @media screen and (max-width: 1295px)
  {
      footer
      {
          width: 95%;
      }
  }
  
  @media screen and (max-width: 500px)
  {
      footer
      {
          opacity: 0.9;
      }
  }
  
  
  
  
  @media (max-width:991px)
  {
    html
      {
        font-size: 55%;
        
    }
    header{
      padding: 2rem;
    }
    section{
      padding: 2rem;
    }
    .home{
      background-position: left;
    }
  
  }
  @media (max-width:768px)
  {
    header  .fa-bars{
      display: block;
    }
    header .navbar{
      position: absolute;
      top: 100%;left: 0;right: 0;
      background: #eee;
      border-top: .1rem solid rgba(0, 0, 0, .1);
      clip-path: polygon(0 0,100% 0,100% 0,0 0);
    }
    header #toggler:checked ~ .navbar{
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    }
      header .navbar a{
        margin: 1.5rem;
        padding: 1.5rem;
        background: #fff;
        border: 1rem solid rgba(0, 0, 0, .1);
        display: block;
      }
      .home .content h3{
        font-size: 5rem;
      }
      .home .content spam{
        font-size: 2.5rem;
      }
      .Cat .row{
        flex-direction:column ;
      }
  }
  @media (max-width:450px)
  {
    html
      {
        font-size: 50%;
      }
      .heading{
        font-size: 3rem;
      }  
   
  
  }

TimRig

20 mars 2024 à 0:08:25

GBNet

22 mars 2024 à 14:49:59

Bonjour,

Tout d'abord et à l'arrache (et à mon avis), 3 x

id="slide"

ça ne pourra jamais marcher même si le mécanisme est bon au fond.

edit ; d'ailleurs, ça pourrait être (au moins en partie) l'expli :

l'engin prend une ID, la fait fader, puis qd il tombe sur les 2 et 3 il ne comprend pas trop ce qu'il faut en faire, vu qu'il ne doit y en avoir qu'une (1 id => 1el); idéalement vaudrait mieux partir sur des classes et boucler dessus.

-
Edité par GBNet 22 mars 2024 à 17:50:27

gb-net.fr

26 mars 2024 à 20:10:21

GBNet a écrit:

Bonjour,

Tout d'abord et à l'arrache (et à mon avis), 3 x
id="slide"
ça ne pourra jamais marcher même si le mécanisme est bon au fond.

edit ; d'ailleurs, ça pourrait être (au moins en partie) l'expli :

l'engin prend une ID, la fait fader, puis qd il tombe sur les 2 et 3 il ne comprend pas trop ce qu'il faut en faire, vu qu'il ne doit y en avoir qu'une (1 id => 1el); idéalement vaudrait mieux partir sur des classes et boucler dessus.

-
Edité par GBNet 22 mars 2024 à 17:50:27

Merci pour la réponse, j'ai donné une classe spécifique à chaque image en copiant les paramètres css de l'id d'avant (que j'ai changé en classe), mais ça ne change rien au problème auquel je suis actuellement confronté.

-
Edité par TimRig 26 mars 2024 à 20:10:40

28 mars 2024 à 10:04:37

Il y a deux ou trois trucs à changer :

Déjà, le nom de la keyframe (doit y avoir des mots réservés je suppose, ou un conflit ?) donc j'ai mis fader au lieu de fade.

j'ai mis les .slide dans une div qui permet de ne pas avoir à chercher toutes les img de la page, ce qui va donner un truc comme

 <div id="slCont">
        <img class="responsive slide" width="600" height="400"  src="catP/catbox.jpg">
        <img class="responsive slide" width="600" height="400"  src="catP/cat3.jpg">
        <img class="responsive slide" width="600" height="400"  src="catP/catf2.jpg">
        </div>

puis

#slCont img:nth-of-type(1){
    animation-delay: 0s;
}
#slCont  img:nth-of-type(2){
    animation-delay: 3s;
}
#slCont  img:nth-of-type(3){
    animation-delay: 6s;
}

A noter que nth-of-type() s'applique à un type (=>tagname) et j'ai enlevé "alternate" de la transition.

Le slideshow marche mais il y a d'autres petites choses à revoir, comme le "overlay" dont je n'ai pas saisi l'intérêt, le double display de .slide, l'opacité de la première image au chargement (parce que tout arrive en vrac et que le slideshow met une plombe à démarrer, comme s'il faisait un tour pour rien)..

Démo ici

PS : Le CSS n'est pas mon truc, c'est donc largement perfectible ; je préfère toujours faire la structure en JS déjà rien que pour ne pas avoir à gérer le nombre d'images.

-
Edité par GBNet 28 mars 2024 à 11:49:49

28 mars 2024 à 15:57:47

Bonjour,

Il y a deux ou trois trucs à changer :

Déjà, le nom de la keyframe (doit y avoir des mots réservés je suppose, ou un conflit ?) donc j'ai mis fader au lieu de fade.

j'ai mis les .slide dans une div qui permet de ne pas avoir à chercher toutes les img de la page, ce qui va donner un truc comme
 <div id="slCont">
        <img class="responsive slide" width="600" height="400"  src="catP/catbox.jpg">
        <img class="responsive slide" width="600" height="400"  src="catP/cat3.jpg">
        <img class="responsive slide" width="600" height="400"  src="catP/catf2.jpg">
        </div>
puis
#slCont img:nth-of-type(1){
    animation-delay: 0s;
}
#slCont  img:nth-of-type(2){
    animation-delay: 3s;
}
#slCont  img:nth-of-type(3){
    animation-delay: 6s;
}
A noter que nth-of-type() s'applique à un type (=>tagname) et j'ai enlevé "alternate" de la transition.

Le slideshow marche mais il y a d'autres petites choses à revoir, comme le "overlay" dont je n'ai pas saisi l'intérêt, le double display de .slide, l'opacité de la première image au chargement (parce que tout arrive en vrac et que le slideshow met une plombe à démarrer, comme s'il faisait un tour pour rien)..

Démo ici

PS : Le CSS n'est pas mon truc, c'est donc largement perfectible ; je préfère toujours faire la structure en JS déjà rien que pour ne pas avoir à gérer le nombre d'images.

-
Edité par GBNet il y a environ 4 heures

Merci beaucoup pour la réponse, ça marche parfaitement, merci de votre aide. Bonne journée à vous

Image de slideshow qui ne ressortent pas totalemen

Image de slideshow qui ne ressortent pas totalemen

Supprimer

Modérer

Signaler le message aux modérateurs