DenisLovers/DenisSlider2000
11
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add petpet function

Browse Source
This commit is contained in:
Quentin ANIERE 2022-04-29 14:41:47 +02:00
parent 5937df3d40
commit 126144cc81
10 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/images/denis/denis-bobo-petpet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/images/denis/denis-chapeau-petpet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/images/denis/denis-chemise-petpet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/images/denis/denis-noel-petpet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/images/denis/denis-petpet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/images/denis/saint-denis-petpet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/images/denis/thinking-denis-petpet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

21
src/index.html
View File

@ -21,37 +21,44 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_chemise.png">
<img class="normal-denis" src="./images/denis/denis_chemise.png">
<img class="petpet-denis"src="./images/denis/denis-chemise-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_chapeau.png">
<img class="normal-denis" src="./images/denis/denis_chapeau.png">
<img class="petpet-denis"src="./images/denis/denis-chapeau-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/saint_denis.png">
<img class="normal-denis" src="./images/denis/saint_denis.png">
<img class="petpet-denis"src="./images/denis/saint-denis-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis.png">
<img class="normal-denis" src="./images/denis/denis.png">
<img class="petpet-denis"src="./images/denis/denis-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_noel.png">
<img class="normal-denis" src="./images/denis/denis_noel.png">
<img class="petpet-denis" src="./images/denis/denis-noel-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_bobo.png">
<img class="normal-denis" src="./images/denis/denis_bobo.png">
<img class="petpet-denis" src="./images/denis/denis-bobo-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/thinking_denis.png">
<img class="normal-denis" src="./images/denis/thinking_denis.png">
<img class="petpet-denis" src="./images/denis/thinking-denis-petpet.gif">
</div>
</div>
</div>

32
src/script.js
View File

@ -127,3 +127,35 @@ const addMaximumScaleToMetaViewport = () => {
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
normalsPics = document.querySelectorAll(".normal-denis");
petpetPics = document.querySelectorAll(".petpet-denis");
normalsPics.forEach(pic => {
pic.addEventListener("click", () => {
normalsPics.forEach(pic => {
pic.style.display = "none";
});
petpetPics.forEach(pic => {
pic.style.display = "block";
});
});
});
petpetPics.forEach(pic => {
pic.addEventListener("click", () => {
petpetPics.forEach(pic => {
pic.style.display = "none";
});
normalsPics.forEach(pic => {
pic.style.display = "block";
});
});
});

5
src/style.css
View File

@ -170,6 +170,10 @@ body {
margin-right: -0.625em;
}
.petpet-denis {
display: none;
}
@media screen and (max-width: 1024px) {
body {
@ -224,3 +228,4 @@ body {
margin-left: 15vw;
}
}