I would like to add multiple sliders using css scroll-snapping to one page of a website. I've been following a fantastic tutorial by Alex Clark, however, when I add more than one slider to a page, the navigation buttons stop working. Is there a way to loop over the sliders using javascript and add the navigation function to multiple sliders?
const slider = document.querySelector("[data-slider]");
const prevButton = document.querySelector("[data-prev]");
const nextButton = document.querySelector("[data-next]");
function slide(direction) {
let left;
const { scrollLeft, clientWidth } = slider;
switch (direction) {
case "prev":
left = scrollLeft - clientWidth;
break;
case "next":
default:
left = scrollLeft + clientWidth;
break;
}
slider.scroll({
left,
behavior: "smooth"
});
}
if (slider && prevButton && nextButton) {
prevButton.addEventListener("click", () => slide("prev"));
nextButton.addEventListener("click", () => slide("next"));
}
/* Base */
.slider {
display: flex;
align-items: center;
position: relative;
}
.slider__slides {
max-height: 40vh;
position: relative;
display: flex;
align-items: center;
gap: 3rem;
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.slider__slide {
scroll-snap-align: start;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
}
.slider__slide > img {
max-width: 100%;
height: 100%;
object-fit: contain;
}
/* Navigation */
.slider__nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}
.slider__nav > button {
font-family: sans-serif;
background: black;
color: white;
padding: 1rem;
transition: all 0.2s ease-in-out;
pointer-events: initial;
}
.slider__nav > button:hover {
background: gray;
cursor: pointer;
}
/* Modifiers */
.slider--fullscreen {
height: 40vh;
}
.slider--fullscreen .slider__slides {
max-height: 40vh;
gap: 0;
}
.slider--fullscreen .slider__slide {
height: 40vh;
}
.slider--fullscreen .slider__slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="slider slider--fullscreen">
<nav class="slider__nav">
<button title="Go to the previous slide" data-prev>
←
</button>
<button title="Go to the next slide" data-next>
→
</button>
</nav>
<div class="slider__slides" data-slider>
<figure class="slider__slide">
<img src="https://picsum.photos/1200/800" alt="">
</figure>
<figure class="slider__slide">
<img src="https://picsum.photos/1000/900" alt="">
</figure>
<figure class="slider__slide">
<img src="https://picsum.photos/1400/1400" alt="">
</figure>
</div>
</div>
<div class="slider slider--fullscreen">
<nav class="slider__nav">
<button title="Go to the previous slide" data-prev>
←
</button>
<button title="Go to the next slide" data-next>
→
</button>
</nav>
<div class="slider__slides" data-slider>
<figure class="slider__slide">
<img src="https://picsum.photos/1200/800" alt="">
</figure>
<figure class="slider__slide">
<img src="https://picsum.photos/1000/900" alt="">
</figure>
<figure class="slider__slide">
<img src="https://picsum.photos/1400/1400" alt="">
</figure>
</div>
</div>
Related
Sorry, I repost the problem:
I want to remove a single container when their border right x become inferior to the border left x of their parent. It work fine with visibility hidden, but not with remove() as it remove all the containers.
Here the complete code of the problem...
Here is the JavaScript, for what the result is unexpected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
//container.style.visibility = "hidden"; // work fine
//container.style.display = "none"; // hide all the container
container.remove() // remove all the container
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
If you remove() the most left container, the other contains will move over to fill the gap that is there by removing the previous containers.
When they move, they instantly match your if, and therefore they are removed them self.
Fix 1
Use justify-content: flex-end; on the .division so that the containers are aligned from the end of the box, so it won't overlap if you remove any of them. This way remove() will work as expected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.remove();
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
justify-content: flex-end;
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Fix 2
Using style.visibility = "hidden" is your best option, if you don't want to change the HTML/CSS to prevent the moving of the containers when you remove() one.
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.style.visibility = "hidden"; // work fine
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
hi I have a list of project website in my website and by clicking view projects button,
my websites which already are on display will hide and then show by clicking again. I need to start from not viewing the websites and then clicking the button to show and clicking to remove so I need to reverse what I have currently
const btn = document.getElementById('mybtn');
const images = document.getElementById('images');
btn.addEventListener('click', function () {
if (images.classList.contains('hidden')) {
images.classList.remove('hidden');
setTimeout(function () {
images.classList.remove('transform');
}, 20);
} else {
images.classList.add('transform');
images.addEventListener('transitionend', function(e) {
images.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
#mybtn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
background-color: rgba(143, 134, 134, 0.589);
text-decoration: none;
color: aliceblue;
font-family: "Montserrat", sans-serif;
text-align: center;
border-radius: 5px;
border:none;
cursor: pointer;
}
#mybtn:hover {
background-color: rgb(245, 38, 38);
}
.view-projects {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.project-images {
justify-items: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
margin-top: 30px;
z-index: 2;
position: relative;
transition: 0.5s ease-in ;
}
.hidden {
display: none;
}
.transform {
transform: translateY(100%);
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: aliceblue;
margin-top: 5px;
background-color: rgba(150, 144, 144, 0.233);
padding: 3px;
border-radius: 5px;
}
.image a:hover {
background-color: rgba(123, 126, 129, 0.116);
}
<div class="view-projects">
<button id="mybtn">View Projects</button>
</div>
<div id="images" class="project-images">
<div class="image">
<img src="./images/projects/color-flipper.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/counter.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/movies.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/quotes.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/secrets.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/todo.PNG" alt="">
View Website
View Source
</div>
</div>
You should add the hidden class to your <div id="images" class="project-images"> code. This would resolve your problem.
Add class hidden to your images element.
const btn = document.getElementById('mybtn');
const images = document.getElementById('images');
btn.addEventListener('click', function () {
if (images.classList.contains('hidden')) {
images.classList.remove('hidden');
setTimeout(function () {
images.classList.remove('transform');
}, 20);
} else {
images.classList.add('transform');
images.addEventListener('transitionend', function(e) {
images.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
#mybtn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
background-color: rgba(143, 134, 134, 0.589);
text-decoration: none;
color: aliceblue;
font-family: "Montserrat", sans-serif;
text-align: center;
border-radius: 5px;
border:none;
cursor: pointer;
}
#mybtn:hover {
background-color: rgb(245, 38, 38);
}
.view-projects {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.project-images {
justify-items: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
margin-top: 30px;
z-index: 2;
position: relative;
transition: 0.5s ease-in ;
}
.hidden {
display: none;
}
.transform {
transform: translateY(100%);
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: aliceblue;
margin-top: 5px;
background-color: rgba(150, 144, 144, 0.233);
padding: 3px;
border-radius: 5px;
}
.image a:hover {
background-color: rgba(123, 126, 129, 0.116);
}
<div class="view-projects">
<button id="mybtn">View Projects</button>
</div>
<div id="images" class="project-images hidden">
<div class="image">
<img src="./images/projects/color-flipper.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/counter.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/movies.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/quotes.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/secrets.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/todo.PNG" alt="">
View Website
View Source
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am trying to create a custom search box. Please see code below.
Problem 1: The input element (although not visible) in the figure below appears to be above the search icon before it is clicked (see green circle). How can I place both as inline? Note: The layout of the blue container was created using flexbox.
.
Problem 2: In the image below, on clicking the search icon, a space appears between the input element and the icon element (see green circle in section 3). Is it a result of the flexbox property? How can I get rid of it?
Problem 3: I need help in perfectly aligning the contact details in section 1 (see image in problem 2) with their corresponding icons. The phone numbers and email address appear to be at the bottom of the icons instead of center.
Thank you!
body {
padding: 0 !important;
margin: 0 !important;
/* font-size: 1.2em; */
background: black;
}
* {
box-sizing: border-box;
}
/* PRE TOP NAVIGATION BAR */
.preTopNav {
background-color: navy;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
width: 100%;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.preTopNav-Items a {
text-decoration: none;
color: white;
}
.preTopNav .contactDetails,
.preTopNav .socialDetails {
align-items: center;
justify-content: center;
}
.preTopNav .search {
align-items: center;
justify-content: flex-end;
width: 40px;
background-color: navy;
border-radius: 4px;
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: width 0.5s;
padding: 0;
overflow: hidden;
border: mone;
}
.preTopNav .search img:hover {
cursor: pointer;
}
.preTopNav .search.active {
width: 300px;
}
.preTopNav .search input {
/* margin-right: 50px; */
position: relative;
right: 50px;
width: calc(100%-50px);
padding: 3px 10px;
font-size: 16px;
}
/* PHOTO SLIDESHOW */
/* MEDIA QUERIES */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home BGS</title>
<link rel="stylesheet" href="main.css" />
<script
src="https://kit.fontawesome.com/718022a53c.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- PRE TOP NAVIGATION BAR -->
<div class="preTopNav">
<div class="preTopNav-Items contactDetails">
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
+2348056710255
</div>
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
012911722
</div>
<div class="contactDetails-Items">
<img src="https://www.telegram.org/img/t_logo.png" alt="" />
<a href="info#bethelgeminischools.com"
>info#bethelgeminischools.com</a
>
</div>
</div>
<div class="preTopNav-Items socialDetails">
<a href="https://www.facebook.com/bethelgeminischools"
><img
src="/Icons/Facebook (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.twitter.com/bethelgeminischools"
><img
src="/Icons/Twitter (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.instagram.com/bethelgeminischools"
><img
src="/Icons/Instagram (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.linkedin.com/bethelgeminischools"
><img
src="/Icons/LinkedIn (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.wa.me/2348056710255"
><img
src="/Icons/Whatsapp (Transparent - White Outline).png"
alt=""
/></a>
<a href="https://www.t.me/bethelgeminischools"
><img
src="/Icons/Telegram (Transparent - White Outline).png"
alt=""
/></a>
</div>
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<img
class="searchIcon"
src="https://www.telegram.org/img/t_logo.png"
alt=""
/>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".searchIcon").click(function () {
$(".search").toggleClass("active");
});
});
</script>
</body>
</html>
You can simplify your HTML and use the flexbox efficiently.
Complete guide to CSS flexbox | Media Query for Responsive design
$(".searchIcon").click(function() {
$(".search").toggleClass("active");
})
* {
margin: 0
}
.preTopNav {
display: flex;
padding: 15px 20px;
align-items: center;
background-color: navy;
font-family: helvetica, arial, sans-serif;
}
.contactDetails {
display: flex;
flex: 1;
}
.contactDetails a {
display: flex;
text-decoration: none;
color: white;
margin-left: 20px;
align-items: center;
}
.contactDetails a:first-child {
margin-left: 0;
}
.contactDetails a img {
margin-right: 10px;
}
.socialDetails {
width: 30%;
display: flex;
justify-content: center;
}
.socialDetails a {
margin: 0 5px;
display: flex;
}
.search {
width: 18%;
display: flex;
justify-content: flex-end;
overflow: hidden;
}
.searchBar {
display: none;
}
.search.active .searchBar {
display: block;
margin-right: 10px;
box-sizing: border-box;
width: 100%;
transition: width 0.5s;
}
#media screen and (max-width: 991px) {
.preTopNav {
flex-direction: column
}
.socialDetails {
margin-top: 20px;
width: 100%;
justify-content: center;
}
.search {
width: 50%;
margin-top: 20px;
justify-content: center;
text-align: center;
}
}
#media screen and (max-width: 767px) {
.contactDetails a {
margin-bottom: 10px;
}
.contactDetails {
flex-direction: column;
align-items: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="preTopNav">
<div class="preTopNav-Items contactDetails">
<img src="https://placehold.it/24x24" alt="" /><span>+2348056710255M</span>
<img src="https://placehold.it/24x24" alt="" /><span>012911722</span>
<img src="https://placehold.it/24x24" alt="" /><span>info#bethelgeminischools.com</span>
</div>
<div class="preTopNav-Items socialDetails">
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
<img src="https://placehold.it/24x24" alt="" />
</div>
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<img class="searchIcon" src="https://placehold.it/24x24" alt="" />
</div>
</div>
Problem 1:
If you add display: flex to the parent div container the items will displayed in a grid like view.
Problem 2: The gap is caused by right css attribute. Also note that when using calc you need to add a space between the operator
.preTopNav .search input {
position: relative;
right: 50px; <-- This is causing the space/gap between the search box and icon
width: calc(100% - 50px); <-- Added space before and after minus
padding: 3px 10px;
font-size: 16px;
}
Problem 3: Make the parent containers display flex and add align-items: center to align properly.
.contactDetails-Items {
display: flex;
align-items: center;
margin-right: 20px;
}
I've created a Sandbox where you can see the final result.
How do I add a previous and next function on a vertical carousel that is also compatible with Squarespace? I am trying to model a carousel around the following code I found from codepen
When I add more images to the carousel, I am unable to scroll down. Can someone help in showing me how I can add this functionality please? Thank you in advance!
Below is the code:
HTML
<div class="wrapper">
<ul class="list-reset">
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
</ul>
<div class="featured-image"></div>
</div>
CSS
body {
background: #f3f3f3;
color: #111;
padding: 20px;
display: flex;
place-items: center;
height: 100%;
justify-content: center;
align-items: center;
height: 90vh;
}
.wrapper {
width: 80%;
position: relative;
max-width: 100%;
overflow: hidden;
// border-radius: 3px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .1)
}
.list-reset {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
width: calc(30% - 4px);
min-height: 350px;
height: 70vh;
flex-direction: column;
border: 2px solid #fff;
li {
padding: 20px;
border-bottom: 2px solid #fff;
transition: all 600ms ease;
cursor: pointer;
&:hover {
background: #f9f9f9;
}
img {
transition: all 600ms ease;
opacity: 0;
transform: translatey(10px);
transform-origin: bottom;
}
a {
display: block;
margin-top: 4px;
}
span {
font-size: 0.7rem;
opacity: 0.7;
}
img {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.active {
z-index: 999;
background: #fff;
a {
color: #548AF7;
}
img {
opacity: 1;
transform: translatey(0);
}
}
}
Javascript
$('.list-reset li').on('click', function() {
$('.list-reset li').removeClass('active')
$(this).addClass('active')
})
You could just add:
.list-reset{
overflow: auto;
}
So you can scroll down the list.
I'm aware it has been months so you probably worked this out, but I'll leave this here just in case.
https://www.quackit.com/html/codes/html_scroll_box.cfm
I have a layout made with iDangerous swiper and iScroll.js and I've found that I can't make click on any link or submit button inside of that layout.
I have made a Codepen as an example: http://codepen.io/anon/pen/eNzMVX
This is the layout and the initialization of Swiper and iScroll:
$(document).ready(function () {
//initialize swiper when document ready
var mainSwiper = new Swiper ('#slideshow', {
// Optional parameters
direction: 'horizontal',
keyboardControl: true,
mousewheelControl: false,
grabCursor: true,
loop: false
});
var scrollSwiper = new Swiper ('#scroller--1', {
// Optional parameters
scrollbar: '',
grabCursor: true,
direction: 'vertical',
keyboardControl: true,
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true
})
});
html,
body {
height: 100%;
overflow: hidden;
position: relative;
}
.main-wrap,
.content {
height: 100%;
position: relative;
}
.bg--darkgrey,
.bg--grey {
color: #fff;
}
.bg--darkgrey {
background-color: #a9a9a9;
}
.bg--grey {
background-color: #4b4b4b;
}
.bg--radial-gradient-trans {
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
background: -webkit-radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
background: radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
}
.bg--radial-gradient {
background: -webkit-radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
background: radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
}
.bg--linear-gradient {
background: -webkit-linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
background: linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
}
.header__cover {
width: 100%;
height: 100%;
min-height: 200px;
text-align: center;
position: relative;
background-size: cover;
}
.header__cover h1,
.header__cover h2,
.header__cover h3,
.header__cover p {
color: #fff;
}
.header__cover h1,
.header__cover h2,
.header__cover h3 {
text-transform: uppercase;
}
.header__cover--content {
top: 50%;
z-index: 2;
width: 100%;
padding: 1em 1.5em;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.page__slide--1 {
background-color: #f00;
}
.page__slide--2 {
background-color: #008000;
}
.page__slide--content {
width: 100%;
min-height: 200px;
}
.swiper-container {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.page__slide--content a {
color: #fff;
}
<div class="main-wrap">
<div class="content">
<div id="slideshow" class="swiper-container">
<div class="swiper-wrapper">
<article class="swiper-slide page__slide--1" id="home">
<div class="swiper-container" id="scroller--1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<header class="header__cover">
<article class="header__cover--content">
<h1 class="beta">Slide 1</h1>
</article>
<div class="dotted"></div>
<div class="bg--radial-gradient-trans"></div>
<div class="triangle-fold"></div>
</header>
</div>
<div class="swiper-slide" style="background-color: blue;">
<div class="page__slide--content">
Google
</div>
</div>
</div>
</div>
</article>
<article class="swiper-slide page__slide--2" id="empresa">
<div class="swiper-container" id="scroller--2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<header class="header__cover">
<article class="header__cover--content">
<h1 class="beta">Slide 2</h1>
</article>
<div class="dotted"></div>
<div class="bg--radial-gradient-trans"></div>
<div class="triangle-fold"></div>
</header>
</div>
<div class="swiper-slide">
<div class="page__slide--content"></div>
</div>
</div>
</div>
</article>
</div>
<!-- .slideshow__container -->
</div>
<!-- #slideshow -->
</div>
</div>