Arrows in React Swiper Js: How to Customize Prev/Next Button

I was asked on YouTube to explain how to customize the appearance of the prev/next arrows in the React version of Swiper Js. There are 2 methods. One is to simply overwrite the color value. The other one is to completely replace the image. Follow along to learn how to accomplish both.

1. Change Color of Swiper Arrows

To change the colors of the prev/next arrows you can overwrite css like this:

.swiper-button-next { color: red; }
Replace color of swiper js arrows

To replace the image you can do something like this:

2. Replace Image of Swiper Arrows

.swiper-button-next {
  background-image: url(./next.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-next::after {
  display: none;
}
Replace arrows image in Swiper js

In our example we use an svg to replace the original image. However, if you want you can also use any other web compatible image format you want like png, jpeg etc…

To change the arrow on the left replace class swiper-button-next with swiper-button-prev. Also keep in mind that there is a class called swiper-button-disabled which shows an arrow in a opaque way, so you probably want to overwrite that one as well.

If you want to learn more I have provided a working demo for you and also uploaded the full code to GitHub. Click the links below to find out more. Also, if you want feel free to follow me on Twitter or visit me on YouTube.

Links:

Have more questions about Swiper Js or web development tutorials in general? Leave a comment down below :-)

Hacker

How Threat Actors Bypass Your MFA Protection

You think your accounts are safe because you turned on Multi Factor Authentication (MFA)? Well, think again. Here are 3 ways how hackers can bypass it and gain access to your precious data.

1. Modlishka

Modlishka is an open source tool available on GitHub which allows to setup phishing websites easily with an emphasis on MFA bypassing. The basic idea is to proxy all the data between you and the platform you are trying to access. It’s pretty much a man in the middle attack but completely bypassing MFA. Don’t believe me? Check out this video of Modlishka in action:

2. SIM Card Swapping

The idea behind SIM Swapping is that someone convinces your cell phone provider to assign your phone number to another sim card. This way threat actors would get access to all the text messages you would receive without you even noticing – including access tokens.

You think SIM Swapping is not a thing? Brian Krebs says it is.

3. E-Mail Forwarding

Imagine the following scenario: You’re not using MFA for your email account and a hacker gained access because you used the same password on a different platform which was recently compromised. One thing that a threat actor immediately will do is setup a forwarding rule to an email address they control. This way they’ll get access to any tokens sent to your email address even if you activate MFA on your email account at a later date – it’s too late and you won’t even notice that your authentication method got compromised.

How To Protect Yourself

  1. Do not rely on phone/email based MFA
  2. Use an authenticator app like Authy or IBM Verify
  3. Check if the url of the site which asks for a token actually matches the address you expect to be. If evil-site.com is asking for your Facebook token something’s wrong.
  4. Enable MFA. Now.
  5. Don’t re-use passwords. Use a password manager!

Photo by Luther Bottrill on Unsplash

How to Set Responsive Breakpoints in Swiper React

I’ve been asked on YouTube how to use breakpoints in the new react version of Swiper, so here it is.

Download Source Code

First, you have to set breakpoints in jsx:

<Swiper
  breakpoints={{
    // when window width is >= 640px
    640: {
      width: 640,
      slidesPerView: 1,
    },
    // when window width is >= 768px
    768: {
      width: 768,
      slidesPerView: 2,
    },
  }}
>
  {slides}
</Swiper>

Then, add custom media queries to your css:

.swiper-container {
  width: 480px;
}

@media screen and (min-width: 640px) {
  .swiper-container {
    width: 640px;
  }
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 768px;
  }
}

Hope this was helpful to you, don’t forget to checkout my working demo on GitHub. Leave a comment here if you have any questions. Happy coding!