<section class="carrossel">
    <h2 class="carrossel__titulo">últimos lançamentos</h2>

    <!-- Slider main container -->
<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"> <img src="assets/ApacheKafka.svg" alt="Apache Kafta e Spring Boot"></div>
        <div class="swiper-slide"><img src="assets/Guia Front-end.svg" alt="Guia Front-End"></div>
        <div class="swiper-slide"><img src="assets/Javascript.svg" alt="Javascript Assertivo"></div>
        <div class="swiper-slide"><img src="assets/Portugol.svg" alt="Lógica de Programação com Portugol"></div>
        <div class="swiper-slide"><img src="assets/ReactNative.svg" alt="React Native"></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

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

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js">

const swiper = new Swiper('.swiper', {
  // Optional parameters
    direction: 'vertical',
    loop: true,

  // If we need pagination
pagination: {
    el: '.swiper-pagination',
},

  // Navigation arrows
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
},

  // And if we need scrollbar
scrollbar: {
    el: '.swiper-scrollbar',
},

});
</script>