Skip to content

Commit

Permalink
finish with slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@LiliaBilous
LiliaBilous committed May 31, 2023
1 parent 1b1d004 commit 094dde0
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 53 deletions.
10 changes: 10 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,4 +154,14 @@ body{
.text__slide span {
max-width: 48vw;
}
}
/* ---------- */

.open-image {
cursor: pointer;
}
.text.active {
transform: translate(-50%, 100%);
opacity: 0;

}
127 changes: 76 additions & 51 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Slider Gallery</title>
</head>
<body>
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="slider swiper">
<div class="slider__wrapper slider-wrapper">
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img data-title="Coffe Beans" class="slide-picture" src="./img/beans2.jpg" alt="Image">
</div>
</div>
</div>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img data-title="City View" class="slide-picture" src="./img/city3.jpg" alt="Image">
</div>
</div>
</div>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img data-title="Coffe cups" class="slide-picture" src="./img/cups.jpg" alt="Image">
</div>
</div>
</div>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img data-title="Coffe Cups" class="slide-picture" src="./img/cups2.jpg" alt="Image">
</div>
</div>
</div>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img data-title="Coffe City View" class="slide-picture" src="./img/work-place-coffee5.jpg" alt="Image">
</div>
</div>
</div>
<main class="page">
<div class="slider swiper">
<div class="slider__wrapper slider-wrapper">
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img
data-title="Coffe Beans"
class="slide-picture"
src="./img/beans2.jpg"
alt="Image"
/>
</div>
<div class="slider__scrolbar"></div>
</div>
</div>
</main>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img
data-title="City View"
class="slide-picture"
src="./img/city3.jpg"
alt="Image"
/>
</div>
</div>
</div>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img
data-title="Coffe cups"
class="slide-picture"
src="./img/cups.jpg"
alt="Image"
/>
</div>
</div>
</div>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img
data-title="Coffe Cups"
class="slide-picture"
src="./img/cups2.jpg"
alt="Image"
/>
</div>
</div>
</div>
<div class="slider__slide slide swiper-slide">
<div class="slide__body">
<div class="slide__image">
<img
data-title="Coffe City View"
class="slide-picture"
src="./img/work-place-coffee5.jpg"
alt="Image"
/>
</div>
</div>
</div>
</div>
<div class="slider__scrolbar"></div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
79 changes: 77 additions & 2 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,81 @@ document.addEventListener("click", function (e) {

//Open image
if (targetElement.closest('.slide')) {

const slide = targetElement.closest('.slide');
const slideImage = document.querySelector('img');
const activeImage = document.querySelector('.slide__picture.active');

if (slide.classList.contains('swiper-slider-active')) {
slideImage.classList.add('active');
textBlock.classList.add('active');
imageOpen(slideImage);
} else {
activeImage ? activeImage.classList.remove('active') : null;
pageSlider.slideTo(getIndex(slide))
}
e.preventDefault();
}

//Close image
if (targetElement.closest('.open-image')) {
const openImage = targetElement.closest('.open-image');
const activeImage = document.querySelector('.slide__picture.active');
const imagePos = getImagePos(activeImage);

openImage.style.cssText = `
position: fixed;
left: ${imagePos.left}px;
top: ${imagePos.top}px;
width: ${imagePos.width}px;
height: ${imagePos.height}px;
transition: all ${speed}ms;
`;
setTimeout(() => {
activeImage.classList.remove('active');
activeImage.style.opacity = 1;
openImage.remove();
}, speed);

textBlock.classList.remove('active');
}
})

function getIndex(el) {
return Array.from(el.parentNode.children).indexOf(el);
}
function imageOpen(image) {
const imagePos = getImagePos(image);

const openImage = image.cloneNode();
const openImageBlock = document.createElement('div');
openImageBlock.classList.add('open-image');
openImageBlock.append(openImage);

openImageBlock.style.cssText = `
position: fixed;
left: ${imagePos.left}px;
top: ${imagePos.top}px;
width: ${imagePos.width}px;
height: ${imagePos.height}px;
transition: all ${speed}ms;
`;

document.body.append(openImageBlock);

setTimeout(() => {
image.style.opcity = 0;
openImageBlock.style.left = 0;
openImageBlock.style.top = 0;
openImageBlock.style.width = '100%';
openImageBlock.style.height = '100%';
}, 0);
}

function getImagePos(image) {
return {
left: image.getBoundingClientRec().left,
top: image.getBoundingClientRec().top,
width: image.offsetWidth,
height: image.offsetHeight
}
})
}

0 comments on commit 094dde0

Please sign in to comment.