Category: javascript

I’m trying do make a js chess board, and I only validate the pinned pieces moves, like so:

for (var j = 0; j < moves.length; j++) {
    console.log(this.position[1][moves[j].start])
    console.log(this.position[1][moves[j].start].isPinned)
    if (this.position[1][moves[j].start].isPinned || isInCheck) {
        this.makeMove(moves[j], false);
        // checks if king is in check
        this.unmakeMove(false)
    }
}

The first console.log logs the piece that’s trying to move, wich is an object, and if I manually see it’s “isPinned” key, it’s sometimes true, but even when it is true, the second console.log logs “false”.
I have no idea what is causing that, maybe some of you guys can help me

I want to use Google PubSub and Redis PubSub provided by Google Cloud in Javascript GraphQL(apollo-server).

I tried to create 2 subscription fields, but I couldn’t get the result I wanted.

this, it said that subscriptions do not provide more than two root fields.

How can I subscribe to 2 pubSub objects?

The code I used is like below.

Subscription: {
    operation: {
      subscribe: withFilter(
        (_, { channelId }, { pubSub }) => pubSub.asyncIterator(getTopic(channelId)),
        (payload, variables) => {
        
            // Some Code...
           
        }
      ),
    },
  },

I want to convert xlsx to pdf file with password to open the pdf. I already looking library that could handle that, but still no luck.

Anyone know the library that can handle my task ? Thanks

I am faced with a problem and I don’t understand how I can solve it.

I have a service where I return the following JSON:

{
    "data": [
        {
            "data": 179,
            "data_form": "Finished - Form Covid-19 Test 1",
            "form": 144,
            "user": 1,
            "status": "Finished"
        },
        {
            "data": 176,
            "data_form": "Form Covid-19 Test 2",
            "form": 144,
            "user": 1,
            "status": "In process"
        },
        {
            "data": 177,
            "data_form": "Finished - Form Covid-19 Test 3",
            "form": 144,
            "user": 1,
            "status": "In process"
        },
        {
            "data": 178,
            "data_form": "Finished - Form Covid-19 Test 4",
            "form": 144,
            "user": 1,
            "status": "In process"
        }
    ]
}

I am using a PIPE where I am sending it my array, the value I want to filter and the column where that value is:

<ion-list
  *ngFor="let form of forms | filter: searchValue: ['status','data_form']">
  <app-form-user [form]="form">
  </app-form-user>
</ion-list>

It works if I indicate the column:

    return array.filter( 
      //It works
      item=> item[column[0]].toLowerCase().includes( text ) 
    );

The idea is to look for the value in all the columns that you indicate to the pipe, I tried the following:

1.

    return array.filter( 
      item=> item[column.forEach((data) => found = data )].toLowerCase().includes( text );
    );

    return array.filter( 
      item=>Object.keys(column).every(key =>
        item[key] == column[key]
      )
    );

    return array.filter( 
      item=> column.forEach((data) => item[data].toLowerCase().includes( text ))
    );

I hope you can help me, thank you.

I am trying to group some nested array of objects. On my below data, there is a ‘products’ key property. I am trying to group the products if the vendor.email is the same. After grouping the products I also want to put the paymentDetails key property on each group.

This is my code. I am able to group the products but am not able to set the paymentDetails key and value on each group.

const data= [
        {
            _id: "622d70a49bd88b1599026318",
            products: [
                {
                    _id: "6223186e2278d4e502f5264a",
                    title: "Product number 1",
                    price: 600,
                    cartQuantity: 1,
                    vendor: {email: "[email protected]"}
                },
                {
                    _id: "622d4e9f9bd88b1599026317",
                    title: "asdas",
                    price: 100,
                    cartQuantity: 5,
                    vendor: {
                        email: "[email protected]"
                    }
                },
                 {
                    _id: "622d4e9f9bd88b1599026317",
                    title: "asdas",
                    price: 100,
                    cartQuantity: 5,
                    vendor: {
                        email: "[email protected]"
                    }
                },
            ],
            paymentDetails: {
                createdId: 1647145079,
                date: "Sun Mar 13 2022",
                amount: 700,
                email: "[email protected]",
                last4: "4242",
                transaction: "p"
            },
            status: "Pending",
            billing: {
                country: "BD",
                name: "Md. Fathe Karim",
                phone: "+88010000000",
                line1: "Madhabdi",
                city: "Narshingdi",
                postal_code: "1604",
                state: "Bandarban"
            }
        }]

const mapped = {};                       // MY function
data[0].products.forEach(item => {
  if (item.vendor.email in mapped) return mapped[item.vendor.email].push(item); 
  mapped[item.vendor.email] = [item];
});

const expectedFormat = Object.keys(mapped).map(key => {
  const o = {}; 
  o["orders"] = mapped[key];
  return o; 
});
console.log(expectedFormat)

My expected result is:

[
  {
    "orders": [
      {
        "_id": "6223186e2278d4e502f5264a",
        "title": "Product number 1",
        "price": 600,
        "vendor": {
          "email": "[email protected]"
        }
      }
    ],
    "paymentDetails": {
      createdId: 1647145079,
      amount: 700,
      email: "[email protected]",
    }
  },
  {
    "orders": [
      {
        "_id": "622d4e9f9bd88b1599026317",
        "title": "Product number 2",
        "price": 100,
        "vendor": {
          "email": "[email protected]"
        }
      },
      {
        "_id": "622d4e9f9bd88b1599026317",
        "title": "Product number 3",
        "price": 100,
        "vendor": {
          "email": "[email protected]"
        }
      }
    ],
    "paymentDetails": {
      createdId: 1647145079,
      amount: 700,
      email: "[email protected]",
    }
  }
]

If I scroll either to the left or to the right, it lags so much. I can’t also filter or click on the row. How do I fix this and what is happening here?

Codesandbox: https://codesandbox.io/s/controlledfilters-material-demo-sample-qy2qf7?file=/demo.js:2242-3000

{
      field: "cartItems",
      headerName: "Cart Items",
      type: "number",
      width: 400,
      align: "center",
      renderCell: ({ value }) => {
        const t = Object.entries(
          value.reduce((prev, item) => {
            if (!prev[item.id]) prev[item.id] = { ...item, nest: [] };
            prev[item.id].nest.push(item);
            return prev;
          }, {})
        ).map(([id, obj], idx) => (
          <List key={id + obj.color}>
            <ListItemText primary={obj.name + " " + obj.size} />
            <li>
              {obj.nest.map((nest, idx) => (
                <li key={idx}>
                  <ListItemText
                    secondary={nest.color + " (" + nest.quantity + " pcs)"}
                  />
                </li>
              ))}
            </li>
          </List>
        ));
        console.log(t);
        return t;
      }
    },

I’m assuming that DoS is a possible issue when matching, on the backend in Node.js, arbitrary strings with arbitrary regexes with one of JS’s regex functions. If the provided regex is simply invalid, the error thrown by the constructor can just be caught — but I’m thinking it’s possible that matching the string with the RegExp could become a significantly or even completely blocking operation, deliberately or accidentally by the creator of the regex and the string? If so, how exactly would this be caused, and how could it be mitigated?

i have a program that has a lot of inputs in a ol element and need to get user enter/return
(to trigger something in js). the inputs are auto generated using JavaScript and have a id with ‘”inp” + number’ so like “inp1″,”inp2″,”inp3” ect.

thanks in advance -myrccar

I am new to react. I have a route with react router that takes :id as parameter, how do I match this using react-router-dom useLocation.

basically path can be posts or post/21
how do I match post/21 to render a component, I want to render a seperate component if I
am on the detail page

{path === 'post/:id' ? <PostDetail /> : <Posts /> }

but use location returns posts/1 which I can’t use to match the post detail

summary
Any path that matches: post/:id

I am trying to limit a PHP loop based on a variable passed from JavaScript into the for loop as follows, however it doesn’t seem to be working.

</script>
var res =  5;
</script>

<?php
   $xx = "<script>document.writeln(res);</script>";
   echo $xx. " the number echo's fine";
?>

<br>

<?php  
for ($i= 1; $i <= $xx; $i++) {
  echo "The number is: $xx <br>";
}
?>  

Help with a solution would be greatly appreciated and thanks in advance!
I am new to PHP.

Aran

I wanted to know why my audio is not pausing, it plays the normal audio but when I click the pause button it does not pause

const [iconAudio, iconAudioState] = useState(true)
const audio = new Audio(urlmp3)

<div>
                    <div onClick={()=>
                        {
                            iconAudio == true ? audio.play() : audio.pause()
                            iconAudio == true ? iconAudioState(false) : iconAudioState(true) 
                        } 
                    }>
                        {
                            iconAudio == true ? 
                                    <PlayArroyOutlined />
                                : 
                                    <PauseOutlined />
                        }
                    </div>
                </div>

I am trying to follow a tutorial from someone who created a full website using Adonisjs, almost everything was exactly like showed in the tutorial, exept that the frontend was a little different, but the results were the same.
Now I am trying to get the posts showed in the browser, but when I try I get this error:
TypeError Cannot read properties of undefined (reading ‘related’)
I tried to see if I had mistaken something, but even using the same code used on the tutorial. The error is the same. Here is my code:

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import State from 'App/Enums/States'
import Post from 'App/Models/Post'
import PostStoreValidator from 'App/Validators/PostStoreValidator'

export default class PostsController {
  public async index({ view, auth, params }: HttpContextContract) {
    const page = params.page ?? 1
    const posts = auth.user!.related('posts').query().paginate(page, 20)
    return view.render('studio/posts/index', { posts })
  }

  public async create({ view }: HttpContextContract) {
    return view.render('studio/posts/create', {})
  }

  public async store({ request, response }: HttpContextContract) {
    const data = await request.validate(PostStoreValidator)

    await Post.create({ stateId: State.PUBLIC, ...data })

    return response.redirect().toRoute('studio.posts.index')
  }
}

But there are a lot more, so I am letting my gthub repositore here, so you can take a look at the entire code. The error shows some typeerror, but I have already tried to copy and paste the same code as gave on the tutorial, but nothing changes…

I hope someone can see what can be causing this error because obviously I can’t.

I’m working on a very simple game using vanilla JavaScript and the behavior I’m seeing right now goes against everything I’ve learned about with functions. I don’t understand why getInput can be called without the usual parenthesis that you’d use when calling functions. In fact, when I add parenthesis like this: document.addEventListener("keydown", getInput());, it doesn’t work at all.

So then, how am I able to receive and print the event key without it having been passed as a parameter?

document.addEventListener("keydown", getInput);

function getInput() {
    console.log(event.key);
}

I’m pretty stuck, It should evaluate to ["present", "pretty", "precede"]

function addTooStart(x, y) {
  let a = [];
  let b = "";
  for (let i in x) {
    a = x.push(y);
    a = x[b]
  }
  return a
}

let abc = addTooStart(["sent", "tty", "cede"], "pre");
console.log(abc)

Hi guys I’m having a bit of trouble using swiper js slides. This is the link of my website having swiper js slider:
https://nyside2.internet.dk/
As you can see in the start the swiper js slider is showing a few parts from the next slide. This is a very big concern for me. Because I want only one slider per view also when I click on the next or previous button I’m having half part of the previous slider and half part of the next slider at the same time. Again this isn’t what I want I want only one slide after clicking the next or previous button.
You can see the code below that I’m using:

<HTML>
<head>
<style>
HTML,body
{position: relative;
  height: 100%;
}
body{
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
#Slider .swiper-container {
  width: auto;
  height: 100%;
}
#Slider .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* reset list */
#Slider ul.swiper-wrapper{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#Slider h2{
  flex-basis: 100%;
}


#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 45%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .swiper-container:hover .swiper-button-prev{
    opacity: 1.0;
    animation-duration: 1s;
    animation-iteration-count: 1;
    margin-left: 30px;
    animation-name: PreviousSlider;
}

u/keyframes PreviousSlider{
    0%{
    opacity: 1;
    }
    100%{
    opacity: 1;
    transform: translate(30px, 0px);
    }
}


#Slider .swiper-container:hover .swiper-button-next{
    opacity: 1.0;
    animation-duration: 1s;
    animation-iteration-count: 1;
    margin-right: 30px;
    animation-name: NextSlider;
}


u/keyframes NextSlider{
  0%{
    opacity: 1;}
  100%{
    opacity: 1;
    transform: translate(-30px, 0px);}
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 50%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 58%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 68%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 77%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

#Slider .button--inline .b8{
    color: #EF8524;
}

#Slider .fa-long-arrow-alt-right:before{
    color: #EF8524;
    text-align: left;
    letter-spacing: 0px;
    font-weight: 400;
}

#Slider .video-overlay{
    margin-top: -759px;
    width: 100%;
    height: 750px;
    position: relative;
    display: flex;
    background: black;
    opacity: 0.5;
}

/* Extra small devices (phones, 600px and down) */
u/media only screen and (max-width: 600px) and (min-width: 360px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
display: none;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 22%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 25px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}    

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 33%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 25px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 53%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 320px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 25px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 18px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 84%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 18px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}
}


/***********


/* Small devices (portrait tablets and large phones, 600px and up) */
u/media only screen and (max-width: 768px) and (min-width: 600px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 35%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 40%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 50px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 53%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 50px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 68%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 85%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

#Slider .button--inline .b8{
    color: #EF8524;
}
}

/* For tablet devices 768px to 992px */
u/media only screen and (max-width: 992px) and (min-width: 768px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 38%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 45%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 58%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 72%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

 .button--inline{
    position: absolute;
    display: block;
    top: 85%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

.button--inline .b8{
    color: #EF8524;
}
}

/* Large devices (laptops/desktops, 992px and up) */
u/media only screen and (max-width: 1200px) and (min-width: 992px) {
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 45%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 50%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 58%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 68%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 77%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

#Slider .button--inline .b8{
    color: #EF8524;
} 



</style>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <ul class="swiper-wrapper">
    <!-- Slides -->
    <li class="swiper-slide">
    <div>
        <video 
source src="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" ></video>
    <div class="video-overlay"> </div>
    <h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Forretningsorienteret</span>
    <span>
        <strong class="heading-line heading-line--1">
            bureau
        </strong>
    </span>
    </h2>
        <div class="b2 b2--spread content_subtitle">
            <p>
                Stærkt team med fokus på strategi og kreativitet der engagere og aktiver mennesker på deres kunderejse
            </p>
        </div>
    <div class="button hero-content-cta z4 button--inline">
            <a href="https://nyside2.internet.dk/?page_id=37">
                <span class="b8 z2">
                Se hvordan vi gør 
                </span>
                <i class="fas fa-long-arrow-alt-right">
                </i>
            </a>
        </div>
    </div>
    </li>
    <li class="swiper-slide">
      <div>
        <video source src="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4"></video>
        <div class="video-overlay"></div>
        <h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Fra kr. 2.980,- / mdr.</span>
        <span>
            <strong class="heading-line heading-line--1">
                Den fulde løsning
            </strong>
        </span>
        </h2>
        <div class="b2 b2--spread content_subtitle">
            <p>
                Nyt kreativt webdesign, der løfter din virksomhed og øger effekten af din indsats
            </p>
        </div>
    <div class="button hero-content-cta z4 button--inline">
            <a href="https://nyside2.internet.dk/about/">
                <span class="b8 z2">
                Interesseret - så klik 
                </span>
                <i class="fas fa-long-arrow-alt-right">
                </i>
            </a>
    </div>

      </div>
    </li>
  </ul>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
  loop: true,
  slidesPerView: 1,
  centeredSlides: true,
  autoplay: {
    delay: 5000,
    autoplayDisableOnInteraction: false,  
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

 /* ON INIT AUTOPLAY THE FIRST VIDEO */
  on: {
    init: function () {
      console.log('swiper initialized');
      var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
      currentVideo.trigger('play');
    },
  },
});

/* GET ALL VIDEOS */
var sliderVideos = $(".swiper-slide video");

/* SWIPER API - Event will be fired after animation to other slide (next or previous) */
swiper.on('slideChange', function () {
  console.log('slide changed');
  /* stop all videos (currentTime buggy without this loop idea - no "real" previousIndex) */
  sliderVideos.each(function( index ) {
    this.currentTime = 0;
  });

  /* SWIPER GET CURRENT AND PREV SLIDE (AND VIDEO INSIDE) */
  var prevVideo =  $("[data-swiper-slide-index=" + this.previousIndex + "]").find("video");
  var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
  prevVideo.trigger('stop');
  currentVideo.trigger('play');
});
</script>
</body>
</html>