Farklı ekran boyutları için carouselVisible
öğesinin numarasını değiştirmenin bir yolunu bulmaya çalışıyorum. Ben 3 öğeyi göstermek için ve 1 öğeye sahip olmak için 360 derece ölçeklendirdiğinizde 768px'lik bir ekran çözünürlüğünde istiyorum.Farklı ekran boyutları için görüntülenen öğe sayısı nasıl değiştirilir
Bu mümkün mü?
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>
Yapabileceğiniz ki eğer ':) farklı pencere boyutu için farklı bir kod yazarak ($ (pencere) .width()> 739) { // burada büyük ekranlar için javascript ekle } else ' – RRR
** çok teşekkürler { // burada küçük ekranlar için javascript ekleyin}, bana gösterebilir misin Bir demo lütfen ** –
nazikçe kontrol edin http://jsfiddle.net/r29A9/16/ – RRR