So ändern Sie die Anzahl der angezeigten Elemente für verschiedene Bildschirmgrößen

Question

Ich versuche, die Anzahl der carouselVisible Elemente für verschiedene Bildschirmgrößen zu ändern. Ich möchte in einer Bildschirmauflösung von 768px 3 Elemente anzeigen und wenn Sie in 360 herunterskalieren, um 1 Element zu haben.

Ist das möglich?

Demo

jquery

$('#carousel').cycle({ 
allowWrap: true, 
carouselVisible: 5, 
prev: '#prev', 
next: '#next', 
carouselFluid: true, 
timeout: 0, 
slides: 'article', 
fx: 'carousel' 
}); 

var slideshows1 = $('#carousel').on('cycle-next cycle-prev', function (e, opts) { 
slideshows1.not(this).cycle('goto', opts.currSlide); 
}); 
var slideshows2 = $('#carousel1').on('cycle-next cycle-prev', function (e, opts) { 
slideshows2.not(this).cycle('goto', opts.currSlide); 
}); 
$('#carousel article').click(function() { 
var count = $("#carousel1 .readmore").length - 1; 
var selectedIndex = $('#carousel').data('cycle.API').getSlideIndex(this); 
var index = selectedIndex<count ? selectedIndex: (selectedIndex-count)%count; 
slideshows1.cycle('goto', index); 
slideshows2.cycle('goto', index); 
}); 

Html

 <div class="service"> 
     <h1>Lead1</h1> 
    </div> 
</article> 
<article> 
    <div class="service"> 
     <h1>Lead2</h1> 
    </div> 
</article> 
</div> 
<div id="carousel1" data-allow-wrap="true" data-cycle-prev="#prev" data-cycle-next="#next" class="cycle-slideshow" data-cycle-timeout="0" data-cycle-manual-fx="scrollHorz" data-cycle-slides=".readmore"> 
<div class="readmore"> 
    <h2 class="lead">Lead</h2> 

    <p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a> 

</div> 
<div class="readmore"> 
    <h2 class="lead">Lead1</h2> 

    <p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a> 

</div> 
<div class="readmore"> 
    <h2 class="lead">Lead2</h2> 

    <p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a> 

</div> 
</div> 
<div id="next">next</div> 
<div id="prev">prev</div> 

Answer 1

Hängt, wenn Sie dynamisch anpassen müssen, wenn der Benutzer eine Seite passt die Größe, würden Sie etwas tun, wie dies:

var properties = { 
    allowWrap: true, 
    carouselVisible: 5, 
    prev: '#prev', 
    next: '#next', 
    carouselFluid: true, 
    timeout: 0, 
    slides: 'article', 
    fx: 'carousel' 
} 

$(window).resize(function() { 
    var width = $(window).width(); 
    var height = $(window).height(); 
    var slideAmount; 

    if (width >= 768) { 
     slideAmount = 3; 
    } else if (width <= 360) { 
     slideAmount = 1; 
    } else { 
     slideAmount = 2; 
    } 

    if (properties.carouselVisible != slideAmount) { 
     $('#carousel').cycle('reinit'); 
    } 
}); 

Wenn Sie es nur einmal tun wollen, dann, natürlich, würden Sie nur anfängliche Bildschirmgröße erhalten:

var width = $(window).width(); 
var height = $(window).height(); 

// Instantiate your carousel with parameters based on screen size