18041 sujets

Questions générales et questions de débutants

Un Slider dans un Slider ?

Bonjour,
Ca fait 2 semaines que j'ai appris le html/css et je voudrais savoir s'il est possible de faire un "slider" a l’intérieur d'un "slider" ?

En faite, je voudrais me servir des différentes sections de mon code comme d'un slider vertical et y accéder avec le menu via :target. Mon problème arrive lorsque dans l'une de mes sections je désir y mettre un autre slider(mais celui ci horizontal)... l'affichage html/css fonction mais quand je clic sur le bouton qui me sert au slider horizontal je suis renvoyer à la 1ère section (et aucune ancre ne porte le même nom et elle son toutes bien positionner...) avez vous une solution a me proposer ? j’avoue que la je désespère un peu...

html :

<!doctype html>
<head>
	<meta charset="utf-8">
	<title>site</title>
	<link href="site.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet">
    <script src="https://use.fontawesome.com/0b9c271f1a.js"></script>

</head>

<body>

	<span id="s1"></span>
	<span id="s2"></span>
	<span id="s3"></span>
	<span id="s4"></span>
	<span id="s5"></span>
	<span id="s6"></span>


	<div id="wrap">
		<ul id="nav">
			<li><a href="#s1">HOME</a></li>
			<li><a href="#s2">PERFORMANCE</a></li>
			<li><a href="#">PRICE</a></li>
			<li><a href="#">CONTACT</a></li>
			<li><a href="#">FORMULAIRE</a></li>
			<li><a href="#">ABOUT US</a></li>
		</ul>

		<div id="slide1">
		<div class="slide_inside">					
				
		</div>				
		</div>

<div id="slide2">
		<div class="slide_inside">

			<div id="lien-performance">
                <a class="lien-performance" href="#slider-performance1">Laugh</a>
                <a class="lien-performance" href="#slider-performance2">Dream</a>
                <a class="lien-performance" href="#slider-performance3">Marvel at</a>
            </div>

	        <div id="slider-performance">
	            <a id="slider-performance1" class="ancre"></a>
	            <a id="slider-performance2" class="ancre"></a>
	            <a id="slider-performance3" class="ancre"></a>
	       
	            <div id="slides-performance">
	                <p class="slide-performance S-performance">As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
	                <p class="slide-performance S-performance">Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
	                <p class="slide-performance S-performance">Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
	            </div>
	        </div>

		</div>
		</div>


css :

body {
	margin: 0; padding: 0; /* annulation des marges */
	overflow: hidden; /* on cache le débordement de contenu */
	color: #fff;
	background: #000;
}

#wrap {

	position: relative;
	top: 0;

	transition: top 1s;
}
 
#nav {

	position: fixed;
	top: 0; left: 0; right: 0;
	padding: 1em 0;
	margin: 0;
	/* on centre les liens */
	text-align: center;
	background: #000;
}
#nav li {

	display: inline;
	margin:0;
}
#nav a {

	display: inline-block;
	margin: 0 3em;
	color: #eee;
}

#slide1, #slide2, #slide3, #slide4, #slide5, #slide6 {

	height: 1000px;
	padding-top:100px;

	transition: background-position 1s;
}

#slide1 { background-color: grey; }
#slide2 { background-color: blue; }
 

.slide_inside {
	position: relative;
}

#slide1 .slide_inside
{

}
#slide2 .slide_inside
{
	
}
#slide3 .slide_inside
{
	
}
#slide4 .slide_inside
{
	width: 490px; 
	padding: 20px;
	margin: 0px auto;
	background-color: rgba(255, 255, 255,0.5); 
	box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
	overflow: hidden;
	border-radius: 30px;
	text-align: center;
}
#slide5 .slide_inside
{
	
}
#slide6 .slide_inside
{
	
}
#s1:target ~ #wrap { top:0px; }
#s2:target ~ #wrap { top:-1100px; }

/*===slider 2===*/

#slider-performance
{
    width: 750px;
    overflow: hidden;
	margin: 0px auto;
	margin-top: 150px;
}
#slides-performance
{
    width: calc(750px * 3);
    transition: all 1s ease;
}
.slide-performance
{
	margin: 0;
    width: 750px;
    height: 250px;
    border-radius: 30px;
    float: left;
    position: relative;
    font:normal 50 13px "Libre Baskerville", serif;
}
.S-performance
{
	padding-top: 100px;
	text-align: center;
	color: #fff;
	font-size: 20px;
    background-color: rgba(255, 255, 255,0.1);
}
#slider-performance a#slider-performance1:target ~ #slides-performance{
    margin-left:0px;
}
#slider-performance a#slider-performance2:target ~ #slides-performance{
    margin-left:-750px;
}
#slider-performance a#slider-performance3:target ~ #slides-performance{
    margin-left:-1500px;
}
#lien-performance
{
	text-align: center;
	margin-top: 100px;
	margin-bottom: -100px;
}
.lien-performance
{
	background-color: rgba(255, 255, 255,0.1);
	padding: 20px 50px;
	text-decoration: none;
	font:normal 50 20px "Libre Baskerville", serif;
	color: white;
	box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}
.lien-performance:hover
{
	background-color: rgba(255, 255, 255,0.3);
}
Salut,

Je viens de regarder assez rapidement. C'est un peu lourd ta façon de faire, en tout cas j'aurai fait autrement.

Ton menu affiche ta page/ ton élément, disons ok. Là j'aurai utilisé jquery ou autre pour faire l'apparition des tes éléments.
Sujet clos
Aller à