On focus, a small menu opens.
Clicking on a link inside a menu should not close it.
Clicking outside the menu area should close the menu. Just like losing focus.
Is it possible with CSS? Or a little vanilla JS.
[tabindex="1"] {display:inline-block;}
b {cursor:pointer;}
.menu {
position:absolute; visibility:hidden;
display:block; padding:10px; white-space:nowrap;
border:1px solid black; background:pink;
transition:0.35s ease-out;
}
[tabindex="1"]:focus .menu {visibility:visible;}
p:target {background:gold;}
<div tabindex="1"><b>☰</b>
<div class="menu">
link 1 some text<br>
some link 2 text
</div>
</div>
<br><br><br><br><br>
<p id="01">Lorem ipsum dolor sit amet, consectetur ..</p>
<p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>
what about something like this?
document.querySelector('[tabindex="1"]').addEventListener('click', function(){
document.querySelector('.menu').classList.add('active')
})
do the same when clicking out side and just remove the active class, also change your CSS to be something like this
.menu.active {visibility:visible;}
outside click:
document.addEventListener('click', ({ target }) => {
if (!target.closest('.menu')) {
document.querySelector('.menu').classList.remove('active')
}
})
So far I'm using this solution. With javascript. Works in IE 11.0. If anyone finds a solution with initial conditions, without using javascript, please let me know.
var ddc = document.querySelector(".drop");
var lnk = document.querySelectorAll("[href*='#']");
for (var i = 0; i < lnk.length; i++) {
lnk[i].addEventListener("blur", function () {
ddc.focus();
});
}
.drop {display:inline-block; position:relative; outline:none;}
b {cursor:pointer; font-size:18px; display:inline-block; width:20px;}
.menu {
visibility:hidden; opacity:0; position:absolute;
top:120%; padding:10px; white-space:nowrap;
border:1px solid black; background:pink;
transition:0.55s ease-out;
}
.drop:focus .menu {visibility:visible; opacity:1;}
p:target {background:gold;}
b::before, b::after {
position:absolute; top:0; left:0;
line-height:1.0; transition:0.55s ease-out;
}
b::before {content: "\2630";}
b::after {content: "\2715"; visibility:hidden; opacity:0;}
.drop:focus b::before {visibility:hidden; opacity:0; transform:rotateZ(180deg);}
.drop:focus b::after {visibility:visible; opacity:1;}
i {
position:absolute; cursor:pointer;
top:0; right:0; bottom:0; left:0;
z-index:10; opacity:0; display:none;
}
.drop:focus i {display:inline-block;}
.drop i:focus .menu {visibility:hidden; opacity:0;}
<div tabindex="1" class="drop">
<i tabindex="1"></i><b></b>
<div class="menu">
link 1 some text<br>
some link 2 text
</div>
</div>
<br><br><br><br><br>
<p id="01">Lorem ipsum dolor sit amet, consectetur ..</p>
<p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>
I have this gallery of images and I want on hover to zoom the image. I have shown below two images the first one is without hover effect and the second one is when image is hovered. This should be applied on every image. I also show you the code that I used to create the gallery.
HTML
<div class="tab-content">
<div class="tab-pane active" id="all">
<div class="row">
<div class="col-xl-6 col-lg-6 ">
<div class="first-img">
<img src="img/image_1.png" alt="">
<div class="text">
<h3>Mixed Gin Drinks</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
<div class="second-img">
<img src="img/image_3.png" alt="">
<div class="text">
<h3>Gin Tonic</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 second-col">
<div class="third-img">
<img src="img/image2.png" alt="">
<div class="text">
<h3>Gin on a Bar </h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
<div class="fourth-img">
<img src="img/image_4.png" alt="">
<div class="text">
<h3>Gin Tonic 2</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
main .gallery .tab-content .tab-pane .first-img,.second-img,.third-img,.fourth-img{
position: relative;
margin-bottom: 15%;
}
main .gallery .tab-content .tab-pane .second-col{
margin-top:5%
}
main .gallery .tab-content .tab-pane .text{
position: absolute;
left: 50px;
bottom: -60px;
}
main .gallery .tab-content .tab-pane .text h3{
font-size: 40px;
line-height: 48px;
letter-spacing: 0px;
font-weight: bold;
margin-bottom: 0;
}
main .gallery .tab-content .tab-pane .text p{
font-size: 16px;
opacity: 0.5;
}
main .gallery .tab-content .tab-pane img{
width: 100%;
}
If you want to try that with CSS, you can try the "Transform" Property + scale.
choose your selector, in below "img" tag is taken, you can select yours:
img:hover {
transform: scale(2,2);
}
You can achieve this by selecting the "img" tag in the CSS as shown below,
img{
transition: 0.5s all ease-in-out; /*Animation for smooth transformation of images*/
}
Now, to add the zoom effect on hover
img:hover{
transform: scale(1.5); /*150% zoom*/
}
I have a problem with my page width. Whatever I try it has white margin on the left or right (on the right by default, on the left if I use margin-right:0).
If I use margin:0 than it stays on the right.
Tried everything I know and can't get rid of it. Clearing margins using asterix for whole page didn't help, setting width to 100% didn't help. I don't know, maybe the sidenav caused all these issues but I honestly can't see anything like that.
Navbar at the top is fine, it take 100% of the width of the page. Problem starts underneath with the container.
<script>
function openSlideMenu(){
document.getElementById('side-menu').style.width = '250px';
document.getElementById('main').style.marginRight = '250px';
}
function closeSlideMenu(){
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginRight = '0';
}
</script>
*{
margin:0;
padding: 0;
}
body{
line-height: 1.6em;
font family: Arial, Helvetica, Sans-Serif;
font-size: 16px;
color: #FFFFF0;
}
.navbar-nav a{
text-decoration: none;
color: #f4f4f4;
font-size: 30px;
font-family: Arial Sans-serif;
margin: 0 15px 0 15px;
}
.navbar-nav a:hover{
color:#999999;
}
.navbar-nav{
margin-left: 180px;
}
.side-nav{
height:100%;
width:0;
position:fixed;
z-index:1;
top:0;
right:0;
background-color:#111;
opacity:0.9;
overflow-x:hidden;
padding-top:60px;
transition:0.5s;
}
.side-nav a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-size:22px;
color:#ccc;
display:block;
transition:0.3s;
}
.side-nav a:hover{
color:#fff;
}
.side-nav .btn-close{
position:absolute;
top:0;
left:22px;
font-size:36px;
margin-right:50px;
}
#main{
transition:margin-right 0.5s;
padding:20px;
overflow:hidden;
width:100%;
}
.container{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
background-color: #cc0000;
width:100vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hartstown Huntstown FC | Home</title>
</head>
<body>
<div style="background-color: #1a1a1a;">
<div class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index1.html"><img src="images/logo.jpg" alt="Company logo"></a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li><a class="nav-item nav-link" href="history.html">HISTORY</a></li>
<li><a class="nav-item nav-link" href="contact.php">CONTACT</a></li>
<li><a class="nav-item nav-link" href="teams.html">TEAMS</a></li>
<li><a class="nav-item nav-link" href="gallery.html">GALLERY</a></li>
<li><a class="nav-item nav-link" href="https://www.balondirect.com/club-shop/hartstown-huntstown-fc.html">SHOP</a></li>
</ul>
</div>
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#fff" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#fff" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#fff" stroke-width="5"/>
</svg>
</a>
</span>
</div>
</div>
<div id="side-menu" class="side-nav">
×
Home
History
Contact
Teams
Gallery
Shop
</div>
<div class="container" id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde repellendus reiciendis illo ipsam labore nostrum nihil assumenda magni quod hic saepe accusantium, quam nemo illum, dicta harum! Commodi rem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</body>
</html>
It is probably the Bootstrap container class adding your white space. You should inspect the elements in Chrome, and it will tell you which CSS is operating on that particular element.
For a full width container, you should probably be using the Bootstrap container-fluid class.
It is rarely a good idea to modify the CSS for a main bootstrap class such as container. It is better to add additional classes or id with your own rules.
<div class="container container--mysite" id="main">
i.e. in the above you have added a modifier class called container--mysite. If you have problems with CSS specificity/priority just be more specific.
e.g.
.container--myapp { myrules}
// if the above doesn't work, try...
#main .container { myrules }
.container .container--mysite {myrules}
will produce CSS which overrides the standard Bootstrap rules for the standard container class
In order to have some structure in your CSS, look up 'Block Element Modifier CSS' if you're not using SASS/LESS to create your CSS.
How can I customize the arrow buttons below from swipers?
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
I did it crudely but it does not seem to be the right way because I get some margin on the right of the button.
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
The entire code:
.swiper-container {
width: 100%;
height: 450px;
}
.swiper-slide {
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide {
font-size: 18px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.swiper-banner-slide {
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide .title {
font-family: 'Bellefair', serif;
font-size: 41px;
line-height: 40px;
font-weight: 300;
}
.swiper-slide .subtitle {
font-size: 21px;
}
.swiper-slide .text {
font-size: 21px;
letter-spacing: 1px;
}
.slide-info-container {
color: #000;
}
.swiper-block {
padding: 40px 0 40px;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
/*padding: 0;*/
}
.swiper-block .swiper-container {
width: 100%;
height: 300px;
margin: 20px auto;
}
.swiper-block .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<!-- CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Zurb - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<!-- Swiper - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<main>
<div class="row" id="banner">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/1.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 1</h3>
<div class="text">
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. </p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/2.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 2</h3>
<div class="text">
<p>Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/3.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 3</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. </p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/4.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 4</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. </p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/5.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 5</h3>
<div class="text">
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.</p>
</div>
More Details
</div>
</div>
</div>
<!-- grid container -->
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
<div class=" swiper-button-prev hide-for-small-only hide-for-medium-only "></div>
</div>
<!-- Swiper -->
</div>
<!-- row block -->
<div class="row swiper-block ">
<div class="grid-container ">
<div class="grid-x grid-padding-x ">
<div class="small-12 cell ">
<!-- Swiper -->
<div class="swiper-container ">
<div class="swiper-wrapper ">
<div class="swiper-slide ">Slide 1</div>
<div class="swiper-slide ">Slide 2</div>
<div class="swiper-slide ">Slide 3</div>
<div class="swiper-slide ">Slide 4</div>
<div class="swiper-slide ">Slide 5</div>
<div class="swiper-slide ">Slide 6</div>
<div class="swiper-slide ">Slide 7</div>
<div class="swiper-slide ">Slide 8</div>
<div class="swiper-slide ">Slide 9</div>
<div class="swiper-slide ">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination "></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
$(function() {
$(document).foundation();
var swiper = new Swiper('#banner .swiper-container', {
pagination: '#banner .swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
centeredSlides: true,
spaceBetween: 30,
loop: true,
keyboardControl: true,
nextButton: '#banner .swiper-button-next',
prevButton: '#banner .swiper-button-prev',
});
var swiper2 = new Swiper('.swiper-block .swiper-container', {
pagination: '.swiper-block .swiper-pagination',
slidesPerView: 5,
paginationClickable: true,
spaceBetween: 30,
freeMode: true,
keyboardControl: false,
});
});
</script>
I don't want the margin.
Any ideas?
EDIT:
How do I change the colour blue on the arrow to black?
.swiper-button-next,
.swiper-button-prev {
background-color: white;
background-color: rgba(255, 255, 255, 0.5);
right:10px;
padding: 30px;
color: #000 !important;
fill: black !important;
stroke: black !important;
}
Does not work of course!
Add this to style the prev / next arrows:
.swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}
Where "4c71ae" is the color you want to use in HEX.
:root {
--swiper-theme-color: #000;
}
Try this instead of !important to change color.
With the current version of SwiperJS (v.5.3.8) you can change the color of the arrows in css without any issues. Just define color.
.swiper-button-prev {
color: red;
}
.swiper-button-next {
color: #000;
}
Those who want to change the default arrows just set you custom SVG etc in the elements the HTML; mine is next & prev
<div class="swiper-button-next">Next</div>
<div class="swiper-button-prev">Prev</div>
And remove the default icons in CSS
.swiper-button-next::after, .swiper-button-prev::after {
content: "";
}
For anyone looking to change the color etc of various buttons etc for Swiper, be sure to inspect the CSS of what you are trying to change and see if the property you are trying to change is using a CSS variable.
In the case were a CSS variable has been used, you need to re-define it in order to change it.
Example for changing the color of the swiper next/prev buttons:
Underlying CSS:
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size)/ 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color,var(--swiper-theme-color));
}
Add this to the styles.css (or globals.css in NextJS)
:root {
--swiper-navigation-color: #E49A38;
}
"I don't want the margin. Any ideas?"
If the margin is really the margin, not the result of right property, try to overwrite default "swipers" styles using !important, like this:
.class {
margin: 0 !important;
}
Otherwise set right property to 0:
.class {
right: 0;
}
Or
.class {
right: 0 !important;
}
If it doesn't work without !important.
"How do I change the colour blue on the arrow to black?"
If you just want to make them black, you can simply use one of the built-in classes (swiper-button-black in your case) - thanks to this comment.
If you use JavaScript, you can also change --swiper-navigation-color inside the page/component instead of changing :root in the CSS file. I found it more convenient in React/Next.js. Just add this to your code.
document.documentElement.style.setProperty("--swiper-theme-color", "#000")
If you are going with this solution and you are building a React/Next.js app, remember to include the code from above in useEffect to load the document in the appropriate moment (more about it here).
useEffect(() => {
document.documentElement.style.setProperty("--swiper-theme-color", "#000")
}, [])
If you're using React, another approach apart from #Jakub’s is to pass a style prop to Swiper like this
<Swiper style={{"--swiper-navigation-color": "#FFF", "--swiper-pagination-color": "#FFF"}}>
.....
</Swiper>
If you're using Angular, you can simply use ::ng-deep to override the color.
For example :
::ng-deep .swiper-button-prev,
::ng-deep .swiper-button-next {
color: white;
}
.swiper-button-next::after, .swiper-button-prev::after{
content: "";
}
.swiper-button-next {
--swiper-navigation-color:white;
}
.swiper-button-prev {
--swiper-navigation-color:white;
}
If you just want to make them white or black you can use the built-in classes.
<div class="swiper-button-prev swiper-button-white"></div>
or
<div class="swiper-button-next swiper-button-black"></div>
Very simple
.main__swiper_left {
background-image: url("../img_2/main__swiper_left.png");
width: 58px;
height: 58px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.main__swiper_left::after {
display: none;
}
Source
For the color, edit the swiper-bundle.min.css on line 13, change the :root attribute to this:
:root {
--swiper-theme-color: #FFFFFF;
}
For those who want to replace default arrows with custom SVG icon. I'm using Swiper version 8.3.2.
Here is a demo example project.
Place <img> tag into both elements.
<!-- Navigation arrows -->
<div class="swiper-button-prev">
<img src="#/assets/icons/svg/right-arrow.svg" />
</div>
<div class="swiper-button-next">
<img src="#/assets/icons/svg/right-arrow.svg" />
</div>
Then, remove the default icons in CSS.
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;
}
.swiper-button-prev img {
transform: rotate(180deg);
}
This solution worked for me:
// use the `useState` hook instead of `useRef`
const [prevEl, setPrevEl] = useState<HTMLElement | null>(null)
const [nextEl, setPrevEl] = useState<HTMLElement | null>(null)
<Swiper navigation={{ prevEl, nextEl }}>
// some slides
</Swiper>
<div ref={(node) => setPrevEl(node)}>prev</div>
<div ref={(node) => setNextEl(node)}>next</div>
.swiper.swiper-button-next {color: black; --swiper-navigation-size: 30px;}
.swiper.swiper-button-prev{color: black; --swiper-navigation-size: 30px;}
Try this one! to Increase and Decrease Size and Change Color.
Don't forget to use !important after the color property.
There are many ways to customize these arrows. You just need to specify your proper parameters in the :root of your CSS file.
:root {
--swiper-navigation-size: 16px; /* To edit the size of the arrows */
--swiper-navigation-color: #000; /* To edit the color of the arrows */
}
.swiper-button-prev {
color: green !important;
}
.swiper-button-next {
color: green !important;
}
If you want to change the color, you can simply do the following and it will overwrite the current color to white... Hope this will be useful!
Note: You can specify any color you want to change! Thanks
.swiper-button-prev,.swiper-button-next{
color:white !important;
}
This worked for me.
.swiper-button-prev {
color: red !important;
}
.swiper-button-next {
color: red !important;
}
I would like content not in view (viewport?) to be hidden, except the first <article>, until the user scrolls down the page enough (maybe until the top of the next <article> container reaches about 200px from the bottom of the viewport).
Each <article> get's the hidden class using the javascript, and when the user has scrolled down enough the hidden class is removed using the javascript.
On "My Site" (link below), it's showing the top 2 <article>'s, when it should only show the first one. I think it's the image at the top of the page that is causing the problem, but I don't know why.
My Site
HTML (only showing 1 <article> block since they are all the same)
<div class="main-2">
<!-- There are multiple <article> blocks similar to this -->
<article class="post">
<a href="image.png" rel="fwpopup" title="Image Name" class="image-link" target="_blank">
<img src="image.png" class="image" alt="Site Name">
</a>
<h1 class="h-1">Site Name</h1>
<div class="entry">
<ul class="work-features">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
<li>Work 5</li>
<li>Work 6</li>
</ul>
<div class="work-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum, neque sed lobortis blandit, tellus magna efficitur velit, sit amet faucibus mi urna et nulla. Fusce varius orci tortor, vitae.
</div>
</div>
View Website
</article>
</div>
CSS
* {
margin:0;
padding:0;
}
*,
*:before,
*:after {
box-sizing:border-box;
}
html {
font-size: 100%;
overflow-y: scroll
}
html,
body {
height:100%;
}
body {
font:normal 12px/1 Optima, Candara, Calibri, Arial, sans-serif;
text-align:center;
color:#fff;
}
body:after {
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
background:url(../images/main_background.png) 50% 180px no-repeat;
opacity:0.20;
content:'';
z-index:-1;
}
.hidden{
visibility: hidden;
}
.main-2 .image-link {
display:inline-block;
width:75%;
}
.main-2 .image-link .image {
width:100%;
}
[class|=h] {
margin-bottom:42px;
font-size:30px;
font-weight:normal;
line-height:1;
}
.portfoliopage .main-2 {
text-align: center;
}
.portfoliopage .image-link {
max-width: 1267px;
}
.portfoliopage .post:not(:last-child) {
padding-bottom:60px;
}
.portfoliopage .post:not(:first-child) {
border-top:1px dotted #d0d0d0;
padding-top:60px;
}
.portfoliopage .entry {
display:inline-block;
width:60%;
text-align: left;
}
.portfoliopage .entry .work-features {
display:inline-block;
width: 26%;
padding-top:5px;
vertical-align: middle;
}
.portfoliopage .entry .work-features li {
font-size: 15px;
padding-bottom: 5px;
}
.portfoliopage .entry .work-description {
display:inline-block;
width: 70%;
font-size: 18px;
line-height:1.5;
vertical-align: middle;
}
.portfoliopage .entry .work-description ul {
list-style: inside disc;
}
.portfoliopage .post .button-more {
display: inline-block;
padding: 14px 20px;
}
JS
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).ready(function() {
$('.post').each(function() {
if (!isScrolledIntoView($(this))) {
$(this).addClass('hidden');
}
});
$(document).on('scroll', function() {
$('.post.hidden').each(function() {
if (isScrolledIntoView($(this))) {
$(this).removeClass('hidden').css({
'display': 'none'
}).fadeIn();
}
});
});
})
Give your first article tag a height as high as the image.
Images lag in loading from the rest of the DOM. document.ready starts working before your image fully loads and stretches the article and pushes other articles beyond viewport.
At the time of document.ready firing, the second and third articles are technically in the viewport.
Giving the article fixed initial height should solve your problem.
Alternatively, instead of $(document).ready use $(window).load. window.load fires after everything is fully loaded (DOM and images). But this might slow down page's overall response speed.