[CSS] carousel

Sujet résolu

18 octobre 2018 à 13:04:42

Bonjour à tous, je souhaiterais faire un carousel similaire à celui du site

https://www.officeriders.com/fr/location/meeting-event-production/paris/location-appartement-verriere-toit-opera-garnier

j'ai essayé de décortiquer la logique du code via le bouton inspecter le code, des jeux de translation ont été faite mais je comprend pas comment ils ont fait pour faire revenir la dernière image en première position.

Quelqu'un pour m'éclairer ?

Merci d'avance

ox223252

18 octobre 2018 à 16:03:04

je peux t'en donner un plus simple pour commencer :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <style type="text/css">
            .caroussel
            {
                display: inline-block;
                width:900px;
                overflow: hidden;
            }
            .carousel-img
            {
                display: inline-block;
                width:300px;
                height:180px;
            }
            .arrow
            {
                display: inline-block;
                width: 50%;
                font-size: 3em;
                position: relative;
                top: -120px;
            }
            .left
            {
                text-align: left;
            }
            .right
            {
                text-align: right;
            }
            .arrow span
            {
                background-color: rgba(0,0,0,0.5);
                color: rgba(255,255,255,0.5);
                padding: 5px;
            }
            .arrow span:hover
            {
                background-color: rgba(0,0,0,0.6);
                color: rgba(255,255,255,0.8);
            }
            .arrow span.right
            {
                border-top-left-radius: 80% 40%;
                border-bottom-left-radius: 80% 40%;
                text-align: right;
            }
            .arrow span.left
            {
                border-top-right-radius: 80% 40%;
                border-bottom-right-radius: 80% 40%;
            }
        </style>
        <div class="caroussel">
            <div>
                <img class="carousel-img" id="imgAlpha_1" src="http://getwallpapers.com/wallpaper/full/b/8/d/538853.jpg"><img class="carousel-img" id="imgAlpha_2" src="http://wallpoper.com/images/00/33/78/60/science-slayer_00337860.jpg"><img class="carousel-img" id="imgAlpha_3" src="https://wallpapertag.com/wallpaper/full/4/2/0/461650-full-size-scientific-dna-wallpapers-1920x1080-hd.jpg">
                <div class="arrow left"><span class="left" onclick="avant();">&lt;</span></div><div class="arrow right" onclick="apres();"><span class="right">&gt;</span></div>
            </div>
        </div>
        <script type="text/javascript">
            var img = [];
            img[ 0 ] = document.getElementById( 'imgAlpha_1' );
            img[ 1 ] = document.getElementById( 'imgAlpha_2' );
            img[ 2 ] = document.getElementById( 'imgAlpha_3' );

            var src = [];
            var index = 0;
            src.push ( "http://getwallpapers.com/wallpaper/full/b/8/d/538853.jpg" );
            src.push ( "http://wallpoper.com/images/00/33/78/60/science-slayer_00337860.jpg" );
            src.push ( "https://wallpapertag.com/wallpaper/full/4/2/0/461650-full-size-scientific-dna-wallpapers-1920x1080-hd.jpg" );
            src.push ( "https://wallpapercave.com/wp/FSlJFYH.jpg" );
            src.push ( "https://free4kwallpapers.com/uploads/originals/2015/11/11/from-the-comic-dark-science-wallpaper.jpg" );

            function avant()
            {
                index = ( src.length + index - 1 ) % src.length;
                for ( var i = 0; i < img.length; i++ )
                {
                    img[ i ].src = src[ ( i + index ) % src.length ];
                }
            }

            function apres()
            {
                index = ( index + 1 ) % src.length;
                for ( var i = 0; i < img.length; i++ )
                {
                    img[ i ].src = src[ ( i + index ) % src.length ];
                }
            }
        </script>
    </body>
</html>

tu peux te baser dessus pour le modifier et avoir le resultat que tu veux.

EDIT : si tu veux le même résultat exactement que l'exemple change la partie en javascript précédente pas celle-ci :

var img = [];
img[ 0 ] = document.getElementById( 'imgAlpha_1' );
img[ 1 ] = document.getElementById( 'imgAlpha_2' );
img[ 2 ] = document.getElementById( 'imgAlpha_3' );
img[ 3 ] = document.getElementById( 'imgAlpha_4' );

var src = [];
var index = 0;
src.push ( "http://getwallpapers.com/wallpaper/full/b/8/d/538853.jpg" );
src.push ( "http://wallpoper.com/images/00/33/78/60/science-slayer_00337860.jpg" );
src.push ( "https://wallpapertag.com/wallpaper/full/4/2/0/461650-full-size-scientific-dna-wallpapers-1920x1080-hd.jpg" );
src.push ( "https://wallpapercave.com/wp/FSlJFYH.jpg" );
src.push ( "https://free4kwallpapers.com/uploads/originals/2015/11/11/from-the-comic-dark-science-wallpaper.jpg" );

var flag = false;

function avant()
{
	if ( flag )
	{
		return;
	}
	else
	{
		flag = true;
	}

	(function ( nbFrames )
	{
		index = ( src.length + index - 1 ) % src.length;
		for ( var i = 0; i < img.length; i++ )
		{
			img[ i ].src = src[ ( i + index ) % src.length ];
		}

		var numFrame = 0;
		var anim = setInterval ( move, 1 );
		img[ 3 ].src = src[ ( src.length + index + 3 ) % src.length ];
		img[ 3 ].style.display = "";

		img[ 0 ].style.marginLeft = "-300px";

		function move ( )
		{
			if ( numFrame++ >= nbFrames )
			{
				clearInterval ( anim );
				img[ 3 ].style.display = "none";
				img[ 3 ].src = "";
				flag = false;
			}
			else
			{
				img[ 0 ].style.marginLeft = (numFrame * 3 - 300 ) + "px";
			}
		}
	})(100);
}

function apres()
{
	if ( flag )
	{
		return;
	}
	else
	{
		flag = true;
	}

	(function ( nbFrames )
	{
		var numFrame = 0;
		var anim = setInterval ( move, 1 );
		img[ 3 ].src = src[ ( index + 3 ) % src.length ];
		img[ 3 ].style.display = "";

		function move ( )
		{
			if ( numFrame++ >= nbFrames )
			{
				clearInterval ( anim );
				index = ( index + 1 ) % src.length;
				for ( var i = 0; i < img.length; i++ )
				{
					img[ i ].src = src[ ( i + index ) % src.length ];
				}
				img[ 0 ].style.marginLeft = 0;
				img[ 3 ].style.display = "none";
				img[ 3 ].src = "";
				flag = false;
			}
			else
			{
				img[ 0 ].style.marginLeft = (-numFrame * 3 ) + "px";
			}
		}
	})(100);
}

-
Edité par ox223252 18 octobre 2018 à 16:32:39

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

unchained77

20 octobre 2018 à 8:50:47

Pas mal mais après quelque acharnement j'ai finalement trouvé une solution avec angular, merci de m'avoir éclairé.

@media only screen and (min-width: 0px) {
	.carousel {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.images-container {
		border: 1px solid red;
		overflow: hidden;
		position: relative;
		height: 500px;		
	}

	img {
		height: 500px;
		position: absolute;
		box-sizing: border-box;transition-property: all;
	    transition-duration: 0.2s;
	    transition-timing-function: ease-in-out;
	    transition-delay: 0s;
	    background-color: red;
	}

	.hide {
		opacity: 0;
	}

} 


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

<div class="carousel">	
		<div class="slice">
			<div class="images-container">
				<img [ngClass]="{ 'hide': picture.hided }" *ngFor="let picture of pictures" src="{{ picture.fd }}" [style.transform]="'translateX(' + picture.x + 'px)'" (transitionstart)="ontransitionstart($event,picture)" (transitionrun)="ontransitionrun($event,picture)" (transitionend)="ontransitioned($event,picture)">
			</div>
		</div>
	<div class="previous" (click)="previous($event)">previous</div>
	<div class="next" (click)="next($event)">next</div>
</div>

import { Component, OnInit } from '@angular/core';
import { Picture } from '../models/picture.model';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {

	innerWidth: number = 0;
	innerHeight: number = 0;
	pictures: Picture [] = [];

	constructor() { }

	ngOnInit() {
		var picture = new Picture();
		picture.fd = 'https://i.officeriders.com/ii5759623bi61b4i47efi8289i3fd268836832-*-480-jpg.jpg';
		this.pictures.push(picture);
		picture = new Picture();
		picture.fd = 'https://i.officeriders.com/ii5759623ci9528i4051ibfd1i3fd268836832-*-480-jpg.jpg';
		this.pictures.push(picture);
		picture = new Picture();
		picture.fd = 'https://i.officeriders.com/cbqLmYutHjhQYFEHL-*-480-jpg.jpg';
		this.pictures.push(picture);
		picture = new Picture();
		picture.fd = 'https://i.officeriders.com/ii5759623cic2a4i440di9bf9i3fd268836832-*-480-jpg.jpg';
		this.pictures.push(picture);
		for(var i = 0;i<this.pictures.length;i++) {
			this.pictures[i].x = (i - 1) * 750;
		}

		

		this.innerWidth = window.innerWidth;
		this.innerHeight = window.innerHeight;
	}

	ontransitionstart(event,picture: Picture): void {
		console.log('ontransitionstart');
	}

	ontransitionrun(event,picture: Picture): void {
		console.log('ontransitionrun');
	}

	ontransitioned(event,picture: Picture): void {
		console.log('ontransitioned');
		console.log(picture);
	}

	previous(event): void {
		console.log('previous');
		var n = this.pictures.length;
		var picture = new Picture();
		picture.fd = this.pictures[n - 1].fd;		
		this.pictures.splice(n-1,1);
		this.pictures.unshift(picture);

		for(var i = 0;i<n;i++) {
			this.pictures[i].x = (i - 1) * 750;
		}
	}

	next(event): void {
		console.log('next');
		var n = this.pictures.length;
		var picture = new Picture();
		picture.fd = this.pictures[0].fd;
		this.pictures.push(picture);
		this.pictures.splice(0,1);

		for(var i = 0;i<n;i++) {
			this.pictures[i].x = (i - 1) * 750;
		}
	}
}

[CSS] carousel

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

[CSS] carousel

[CSS] carousel

Supprimer

Modérer

Signaler le message aux modérateurs