S
I've been watching your code and the bookstore you use.
What happened to you next is a functional model of two carousels working on the same page.
However, I clarify that you do not respect the classes you indicated, because the codes of them have not included them.So I replaced them by standard codes.
the HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel / Slider con Glider.js</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<div class="glider-contain" style="width: 100%;">
<div id="glider1">
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
</div>
<button aria-label="Previous" class="glider-prev" id="glider-prev1"><i class="fas fa-chevron-left fa-lg "></i></button>
<button aria-label="Next" class="glider-next" id="glider-next1"><i class="fas fa-chevron-right fa-lg"></i></button>
<div role="tablist" id="dots1"></div>
</div>
</div>
<div class="container">
<div class="glider-contain" style="width: 100%;">
<div id="glider2">
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
</div>
<button aria-label="Previous" class="glider-prev" id="glider-prev2"><i class="fas fa-chevron-left fa-lg "></i></button>
<button aria-label="Next" class="glider-next" id="glider-next2"><i class="fas fa-chevron-right fa-lg"></i></button>
<div role="tablist" id="dots2"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
<script defer src="https://pro.fontawesome.com/releases/v5.10.0/js/all.js" integrity="sha384-G/ZR3ntz68JZrH4pfPJyRbjW+c0+ojii5f+GYiYwldYU69A+Ejat6yIfLSxljXxD" crossorigin="anonymous"></script>
</body>
</html>
the SCRIPT<script>
window.addEventListener('load', function(){
new Glider(document.getElementById('glider1'), {
slidesToShow: 1,
dots: '#dots1',
draggable: true,
arrows: {
prev: '#glider-prev1',
next: '#glider-next1'
},
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
});
});
window.addEventListener('load', function(){
new Glider(document.getElementById('glider2'), {
slidesToShow: 1,
dots: '#dots2',
draggable: true,
arrows: {
prev: '#glider-prev2',
next: '#glider-next2'
},
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
});
});
</script>
window.addEventListener('load', function(){
new Glider(document.getElementById('glider1'), {
slidesToShow: 1,
dots: '#dots1',
draggable: true,
arrows: {
prev: '#glider-prev1',
next: '#glider-next1'
},
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
});
});
window.addEventListener('load', function(){
new Glider(document.getElementById('glider2'), {
slidesToShow: 1,
dots: '#dots2',
draggable: true,
arrows: {
prev: '#glider-prev2',
next: '#glider-next2'
},
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
});
});</code></pre><pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel / Slider con Glider.js</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<div class="glider-contain" style="width: 100%;">
<div id="glider1">
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
</div>
<button aria-label="Previous" class="glider-prev" id="glider-prev1"><i class="fas fa-chevron-left fa-lg "></i></button>
<button aria-label="Next" class="glider-next" id="glider-next1"><i class="fas fa-chevron-right fa-lg"></i></button>
<div role="tablist" id="dots1"></div>
</div>
</div>
<div class="container">
<div class="glider-contain" style="width: 100%;">
<div id="glider2">
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
<div><img src="https://dummyimage.com/900x200/000/fff" alt="Rock And Roll"></div>
</div>
<button aria-label="Previous" class="glider-prev" id="glider-prev2"><i class="fas fa-chevron-left fa-lg "></i></button>
<button aria-label="Next" class="glider-next" id="glider-next2"><i class="fas fa-chevron-right fa-lg"></i></button>
<div role="tablist" id="dots2"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
<script defer src="https://pro.fontawesome.com/releases/v5.10.0/js/all.js" integrity="sha384-G/ZR3ntz68JZrH4pfPJyRbjW+c0+ojii5f+GYiYwldYU69A+Ejat6yIfLSxljXxD" crossorigin="anonymous"></script>
</body>
</html>Explanation of operation.For two carousel to work simultaneously, each one, including their dots, buttons and even the same carousel must have an associated id that has to be different.
In my case use 1 and 2. If you look, add a glider1, dots1, glider-prev1 and glider-next1 and their corresponding 2.
You must call that library twice or create two instances (one for each carousel)
Another important thing is not to modify the class, but the ID. The class is linked to the operation of the library, while the ID is related to the instance.
Finally I see that the script you used to initialize is something complex, it does calculations and so on. I don't know if this or you added you or came in the code. I suggest you check on the official page https://nickpiscitelli.github.io/Glider.js/ where you will have several interesting examples.Final suggestionI understand you're using bootstrap. If so, you can consider the use that comes with the framework that is very useful. Maybe not as noticeable as this one you propose, but very efficient. ( https://getbootstrap.com/docs/4.4/components/carousel/ )I want this information to be of use.
