Slick-Schieberegler deaktivieren, wenn der Darstellungsbereich kleiner als 481 Pixel ist

Lesezeit: 2 Minuten

Ich habe eine While-Schleife, die Beiträge mit dem anzeigt glatter Schieber Format für mehrere Elemente.

Dies wird angezeigt und funktioniert ohne Probleme.

Ich möchte in der Lage sein, die Slick-Slider-Funktionalität zu „deaktivieren“, wenn der Darstellungsbereich weniger als 481 Pixel beträgt, und nur die Beiträge auflisten.

Ich habe eine bedingte Javascript-Funktion (unten), um auf Viewports mit weniger als 481 Pixel abzuzielen

jQuery(window).on('resize',function()
   {
         var viewportWidth = jQuery(window).width();

         if (viewportWidth < 481)
         {  
         }
         else
         {

         }
   });

Ich habe etwas jquery hinzugefügt, um die Klassen multiple-items, slick-slider und slick-initialized zu entfernen. Die Folien verschwinden. Ich möchte weiterhin alle Beiträge anzeigen.

Kann mir bitte jemand in die richtige Richtung weisen, wie ich die Slick-Slider-Funktionalität deaktivieren kann, wenn ich die Site auf Viewports mit weniger als 481 Pixeln ansehe?

Vollständiger Code:

<div id="box" class="multiple-items">
    <?php
    while($search_results_featured_users->have_posts()) : ?>
        <div>
            <a href="https://stackoverflow.com/questions/48579437/<?php the_permalink();?>">
                <h3><?php the_title(); ?></h3>
                <?php the_excerpt(); ?>
            </a>
        </div>
    <?php
    endwhile;
    wp_reset_postdata(); ?>
</div>

<script>
    jQuery(document).ready(function(){

        // on screen resize
        jQuery(window).on('resize',function()
        {
            var viewportWidth = jQuery(window).width();

            if (viewportWidth < 481)
            {
                jQuery("#box").removeClass("multiple-items slick-initialized slick-slider");
            }
            else
            {

            }
        });

        jQuery('.multiple-items').slick({
                infinite: true,
                slidesToShow:6,
                slidesToScroll: 2,
                autoplay: true,
                autoplaySpeed: 5000,
                pauseOnHover: false,
                dots: false,
                arrows: true,
                speed: 500,
                cssEase: 'linear',
            });

    });
</script>

Jede Hilfe sehr geschätzt.

Benutzer-Avatar
Kiran Shahi

Sie können Slick Slider mit zerstören unslick Methode

$(element).slick('unslick');

zum Beispiel

jQuery(window).on('resize', function() {
    var viewportWidth = jQuery(window).width();

    if (viewportWidth < 481) {
        $('.multiple-items').slick('unslick');
    } else {
        // Do some thing
    }
});

  • Für mich mit der Version 1.3.15 funktionierte es nur mit der Funktion $(element).unslick();

    – Estácio Di Fabio

    25. Juni 2020 um 13:37 Uhr

Benutzer-Avatar
Biker-Mann

responsive: [
    {
        breakpoint: 4000,
        settings: "unslick",
    },
]

  • Ihre Antwort könnte verbessert werden, indem Sie weitere Informationen darüber hinzufügen, was der Code tut und wie er dem OP hilft.

    – Tyler2P

    22. April um 18:30 Uhr

1171440cookie-checkSlick-Schieberegler deaktivieren, wenn der Darstellungsbereich kleiner als 481 Pixel ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy