Glide css improvements

HTML & CSS
1

Hello i would like some advices in what i can improve in the css for the carrousel with the glide library . I will post both carrousel and css code

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container-fluid {
    padding: 0;
}

.navbar-bg {
    margin-bottom: 0;
}

.footer {
    margin-top: 0;
}

/* Define a altura do carrossel */
.carousel {
    height: calc(100vh - 120px); /* Altura padrão para a área do carrossel em desktops */
    margin-bottom: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .carousel {
        height: 50vh; /* Ajusta a altura do carrossel em dispositivos móveis */
    }
}

.glide {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
}

.glide__track {
    height: 100%;
}

.glide__slides {
    height: 100%;
}

.glide__slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.glide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Manter a proporção da imagem */
    filter: brightness(70%);
}

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 80%;
}

.carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
    font-size: 2em;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
        font-size: 3em;
    }
}

@media (min-width: 1200px) {
    .carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
        font-size: 4em;
    }
}

.glide__bullets {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 1;
}

.glide__bullet {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #333;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    cursor: pointer;
}

.glide__bullet--active {
    background: blue; /* Cor azul para o dot ativo */
}

.carousel-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.carousel-caption button {
    font-size: 0.8em;
    padding: 8px 16px;
}

@media (min-width: 768px) {
    .carousel-caption button {
        font-size: 1em;
        padding: 10px 20px;
    }
}

@media (min-width: 1200px) {
    .carousel-caption button {
        font-size: 1.2em;
        padding: 12px 24px;
    }
}

.glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    border: none;
    padding: 5px;
    cursor: pointer;
    z-index: 1;
    background: blue; /* Cor das setas de navegação */
}

.glide__arrow--left {
    left: 10px;
}

.glide__arrow--right {
    right: 10px;
}
    </style>
</head>

<body>
    <!-- Spinner Start -->
    <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center" role="alert">
        <div class="spinner-grow text-primary" role="status"></div>
    </div>
    <!-- Spinner End -->

    <!-- Navbar Start -->
    <div class="container-fluid navbar-bg">
        <div class="container">
            <nav class="navbar navbar-dark navbar-expand-lg py-lg-0" role="navigation">
                <a href="index.html" class="navbar-brand">
                    <img data-src="img/logotipofinalv2.webp" alt="Logotipo da Empresa" width="75" height="75" style="height: auto;" class="lozad navbar-logo" srcset="img/logotipofinalv2.webp 1x, img/logotipofinalv2@2x.webp 2x, img/logotipofinalv2@3x.webp 3x">
                </a>  
                <button class="navbar-toggler bg-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-label="Toggle navigation">
                    <span class="fa fa-bars text-dark"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <div class="navbar-nav mx-auto" role="menubar">
                        <a href="index.html" class="nav-item nav-link" role="menuitem">Home</a>
                        <a href="about.html" class="nav-item nav-link" role="menuitem">Acerca</a>
                        <a href="service.html" class="nav-item nav-link" role="menuitem">Serviços</a>
                        <a href="contact.html" class="nav-item nav-link" role="menuitem">Contatos</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- Navbar End -->

<!-- Carousel Start -->
<div class="container-fluid carousel px-0 mb-0">
    <div class="glide">
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
                <div class="glide__slide">
                    <img data-src="img/fotos33.webp" class="img-fluid w-100 lozad carousel-image" alt="First slide" width="719" height="512" />
                    <div class="carousel-caption">
                        <div class="container carousel-content">
                            <h1 class="text-white display-1 mb-4 animated slideInDown">Transformando ruas em passarelas</h1>
                            <a href="service.html" class="me-2">
                                <button type="button" class="px-5 py-3 btn btn-primary border-2 rounded-pill animated slideInDown">Saiba mais..</button>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="glide__slide">
                    <img data-src="img/foto21.webp" class="img-fluid w-100 lozad carousel-image" alt="Second slide" width="719" height="512" />
                    <div class="carousel-caption">
                        <div class="container carousel-content">
                            <h2 class="text-white mb-4 animated slideInDown">Calçada Artesanal</h2>
                            <h3 class="text-white display-1 mb-4 animated slideInDown">Porque até o chão merece um upgrade!</h3>
                            <a href="service.html" class="me-2">
                                <button type="button" class="px-5 py-3 btn btn-primary border-2 rounded-pill animated slideInDown">Saiba mais..</button>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="glide__slide">
                    <img data-src="img/fotos44.webp" class="img-fluid w-100 lozad carousel-image" alt="Third slide" width="719" height="512" />
                    <div class="carousel-caption">
                        <div class="container carousel-content">
                            <h2 class="text-white mb-4 animated slideInDown">Calçada Artesanal</h2>
                            <h3 class="text-white display-1 mb-4 animated slideInDown">Onde até os pombos tiram selfies!</h3>
                            <a href="service.html" class="me-2">
                                <button type="button" class="px-5 py-3 btn btn-primary border-2 rounded-pill animated slideInDown">Saiba mais..</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">&laquo;</button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">&raquo;</button>
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <button class="glide__bullet" data-glide-dir="=0"></button>
            <button class="glide__bullet" data-glide-dir="=1"></button>
            <button class="glide__bullet" data-glide-dir="=2"></button>
        </div>
    </div>
</div>
<!-- Carousel End -->
1 Like
2

Sorry I’ve been away for a few days but the question is a little ambiguous anyway which is probably why no one replied.

We’d need to know what problem you are trying to overcome. Most of these sliders have explicit code that you can’t really mess around with much as its all tied to the script.

If you can post a working demo of the slider then let us know what you want to change and then we could see if that is possible.

Generally sliders are built with all the options that the slider needs and so if for example you were trying to turn a fixed width slider into a responsive slider then that is unlikely to be easily possible.:slight_smile:

1 Like
3

Your carousel implementation with the Glide library looks well-structured! However, here are some improvements you can make to enhance performance, responsiveness, and aesthetics:

  1. Optimize Image Loading
  • Since you’re using lozad for lazy loading, ensure that images have explicit width and height attributes to prevent layout shifts.
  • Add loading="lazy" for additional browser-native lazy loading support.
  1. Improve Mobile Responsiveness
  • The .carousel height is set to 50vh on smaller screens, but this may still be too large. Consider 40vh or using min-height to improve usability.
  • Text elements in .carousel-caption might be too large on mobile; reduce font-size in smaller breakpoints.
  1. Enhance Navigation Buttons
  • Increase padding for .glide__arrow on mobile to improve clickability.
  • Consider adding hover effects or animations to improve user experience.
  1. Reduce Brightness Filter for Better Visibility
  • The filter: brightness(70%) on .glide__slide img darkens the images significantly. Try 80% or adjust dynamically based on slide content.
  1. Improve Accessibility
  • Add aria-label attributes to .glide__arrow and .glide__bullet buttons for screen readers.
  • Ensure the carousel-caption text has sufficient contrast against the background.
1 Like
4

Thank you, that seems to do the work. I wonder how I can improve the height to be something automatic instead of having different settings for each device size like:size like - > @media (min-width: 768px) {

.carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
    font-size: 3em;
}

}

@media (min-width: 1200px) {
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
font-size: 4em;
}
}

@media (max-width: 767px) {
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3 {
font-size: 1.5em; /* Reduzido para melhorar a responsividade em telas menores */
}
} And to simplify this carousel item’s height to make the code simple but working on every device like I had before with the Bootstrap theme, which PaulOB recommended to do the auto height, which did the work.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.