CODEPEN SLIDERS

Voir aussi

codepen ressources codepen couleurs codepen vidéos codepen sliders codepen mise en page

slider 4 items

Code à copier et à intégrer dans votre page ⬇️

<!DOCTYPE html>

<head>

<title>CodePen - Slider 4 produits </title>

</head>

<body>

</svg>

</a>

viewBox="0 0 400 40" style="enable-background:new 0 0 400 40;" xml:space="preserve">

<g>

<path d="M17.1,19c-0.2-0.6,0.1-1.2,0.7-1.4v0c0.6-0.2,1.2,0.1,1.4,0.7l5.1,14.3c0.5,1.4,2.1,2.5,3.6,2.5c0,0,7.8,0,13,0

c3.4,0,6.5-3,6.9-6.6c0.6-5.5,1.1-11.1,1.7-16.6c0.4-3.7-2.5-6.6-6.4-6.6c-3.8,0-8.6,0-8.6,0c-1.5,0-2.2,1.1-1.7,2.5l4.9,13.1

c0.2,0.6-0.1,1.2-0.7,1.4h0c-0.6,0.2-1.2-0.1-1.4-0.7L30.3,7.6c-0.5-1.4-2.1-2.5-3.6-2.5c0,0-9.6,0-15.7,0c-3.9,0-6.8,3-6.4,6.6

c0.6,5.5,1.1,11.1,1.7,16.6C6.6,32,9.7,35,13.1,35c3.2,0,7.1,0,7.1,0c1.5,0,2.3-1.1,1.8-2.5L17.1,19z"/>

</g>

<path d="M122.8,15.2c-0.6-0.3-0.8-0.9-0.5-1.5c0.3-0.6,0.9-0.8,1.5-0.5l15.6,7.7c1.3,0.6,2.5,0,2.7-1.5c0,0,0.4-4.2,0.8-7.7

c0.4-3.7-2.5-6.6-6.4-6.6c-10.7,0-21.3,0-32,0c-3.9,0-6.8,3-6.4,6.6c0.1,1.4,0.2,1.6,0.2,1.6c0.1,1.5,1.3,3.2,2.6,3.8l16.5,8.3

c0.6,0.3,0.8,1,0.5,1.5v0c-0.3,0.6-1,0.8-1.5,0.5L101,19.8c-1.3-0.7-2.3,0-2.1,1.5c0,0,0.4,3.9,0.7,7.1c0.4,3.7,3.5,6.6,6.9,6.6

c9.3,0,18.5,0,27.8,0c3.4,0,6.5-3,6.9-6.6c0.1-1.3,0.1-1.3,0.1-1.3c0.1-1.4-0.8-3.1-2.1-3.8L122.8,15.2z"/>

<path d="M94.1,28.3c-0.5-5.5-1-11.1-1.6-16.6C92.2,8,89.2,5,85.8,5C77.5,5,69.3,5,61,5c-3.4,0-6.4,3-6.8,6.6

c-0.5,5.5-1,11.1-1.6,16.6c-0.4,3.7,2.6,6.6,6.5,6.6c9.5,0,19,0,28.5,0C91.6,34.9,94.5,32,94.1,28.3z M88.4,20

c-0.7,4.8-7.4,8.7-15,8.7c-7.5,0-14.3-3.9-15-8.7c-0.7-4.8,6-8.7,15-8.7C82.3,11.3,89.1,15.2,88.4,20z"/>

<path d="M284.6,28.3c-0.5-5.5-1-11.1-1.6-16.6C282.7,8,279.6,5,276.3,5c-8.2,0-16.5,0-24.7,0c-3.4,0-6.4,3-6.8,6.6

c-0.5,5.5-1,11.1-1.6,16.6c-0.4,3.7,2.6,6.6,6.5,6.6c9.5,0,19,0,28.5,0C282,34.9,285,32,284.6,28.3z M278.8,20

c-0.7,4.8-7.4,8.7-15,8.7c-7.5,0-14.3-3.9-15-8.7c-0.7-4.8,6-8.7,15-8.7C272.8,11.3,279.5,15.2,278.8,20z"/>

<path d="M395.5,28.3c-0.5-5.5-1-11.1-1.6-16.6C393.6,8,390.5,5,387.1,5c-8.2,0-16.5,0-24.7,0c-3.4,0-6.4,3-6.8,6.6

c-0.5,5.5-1,11.1-1.6,16.6c-0.4,3.7,2.6,6.6,6.5,6.6c9.5,0,19,0,28.5,0C392.9,34.9,395.8,32,395.5,28.3z M389.7,20

c-0.7,4.8-7.4,8.7-15,8.7c-7.5,0-14.3-3.9-15-8.7c-0.7-4.8,6-8.7,15-8.7C383.7,11.3,390.4,15.2,389.7,20z"/>

<path d="M188.6,30.2c0.9,1.2,2.2,1,2.8-0.3c0,0,0.1-0.2-0.1-1.7c-0.6-5.5-1.1-11.1-1.7-16.6C189.2,8,186.1,5,182.8,5

c-9.3,0-18.5,0-27.8,0c-3.4,0-6.5,3-6.9,6.6c-0.6,5.5-1.1,11.1-1.7,16.6c-0.2,1.7,0.1,2.1,0.1,2.1c0.7,1.3,2,1.4,2.9,0.2l10-12.7

c0.4-0.5,1.1-0.6,1.6-0.2v0c0.5,0.4,0.6,1.1,0.2,1.6l-10,12.7c-0.9,1.2-0.7,2.5,0.4,2.9c0,0,0,0,1.2,0c10.7,0,21.3,0,32,0

c1.4,0,1.4,0,1.4,0c1.3-0.6,1.6-2,0.7-3.1l-9.8-12.5c-0.4-0.5-0.3-1.2,0.2-1.6v0c0.5-0.4,1.2-0.3,1.6,0.2L188.6,30.2z"/>

<g>

<path d="M332.6,32.5c-0.5,1.4,0.3,2.5,1.8,2.5c0,0,3.6,0,6.7,0c3.4,0,6.6-3,7.1-6.6c0.8-5.5,1.6-11.1,2.3-16.6

c0.5-3.7-2.2-6.6-6.2-6.6c-6.5,0-16.8,0-16.8,0c-1.5,0-3.1,1.1-3.6,2.5l-2.4,6.3c-0.5,1.4-1.1,2.7-1.3,2.9

c-0.2,0.2-1.1,0.3-1.3,0.2c-0.3-0.1-1.1-1.7-1.6-3.1l-2.4-6.3c-0.5-1.4-2.1-2.5-3.6-2.5c0,0-10.3,0-16.8,0c-3.9,0-6.7,3-6.2,6.6

c0.8,5.5,1.6,11.1,2.3,16.6c0.5,3.7,3.7,6.6,7.1,6.6c3.1,0,6.7,0,6.7,0c1.5,0,2.3-1.1,1.8-2.5L301.4,19c-0.2-0.6,0.1-1.2,0.7-1.4

v0c0.6-0.2,1.2,0.1,1.4,0.7l5.1,14.3c0.5,1.4,2.1,2.5,3.6,2.5h14.4c1.5,0,3.1-1.1,3.6-2.5l5.1-14.3c0.2-0.6,0.9-0.9,1.4-0.7v0

c0.6,0.2,0.9,0.9,0.7,1.4L332.6,32.5z"/>

</g>

<path d="M233.6,5.1c-10.7,0-21.3,0-32,0c-3.9,0-6.8,3-6.4,6.6c0.6,5.5,1.1,11.1,1.7,16.6c0.4,3.7,3.5,6.6,6.9,6.6

c4.2,0,9.8,0,9.8,0c1.5,0,2.3-1.1,1.8-2.5l-2.8-7.7c-0.2-0.6,0.1-1.2,0.7-1.4v0c0.6-0.2,1.2,0.1,1.4,0.7l3,8.5

c0.5,1.4,2.1,2.5,3.6,2.5c0,0,6.6,0,12,0c3.4,0,3.6-2.2,2.6-5c-1-2.8-1.7-5.2-1.7-5.2c-0.2-0.6,0.1-1.3,0.7-1.4

c0.4-0.1,1.1-0.2,1.8-0.4c2.3-0.7,2.5-2.3,3-6.2c0.2-1.7,0.3-3.3,0.5-5C240.5,8.1,237.6,5.1,233.6,5.1z M229.9,15.2h-13.5

c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1h13.5c0.6,0,1.1,0.5,1.1,1.1C231,14.7,230.5,15.2,229.9,15.2z"/>

</g>

</svg>

<a href="#">casques</a>

<a href="#">bottes</a>

<a href="#">gants</a>

<a href="#">oxygène</a>

</div>

</svg>

</svg>

</svg>

</div>

<h3 class="main-header">Combinaison spatiale</h3>

<h1 class="main-title">Gravity</h1>

</div>

<div class="main-content__title">La combinaison idéale pour vos sorties aux limites de l'exosphère</div>

<div class="main-content__subtitle">Notre modèle Gravity, discrètement équipé de turbo-jets aux pieds vous permettra de "Chiller" en toute sécurité en survolant l’Himalaya.</div>

Commandez

</svg>

</div>

</div>

<h3 class="main-header">Combinaison lunaire</h3>

<h1 class="main-title">Lunatic</h1>

</div>

<div class="main-content__title">Équipez vous pour vos balades au claire de terre.

</div>

<div class="main-content__subtitle">Avec Lunatic vous êtes paré pour un pique-nique au bord de la mer de la tranquillité, souple vous pourrez danser en apesanteur sous la coupole transparente du Macumba.</div>

Commandez

</svg>

</div>

</div>

<h3 class="main-header">Combinaison martienne</h3>

<h1 class="main-title">Marsiel</h1>

</div>

<div class="main-content__title">La tenue idéale pour vos randonnées martiennes ou sur un astéroïde.

</div>

<div class="main-content__subtitle">Marsiel, combinaison mixte et sportive adaptée aux activités en exterieur, efficacité garanties contre les radiations et les coups de soleil.</div>

Commandez

</svg>

</div>

</div>

<h3 class="main-header">Combinaison éternelle</h3>

<h1 class="main-title">Infinity</h1>

</div>

<div class="main-content__title">Pour un infini et au-delà confortable et des explorations sans soucis.

</div>

<div class="main-content__subtitle">Infinity vous accompagnera au bout de vos aventures spatiales et aux confins de l'univers connu. Extension de garantie jusqu'à 2 cryogénisations.</div>

Commandez

</svg>

</div>

</div>

</svg>

</div>

</svg>

</div>

</div>

</body>

</html>

<style>

@import url("https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");

:root {

--body-color: #99ffff;

--terre-bg: rgba( 8, 0, 119, 0);

--header-terre-bgi: linear-gradient(to bottom, rgba( 8, 0, 119, 1), rgba( 8, 0, 119, 0));

--lune-bg: rgba(26, 46, 63, 0);

--header-lune-bgi: linear-gradient(to bottom, rgba(26, 46, 63, 1), rgba(26, 46, 63, 0));

--lune-bgi: linear-gradient(to top, rgba(14, 16, 17, 1), rgba( 4, 0, 30, 1), rgba(26, 46, 63, 1) 85%);

--mars-bg: rgba(48, 30, 124, 0);

--header-mars-bgi: linear-gradient(to bottom, rgba(48, 30, 124, 1), rgba(48, 30, 124, 0));

--mars-bgi: linear-gradient(to top, rgba(38, 6, 15, 1), rgba(245, 148, 75, 1), rgba(48, 30, 124, 1) 85%);

--infini-bg: rgba(250, 5, 1, 0);

--header-infini-bgi: linear-gradient(to bottom, rgba(250, 5, 1, 1), rgba(250, 5, 1, 0));

--infini-bgi: linear-gradient(to top, rgba(22, 23, 44, 1), rgba(6, 114, 154, 1), rgba(250, 5, 1, 1) 85%);

--arrow-fill: #333231;

--body-font: "Rethink Sans", sans-serif;

--italic-font: "MuseoModerno", sans-serif;

}

* {

box-sizing: border-box;

outline: none;

}

img {

max-width: 100%;

}

a {

text-decoration: none;

color: var(--body-color);

}

h1,

h2,

h3 {

margin: 0;

}

body {

font-family: var(--body-font);

background-color: #1d1e20;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

padding: 2em;

width: 100%;

height: 100vh;

color: var(--body-color);

}

@media (max-width: 480px) {

body {

padding: 0;

}

.container {

max-width: 1100px;

border-radius: 4px;

max-height: 700px;

height: 90vh;

width: 100%;

display: flex;

flex-direction: column;

scroll-behavior: smooth;

background-color: #001d66;

padding: 0 30px;

overflow-y: auto;

overflow-x: hidden;

position: relative;

}

@media (max-width: 480px) {

.container {

height: 100%;

max-height: 100%;

}

.logo {

width: 260px;

fill: #99ff00;

}

.header {

display: flex;

align-items: center;

height: 82px;

width: 100%;

white-space: nowrap;

flex-shrink: 0;

font-weight: 400;

font-size: 14px;

text-transform: uppercase;

border-bottom: 1px solid rgba(153, 255, 255, 0.25);

position: sticky;

top: 0;

left: 0;

background-color: var(--terre-bg);

z-index: 6;

}

@media (max-width: 575px) {

.header {

width: calc(100% + 20px);

margin-left: -10px;

}

.header-menu {

display: flex;

align-items: center;

margin-left: auto;

}

@media screen and (max-width: 740px) {

.header-menu {

display: none;

}

.header-menu a:not(:first-child) {

margin-left: 30px;

}

.header .menu-icon {

display: flex;

align-items: center;

margin-right: 20px;

}

.header .menu-icon svg {

width: 22px;

fill: none;

}

.header-icons {

margin-left: auto;

display: flex;

align-items: center;

}

.header-icons .search {

fill: none;

}

.header-icons svg {

width: 18px;

fill: var(--body-color);

}

.header-icons svg:not(:last-child) {

margin-right: 20px;

}

.left-side {

display: flex;

flex-direction: column;

justify-content: space-between;

max-width: 320px;

}

@media screen and (max-width: 930px) {

.left-side {

text-align: center;

max-width: 450px;

}

.mySwiper {

display: flex;

flex-grow: 1;

position: relative;

}

.main {

padding: 42px 0 30px;

display: flex;

flex-grow: 1;

position: relative;

}

@media screen and (max-width: 930px) {

.main {

flex-direction: column-reverse;

align-items: center;

justify-content: center;

}

.main-header {

text-transform: uppercase;

font-size: 14px;

letter-spacing: 4px;

font-weight: 400;

transition-delay: 0.2s;

}

.main-title {

font-family: var(--italic-font);

font-size: 80px;

font-weight: 800;

margin-top: 10px;

line-height: 1em;

transition-delay: 0.3s;

}

.main-subtitle {

font-family: var(--italic-font);

font-weight: 400;

font-size: 32px;

margin-top: 14px;

line-height: 1.6;

margin-bottom: 60px;

transition-delay: 0.4s;

}

.main-content__title {

font-size: 26px;

font-family: var(--italic-font);

font-style: italic;

margin-bottom: 14px;

transition-delay: 0.2s;

}

.main-content__subtitle {

font-size: 16px;

line-height: 1.6;

margin-top: 12px;

margin-bottom: 36px;

letter-spacing: 0.01em;

transition-delay: 0.3s;

}

.main-content .more-menu {

font-size: 13px;

font-weight: 500;

color: #66ff00;

display: flex;

align-items: center;

transition-delay: 0.4s;

}

@media screen and (max-width: 930px) {

.main-content .more-menu {

justify-content: center;

}

.main-content .more-menu svg {

width: 28px;

height: 18px;

margin-left: 10px;

}

.center {

display: flex;

margin-left: 120px;

position: relative;

flex-shrink: 0;

}

@media screen and (max-width: 930px) {

.center {

margin-left: 0;

margin-bottom: 56px;

}

.center .bottle-bg {

width: 320px;

height: 450px;

object-fit: cover;

border-radius: 80px 80px 160px 160px;

}

@media screen and (max-width: 930px) {

.center .bottle-bg {

width: 260px;

height: 390px;

}

@media screen and (max-width: 575px) {

.center .bottle-bg {

width: 220px;

height: 340px;

}

.center .bottle-img {

position: absolute;

top: 25%;

left: 0;

transform: scale(1.6);

}

.swiper-pagination {

position: absolute;

right: 30px;

left: auto;

top: 100px;

width: auto;

bottom: auto;

z-index: 2;

font-size: 14px;

font-family: var(--body-font);

font-weight: 400;

}

.button-wrapper {

position: absolute;

right: 30px;

bottom: 20px;

z-index: 1;

display: flex;

align-items: center;

}

@media screen and (max-width: 930px) {

.button-wrapper {

top: 0;

left: 0;

width: 100%;

justify-content: space-between;

padding: 0 60px;

}

@media screen and (max-width: 575px) {

.button-wrapper {

padding: 0 20px;

}

.button-wrapper svg {

width: 28px;

}

.button-wrapper .swiper-button {

border: 1px solid var(--body-color);

border-radius: 50%;

width: 44px;

height: 44px;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(to right, var(--body-color) 40%, transparent 0%);

background-size: 200% 100%;

background-position: right bottom;

transition: all 0.3s ease-out;

cursor: pointer;

}

.button-wrapper .swiper-button + .swiper-button {

margin-left: 16px;

}

@media screen and (max-width: 930px) {

.button-wrapper .swiper-button + .swiper-button {

margin-left: 0;

}

.button-wrapper .swiper-button:hover {

background-color: var(--body-color);

background-position: left bottom;

}

.button-wrapper .swiper-button:hover svg {

stroke: #fff;

}

.button-wrapper .swiper-prev-button {

background: linear-gradient(to left, var(--body-color) 40%, transparent 0%);

background-size: 200% 100%;

background-position: left bottom;

transition: all 0.3s ease-out;

}

.button-wrapper .swiper-prev-button svg {

transform: rotate(-180deg);

}

.button-wrapper .swiper-prev-button:hover {

background-position: right bottom;

}

.swiper-slide {

opacity: 0 !important;

transition: 0.4s;

}

.swiper-slide-active {

opacity: 1 !important;

}

.swiper-slide .main-wrapper > *,

.swiper-slide .main-content > * {

transform: translateY(-30px);

opacity: 0;

transition-duration: 0.8s;

}

.swiper-slide-active .main-wrapper > *,

.swiper-slide-active .main-content > * {

transform: none;

opacity: 1;

}

.swiper-slide .bottle-bg {

transition-duration: 0.6s;

opacity: 0;

object-position: 60%;

}

.swiper-slide-active .bottle-bg {

opacity: 1;

transform: none;

object-position: 50%;

}

.swiper-slide .bottle-img {

transition-duration: 0.8s;

transform: scale(1.2);

opacity: 0;

}

.swiper-slide-active .bottle-img {

opacity: 1;

transform: scale(1.6);

}

[data-sld="1"] .header {

background-color: var(--lune-bg);

}

[data-sld="1"] .container {

}

[data-sld="2"] .header {

background-color: var(--mars-bg);

}

[data-sld="2"] .container {

}

[data-sld="3"] .header {

background-color: var(--infini-bg);

}

[data-sld="3"] .container {

}

</style>

var swiper = new Swiper(".mySwiper", {

navigation: {

nextEl: ".swiper-next-button",

prevEl: ".swiper-prev-button" },

effect: "fade",

loop: "infinite",

pagination: {

el: ".swiper-pagination",

type: "fraction" } });

swiper.on('slideChange', function (sld) {

document.body.setAttribute('data-sld', sld.realIndex);

});

</script>

Voir en plein écran