55 lines
1.1 KiB
Plaintext
55 lines
1.1 KiB
Plaintext
<div class="carousel-wrapper">
|
|
<div class="carousel">
|
|
{% include 'featured_cards_course' %}
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
var slider = tns({
|
|
container: '.carousel',
|
|
items: 1,
|
|
slideBy: 'page',
|
|
navPosition: 'bottom',
|
|
controls: false,
|
|
autoplay: true,
|
|
speed: 700,
|
|
autoplayButtonOutput: false,
|
|
autoplayTimeout: 7000
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
var navContainer = document.querySelector('.tns-nav');
|
|
|
|
var navButtons = navContainer.querySelectorAll('button');
|
|
|
|
navButtons.forEach(function (button, index) {
|
|
button.addEventListener('click', function () {
|
|
slider.goTo(index + 1);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.carousel-wrapper {
|
|
background: #fff;
|
|
position: relative;
|
|
}
|
|
.tns-nav {
|
|
text-align: center;
|
|
}
|
|
.tns-nav-active {
|
|
background: #000 !important;
|
|
}
|
|
.tns-nav button {
|
|
background: white;
|
|
border: 1px solid #000;
|
|
border-radius: 50%;
|
|
height: 15px;
|
|
width: 15px;
|
|
margin: 0 6px;
|
|
}
|
|
</style> |