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.