Skip to content

Commit

Permalink
Add swipe feature - Beginner theme 🫥
Browse files Browse the repository at this point in the history
  • Loading branch information
@mpotane
mpotane committed Oct 7, 2022
1 parent adf106f commit 028a847
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 74 deletions.
41 changes: 10 additions & 31 deletions beginner/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,18 +266,12 @@ section {
align-items: center;
}

.fig__container {
width: 100vw;
}

.testimony {
overflow: hidden;
.swiper {
width: 100%;
}

.slide {
display: flex;
width: 300%;
transition: .6s;
.swiper-pagination .swiper-pagination-bullet-active {
background-color: salmon;
}

.fig {
Expand All @@ -288,27 +282,6 @@ section {
color: #ffffff;
}

.indicator {
text-align: center;
padding: 1.5rem;
}

.figBtn {
height: 15px;
width: 15px;
margin: 0 .5rem;
background-color: white;
border-radius: 15px;
display: inline-block;
cursor: pointer;
transition: 0.6s;
}

.active__indicator {
width: 45px;
background-color: salmon;
}

blockquote {
text-indent: 1ch;
font-style: italic;
Expand Down Expand Up @@ -377,6 +350,12 @@ figcaption {
.left-hero {
padding-left: 4rem;
}

figcaption {
transform: translateY(-1rem);
padding-top: .8rem;
padding-bottom: 1rem;
}

#hero__img {
margin-top: 4rem;
Expand Down
67 changes: 44 additions & 23 deletions beginner/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<title>Landing page</title>
<link rel="icon" href="assets/favicon.ico">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
</head>
<body>
<!-- This is the header section of the page. It contains the navigation bar and the hamburger menu. -->
Expand Down Expand Up @@ -93,30 +94,28 @@ <h4><b>Jane Doe</b></h4>
</div>
</section>
<section class="testimony" id="testimonial__section">
<div class="fig__container">
<!-- This is the testimonial section of the page. It contains the testimonials of the users. -->
<div class="testimonial">
<div class="slide">
<figure class="fig fade">
<blockquote><img src="assets/open.svg" alt="open quotation"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius aliquam unde rerum atque obcaecati ipsum consectetur velit libero, officia tempore. <img src="assets/close.svg" alt="close quotation"></blockquote>
<figcaption>~John Doe</figcaption>
</figure>
<figure class="fig fade">
<blockquote><img src="assets/open.svg" alt="open quotation"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius aliquam unde rerum atque obcaecati ipsum consectetur velit libero, officia tempore. <img src="assets/close.svg" alt="close quotation"></blockquote>
<figcaption>~John Doe</figcaption>
</figure>
<figure class="fig fade">
<blockquote><img src="assets/open.svg" alt="open quotation"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius aliquam unde rerum atque obcaecati ipsum consectetur velit libero, officia tempore. <img src="assets/close.svg" alt="close quotation"></blockquote>
<figcaption>~John Doe</figcaption>
</figure>
</div>
</div>
<!-- The indicator for the testimonial section. -->
<div class="indicator">
<span class="figBtn active__indicator"></span>
<span class="figBtn"></span>
<span class="figBtn"></span>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="fig">
<blockquote><img src="assets/open.svg" alt="open quotation"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius aliquam unde rerum atque obcaecati ipsum consectetur velit libero, officia tempore. <img src="assets/close.svg" alt="close quotation"></blockquote>
<figcaption>~John Doe</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="fig">
<blockquote><img src="assets/open.svg" alt="open quotation"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius aliquam unde rerum atque obcaecati ipsum consectetur velit libero, officia tempore. <img src="assets/close.svg" alt="close quotation"></blockquote>
<figcaption>~John Doe</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="fig">
<blockquote><img src="assets/open.svg" alt="open quotation"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius aliquam unde rerum atque obcaecati ipsum consectetur velit libero, officia tempore. <img src="assets/close.svg" alt="close quotation"></blockquote>
<figcaption>~John Doe</figcaption>
</figure>
</div>
</div>
<div class="indicator swiper-pagination"></div>
</div>

</section>
Expand All @@ -126,6 +125,28 @@ <h4><b>Jane Doe</b></h4>
<footer class="ftr">
<div>Made with ❤️ by @mpotane</div>
</footer>

<!-- main javascript -->
<script src="index.js"></script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
let swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>

</body>
</html>
17 changes: 1 addition & 16 deletions beginner/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,19 +64,4 @@ darkModeToggle.addEventListener('click', () => {
} else {
disableDarkMode();
}
});

const figBtn = document.querySelectorAll('.figBtn')
const slide = document.querySelectorAll('.slide')

/* This is a forEach loop that is iterating over all the figBtn and adding an event listener to each
one. When the figBtn is clicked, the slide is translated to the index of the figBtn. */
const num = ['0vw', '-100vw', '-200vw']
figBtn.forEach((btn, index) => {
btn.addEventListener('click', () => {
slide[0].style.transform = `translateX(${num[index]})`
const getActive = document.querySelector('.active__indicator')
getActive.classList.remove('active__indicator')
btn.classList.add('active__indicator')
})
})
});
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ <h2 class="text-3xl font-bold mt-2">Plain</h2>
<h2 class="text-3xl font-bold mt-2">Clean</h2>
</a>

<a href="beginner" class="relative bottom-0 hover:bottom-2 transition-all">
<img src="./images/beginner.png" alt="" class="rounded-md shadow">
<h2 class="text-3xl font-bold mt-2">Beginner</h2>
</a>
<a href="beginner" class="relative bottom-0 hover:bottom-2 transition-all">
<img src="./images/beginner.png" alt="" class="rounded-md shadow">
<h2 class="text-3xl font-bold mt-2">Beginner</h2>
</a>



Expand Down

0 comments on commit 028a847

Please sign in to comment.