We Keep Coding

why is my .invisible class added to all elements - child, parent, etc

When I drag one card with the red border, I wanted to only show the dragged element. So, I added the .invisible class to the original element, but everything is invisible now. Why?
Full code here: https://codepen.io/asamad9134/pen/WNKLpZb
const cards = document.querySelector('.cards');
cards.addEventListener('dragstart', (event) => {
const selectedCard = event.target;
selectedCard.classList.add('invisible');
});
cards.addEventListener('dragend', (event) => {
const selectedCard = event.target;
selectedCard.classList.remove('invisible');
});
.cards {
display: flex;
width: 100vw;
justify-content: space-around;
}
.card {
font-family: Arabic;
border-radius: 10%;
;
font-size: 4em;
text-align: center;
width: 200px;
height: 130px;
background-color: white;
border: 10px solid rgb(255, 85, 0);
}
.card:hover {
cursor: grab;
transform: scale(1.2);
transition: 0.3s;
}
.empty-divs {
display: flex;
justify-content: space-around;
width: 100vw;
}
.empty-div {
display: flex;
flex-direction: column;
align-items: center;
}
.blank-card {
width: 200px;
height: 130px;
background-color: #f4f4f4;
border-radius: 10%;
text-align: center;
border: 10px solid grey;
}
.invisible {
display: none;
}
<section class="cards">
<p class="card card-idle" id="أَرْنَب" draggable=true>أَرْنَب</p>
<p class="card card-idle" draggable=true>كِتَاب</p>
<p class="card card-idle" draggable=true>كُرَة</p>
</section>
<section class="empty-divs">
<div class="empty-div">
<img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
<p class="blank-card"></p>
</div>
</section>
EDIT, I set the opacity: 0; instead but this has a strange lag affect.

display: none; removes the tag and its effects for all intents and purposes, but the tag remains visible in the source code. Try using opacity: 0.4; so that it's visibility is changed and not completely removed from the structure. You could then set that opacity to 0 if you wanted it to be completely invisibile, but not be removed.

Here's an approach to make it so that only the current element that is being dragged displays. Note that I also used visibility: hidden to hide the cards instead of opacity: 0.
// create a nodelist of all of the cards
const cards = document.querySelectorAll('.card');
// add a an event listener for each card in the nodelist
cards.forEach(card => {
card.addEventListener('dragstart', (event) => {
const selectedCard = event.target;
// create an array of the cards that are not selected so you can
// "hide" only the not selected cards
const notSelectedCards = Array.from(cards).filter(card => card !== selectedCard)
selectedCard.classList.add('card-dragging');
notSelectedCards.forEach(card => card.classList.add('invisible'));
// remove the "invisible" class (and do whatever other
// cleanup on dragend that you want)
selectedCard.addEventListener('dragend', (event) => {
selectedCard.classList.remove('card-dragging');
notSelectedCards.forEach(card => card.classList.remove('invisible'));
}, { once: true});
})
})
* {
box-sizing: border-box;
}
.cards {
display:flex;
justify-content: space-around;
}
.card {
font-family: Arabic;
border-radius: 10%;
font-size: 4em;
text-align:center;
width: 200px;
height: 130px;
background-color: white;
border: 10px solid rgb(255, 85, 0);
}
.card:hover{
cursor: grab;
transform: scale(1.2);
transition: 0.3s;
}
.empty-divs{
display: flex;
justify-content: space-around;
}
.empty-div {
display: flex;
flex-direction: column;
align-items: center;
}
.blank-card {
width: 200px;
height: 130px;
background-color: #f4f4f4;
border-radius: 10%;
text-align:center;
border: 10px solid grey;
}
.invisible {
visibility: hidden;
}
.card-dragging {
opacity: .2;
}
<section class="cards">
<p class="card card-idle" id="أَرْنَب" draggable=true>أَرْنَب</p>
<p class="card card-idle" draggable=true>كِتَاب</p>
<p class="card card-idle" draggable=true>كُرَة</p>
</section>
<section class="empty-divs">
<div class="empty-div">
<img src="http://source.unsplash.com/random/200x200" alt="random" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img src="http://source.unsplash.com/random/200x200" alt="random" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img src="http://source.unsplash.com/random/200x200" alt="random" />
<p class="blank-card"></p>
</div>
</section>

How to resolve the issue with responsive lines in css when the browser is resized

I have tried drawing 4 vertical equidistant lines as shown in the image. The lines come out of the container when the browser is resized. How can I make it stay within the container irrespective of the browser size? I am new to CSS.
Please let me know if more details are needed on this.
.container {
width: 100%;
position: relative;
display: flex;
padding-right: 100px;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex: 1;
position: relative;
}
.bar {
flex-grow: .8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
position: absolute;
z-index: 1;
margin-left: 100%;
}
.line {
width: 1px;
height: 100%;
position: absolute;
background-color: #000000;
margin-top: 2%;
}
.line1 {
left: 0%;
}
.line2 {
left: 30%;
}
.line3 {
left: 60%;
}
.line4 {
left: 89%;
}
<div class="container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
The expected result is to have the 1st line drawn at the container's start point, the last line at the end of the container and the two lines in between be equidistant from each other.
The desired result

Try to add parent div for lines and use Flex property for that. So, you get equal distance in all the responsive windows. Below is the sample code for your image.
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width: 100%;
position: relative;
display: flex;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex:1;
position: relative;
}
.bar {
flex-grow: .8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
position: absolute;
z-index: 1;
right: 0;
}
.line-container {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
height: 100%;
top: 100%;
}
.line {
width: 1px;
height: 100%;
background-color: #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-container">
<div class="line-container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
</div>
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
</body>
</html>

Here my attempt which utilizing the advantage of flex without position. The usage of position:absolute is actually breaking the flex position. So I restructure your container and css to have as minimal as it can for the syntax to achieve your desired result.
The magic for the equal sizing of each .line is the following:
flex-grow: 1;
Here a very good reference for understanding flex better: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Not sure is it what you want but hope it helps~
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.inner-container {
display: flex;
justify-content: space-between;
width: 100%;
}
.bar {
flex-grow: .8;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
}
.line {
height: 20px;
border-left: 1px solid black;
flex-grow: 1;
}
.line:last-child {
border-right: 1px solid black;
}
<div class="container">
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>

I would use margin on your container instead of padding and use space between on your inner container flex (instead of absolute positioning), then you can absolutely position your lines 1/3rd apart and use right 0 for your last line
.container {
width: calc(100% - 100px);
position: relative;
display: flex;
margin-right: 100px;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex-grow: 1;
position: relative;
justify-content: space-between;
}
.bar {
flex-grow: 0.8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
}
.line {
width: 1px;
height: 100%;
position: absolute;
background-color: #000000;
margin-top: 2%;
}
.line1 {
left: 0;
}
.line2 {
left: 33.3333%;
}
.line3 {
left: 66.6667%;
}
.line4 {
right: 0;
}
<div class="container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>

Problem with displaying number in inner text

newbie here...
I am working on some simple project where I am trying to simulate bank app.
Thing is that when I click on send money button, I want to take value from input value, and then subtract this value from my whole account balance.
Really simple, but after first transaction I get value which I want, but after second time I get innerText displaying "Nan" instead of some number value.
Here it is javascript file, if you can see from this why I get error.
Also here it is html and css if you don't understand what I am talking about.
////////////////// TOTAL MONEY FROM CARDS ///////////////////////
const totalMoney = document.querySelector(`.totalMoney`);
const allcards = document.querySelectorAll(`.cards`);
let totalMoneyAccount = 0;
allcards.forEach((kartica) => {
let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
novacNaKartici = parseInt(novacNaKartici);
totalMoneyAccount += novacNaKartici;
totalMoney.innerText = ` ${replika2} $`;
});
//////////////////////////// TRANSFER MONEY TO SOMEONE /////////////////////////////
const reciver = document.querySelector(`input[name='recivier']`);
let amount = document.querySelector(`input[name='amount']`);
const sendMoneyBtn = document.querySelector(`.sendBtn`);
const transakcijeParent = document.querySelector(`.transakcije`);
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
function updateProfile(totalMoneyAccount) {
totalMoney.innerHTML = totalMoneyAccount;
}
<!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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="style.css" />
<title>Bank app</title>
</head>
<body>
<div class="container">
<div class="profile">
<div class="header">
<span class="material-symbols-outlined"> notifications </span>
<span class="material-symbols-outlined"> search </span>
</div>
<div class="person">
<img src="/img/cost1.jpg" alt="" />
<p>Random user</p>
<span class="totalMoney" style="font-size: 20px;"></span>
</div>
<div class="menu">
<div class="account flex">
<span class="material-symbols-outlined"> manage_accounts </span>
<p>Accounts</p>
</div>
<div class="transactions flex">
<span class="material-symbols-outlined"> receipt_long </span>
<p>Transactions</p>
</div>
<div class="bonus flex">
<span class="material-symbols-outlined"> star </span>
<p>Bonus</p>
</div>
<div class="invest flex">
<span class="material-symbols-outlined"> trending_up </span>
<p>Investments</p>
</div>
<div class="logOut flex">
<span class="material-symbols-outlined"> logout </span>
<p>Log Out</p>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="naslov">
<p>Cards</p>
<span class="material-symbols-outlined">
add_circle
</span>
</div>
<div class="allCards">
<div class="cards changeJustify">
<div class="singleCard">
<img src="/img/visa.png" alt="" class="changeImg"/>
</div>
<div class="opis">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: black; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance">
<span class="material-symbols-outlined changeSpan dots">
more_vert
</span>
<span style="font-size: 22px; color:grey(59, 59, 59);" class="novacNaKartici">2500$</span>
</div>
</div>
<div class="cards changeJustify">
<div class="singleCard ">
<img src="/img/american.jpg" alt="" class="changeImg"/>
</div>
<div class="opis ">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: grey; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance ">
<span class="material-symbols-outlined changeSpan dots" >
more_vert
</span>
<span style="font-size: 22px; color:black;" class="novacNaKartici">3500$</span>
</div>
</div>
</div>
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transactions</p>
<div class="transakcije">
</div>
</div>
</div>
<div class="right">
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transfer money</p>
<div class="transfer">
<label for="recivier">Transfer to</label>
<input type="text" placeholder="antonio3101" name="recivier">
<label for="amount">Amount</label>
<input type="number" placeholder="$300..." name="amount">
<button class="sendBtn">Send</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
background-color: #f1f2f6;
}
.profile {
height: 100vh;
width: 20%;
background-color: #1d1c57;
display: flex;
flex-direction: column;
color: white;
}
.profile .header {
display: flex;
padding: 30px;
align-items: center;
justify-content: space-between;
color: #7979a6;
}
.profile .header span {
font-size: 26px;
}
.profile .header span:hover {
color: white;
}
.profile .person {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.profile .person img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.profile .person p {
font-size: 26px;
color: #c6c5d8;
}
.profile .menu {
margin-top: 100px;
padding: 20px;
background-color: #262467;
border-radius: 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
position: relative;
font-size: 22px;
color: #7c7eaa;
}
.profile .flex {
margin-left: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.profile .flex:hover {
margin-left: 40px;
color: white;
transition: ease-in-out;
}
.logOut {
position: absolute;
bottom: 50px;
}
/*-------------------------- KARTICE ----------------------------------------- */
.main .naslov {
color: grey;
font-size: 30px;
font-weight: bold;
}
.naslov {
display: flex;
align-items: center;
justify-content: space-between;
}
.naslov span {
font-size: 32px;
}
.naslov span:hover {
color: black;
}
.main .left {
display: flex;
flex-direction: column;
margin-left: 30px;
}
.main .left .cards {
background-color: #ffffff;
padding: 20px;
display: flex;
padding: 20px;
border-radius: 20px;
}
.cards {
margin-top: 10px;
}
.cards .singleCard {
display: flex;
width: 100%;
}
.allCards {
display: flex;
flex-direction: column;
}
.cards .singleCard img {
width: 250px;
padding-right: 10px;
}
.cards .opis p {
margin: 0;
padding: 0;
margin-left: 10px;
}
.cards .opis {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.cards .balance {
margin-left: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/*------------------------------- CHANGE CARD -------------------------------- */
.changeImg {
height: 50px;
object-fit: cover;
}
.changeSpan {
display: none;
}
.changeJustify {
display: flex;
align-items: center;
}
.changeBalance {
display: none;
}
/*-------------------------- TRANSAKCIJE ----------------------------------------- */
.transakcije {
background-color: white;
display: flex;
flex-direction: column;
padding: 10px;
}
.single-transaction {
display: flex;
margin-left: 10px;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid grey;
}
.single-transaction img {
height: 60px;
width: 60px;
border-radius: 50%;
object-fit: cover;
}
.single-transaction .destination {
font-size: 16px;
color: rgb(73, 73, 73);
font-weight: bold;
}
.single-transaction .amount {
color: rgb(30, 149, 30);
font-weight: bold;
font-size: 16px;
}
.single-transaction:last-child {
border-bottom: 0;
}
/*-------------------------- RIGHT SECTIONS ----------------------------------------- */
/*-------------------------- TRANSFER MONEY ----------------------------------------- */
.right {
display: flex;
flex-direction: column;
margin-left: 100px;
}
.right .transfer {
background-color: #1d1c57;
padding: 50px 20px;
border-radius: 10px;
margin-left: 10px;
margin-right: 20px;
}
.right .transfer input {
height: 30px;
font: 24px;
margin-left: 10px;
}
.right .transfer label {
margin-left: 20px;
color: white;
}
.right .transfer button {
padding: 10px 15px;
color: black;
background-color: white;
border-radius: 5px;
border: 0;
margin-left: 20px;
margin-right: 20px;
}

You are overwriting your amount variable (which points to an input element) with the value inputted into said input.
Hence, after the first click you no longer have a reference to the input element: your code tries to read the value property of the integer amount of the last transaction. This results in the following evaluation: parseInt(amount.value) -> parseInt(undefined) -> NaN.
Change this code:
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
to something like this:
sendMoneyBtn.addEventListener(`click`, () => {
const amountValue = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amountValue;
updateProfile(totalMoneyAccount);
});
Credit to #JohnnyMopp for noticing it first.

How to make smooth block animation?

A slide opening has twitches, how can I get rid of them?
If with the last block everything is more or less normal, then with the rest are not even close. How do I make all the blocks, except the one that was clicked disappear and the remaining block is smoothly moved to the center of the screen and then opens.
$(document).ready(function() {
let status = false;
$(".block").on("click", function() {
if (status == false) {
$(".block").not($(this)).slideToggle();
$(this).animate({
maxWidth: "100%"
}, 500).find(".slide").css("display", "flex").animate({
width: "100%"
}, 500);
status = true;
} else {
$(this).animate({
maxWidth: "32%"
}, 500).find(".slide").css("display", "none").animate({
width: "0%"
}, 500);
$(".block").not($(this)).slideToggle();
status = false;
}
})
});
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
html,
body {
font-size: 10px;
}
body {
background-color: #1c1c1e;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 100%;
padding: 1rem 0;
}
.flex-block {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.block {
display: flex;
margin: 15px;
justify-content: space-between;
width: 100%;
max-width: 32%;
height: 200px;
background-color: #464649;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
}
.block .slide,
.block .content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: #d7d7df;
}
.block .slide {
background-color: #303033;
width: 0%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<section class="test">
<div class="flex-block">
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
</div>
</section>
</div>

To start, don't use JQUERY, convert that code into vanilla JS. The best way is to use JS just to apply/remove classes and use CSS for all the transitions.
You have JS events that can tell you if a certain transition applied to a block has ended (look for "ontransitionend" event), this can help you to apply CSS or a class in the exact time you need.

Not sure what this is what you are after, but I would use the callback functions of your slide toggle and animation so on the first click, you hide the unwanted blocks first and then show the slide and then on your second click, you hide the slide and then show the hidden blocks:
$(document).ready(function() {
let status = false;
$(".block").on("click", function() {
const $currentBlock = $(this); // get current clicked block
if (status == false) {
// hide non clicked blocks
$(".block").not($currentBlock).slideToggle(function() {
// run this when slide toggle has finished
$currentBlock.animate({
maxWidth: "100%"
}, 500).find(".slide").css("display", "flex").animate({
width: "100%"
}, 500);
});
status = true;
} else {
$currentBlock.animate({
maxWidth: "32%"
}, 500).find(".slide").animate({
width: "0"
}, 500, function() {
// run this when slide has finished animating
$(this).css("display", "none"); // only hide the slide once the animation is finished
$(".block").not($currentBlock).slideToggle(); // show the other blocks
});
status = false;
}
})
});
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
html,
body {
font-size: 10px;
}
body {
background-color: #1c1c1e;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 100%;
padding: 1rem 0;
}
.flex-block {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.block {
display: flex;
margin: 15px;
justify-content: space-between;
width: 100%;
max-width: 32%;
height: 200px;
background-color: #464649;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
}
.block .slide,
.block .content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: #d7d7df;
}
.block .slide {
background-color: #303033;
width: 0%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<section class="test">
<div class="flex-block">
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
<div class="block">
<div class="content">
<p>Block</p>
</div>
<div class="slide">
<p>Slide</p>
</div>
</div>
</div>
</section>
</div>

Custom Transition in vue-awesome-swiper

I have been trying to achieve create a custom transition with a vue-awesome-swiper slider. like This website slider
I already created a slider like this. when I set swiper option to effect: "fade"
But it's not as the same slide effect on that website has. it works so close but with fade-out effect and I don't want that. what I want to do achieve some custom slide effect using SwiperJs
This is my Slider.vue code
<template>
<div class="duel-image-carousel">
<swiper :options="SwiperOptionDuel" ref="mySwiper">
<swiper-slide class="duel-slide">
<div class="swiper-image swiper-img-left">
<img data-swiper-parallax-y="-35%" class="duel-img" src="#/assets/duel-4.jpg" alt />
<div class="white-overlay"></div>
</div>
<div class="swiper-image swiper-img-right">
<img data-swiper-parallax-y="35%" class="duel-img" src="#/assets/duel-3.jpg" alt />
<div class="white-overlay"></div>
</div>
</swiper-slide>
<!-- <swiper-slide class="duel-slide">
<div class="swiper-image swiper-img-left">
<img data-swiper-parallax-y="-35%" class="duel-img" src="#/assets/img/shop-look.jpg" alt />
<div class="white-overlay"></div>
</div>
<div class="swiper-image swiper-img-right">
<img data-swiper-parallax-y="35%" class="duel-img" src="#/assets/img/shop-look2.jpg" alt />
<div class="white-overlay"></div>
</div>
</swiper-slide>-->
<div class="swiper-button-prev prev-btn" slot="button-prev">
<i class="fas fa-long-arrow-alt-left"></i>
</div>
<div class="swiper-button-next next-btn" slot="button-next">
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</swiper>
</div>
</template>
<script lang ='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import {
TimelineMax,
gsap,
Power4,
Expo,
Elastic,
Bounce,
onComplete,
clearProps,
TweenMax
} from 'gsap/all';
#Component({
name: 'DuelImageCarousel',
components: {
swiper,
swiperSlide
}
})
export default class DuelImageCarousel extends Vue {
SwiperOptionDuel: any = {
slidesPerView: 1,
direction: 'horizontal',
loop: true,
grabCursor: true,
speed: 700,
paginationClickable: true,
parallax: true,
autoplay: false,
effect: 'fade',
mousewheelControl: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
};
mounted() {
}
}
</script>
<style lang="scss" scoped>
.duel-image-carousel {
width: 90%;
margin: 0 auto;
overflow: hidden;
margin-bottom: $section-margin;
}
.swiper-image {
width: 50%;
display: inline-block;
position: relative;
height: 80vh;
overflow: hidden;
#include mediaXs {
height: 30vh;
}
#include mediaSm {
height: 40vh;
}
#include mediaMd {
height: 55vh;
}
img {
height: 100%;
object-fit: cover;
width: 100%;
}
.white-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 3;
}
}
.swiper-img-right {
img {
object-position: top center;
}
}
.swiper-button-prev,
.swiper-button-next {
transition: all 0.3s ease-out;
&:hover {
background: #000;
color: #fff;
}
}
.swiper-button-prev {
left: 50%;
width: 50px;
height: 45px;
font-family: 'Font Awesome 5 Free';
content: '\f30b';
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
transform: translateX(-99%);
}
.swiper-button-next {
left: 50%;
width: 50px;
height: 45px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
transform: translateX(0%);
}
</style>
What should i do now to achieve this ? Any idea developers?
Thanks in advance.