Canvas Support

swiper slider is not responsive

1 reply · opened Dec 26, 2024

Iilhanata1Dec 26, 2024

I wanted to use slider but is not responsive well. could you help me!

<section id="slider" class="slider-element swiper_wrapper" data-autoplay="6000"
data-speed="800" data-loop="true" data-grab="true" data-effect="fade" data-arrow="true">
<div class="swiper swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark">
<div class="swiper-slide-bg"
style="background-image: url('assets/img/polen-davetiye-slide1.png');">
</div>
</div>

                &lt;div class="swiper-slide dark"&gt;
                    &lt;div class="swiper-slide-bg"
                        style="background-image: url('assets/img/polen-davetiye-slide2.png');"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="swiper-slide dark"&gt;
                    &lt;div class="swiper-slide-bg"
                        style="background-image: url('assets/img/polen-davetiye-slide3.png');"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="swiper-slide dark"&gt;
                    &lt;div class="swiper-slide-bg"
                        style="background-image: url('assets/img/polen-davetiye-slide4.png');"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
SSemicolon WebSTAFFMar 6, 2025

Hello,

Swiper Sliders requires for the Heights for responsive devices to be set manually. You can consider using the Height Utility Classes: https://docs.semicolonweb.com/docs/utility-classes/heights/ or you can also setup Absolute Heights for different devices: https://docs.semicolonweb.com/docs/utility-classes/responsive-utilities/#docs-section-responsive-absolute-heights . You will need to apply these codes on the .slider-element Tag.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard