Jquery Cycle - отображение более одного деления - PullRequest
Новая
       8

Jquery Cycle - отображение более одного деления

0 голосов
/ 15 сентября 2011

Просто работаю с плагином Jquery Cycle, и у меня есть поле, которое позволяет пользователям прокручивать список категорий в полях. Но я не могу найти способ, позволяющий Jquery Cycle отображать более одного из блоков одновременно, позволяя пользователям прокручивать вверх или вниз, чтобы показать больше блоков.

Вот HTML: 

<div id="themeSearch">
    <h1 class="mainSectionHeader">By Theme</h1>
    <div class="scrollUp eventSearchScroll"><a href="#" id="prev6"><img src="<?php bloginfo('template_directory'); ?>/images/scrollUp.png" alt="Scroll Up" /></a></div>
    <div id="themeSelector">
        <div class="themeItem"><p><span>On foot<span></p><a href="#"><span>Go</span></a></div>
        <div class="themeItem"><p><span>Vintage Coach<span></p><a href="#"><span>Go</span></a></div>
        <div class="themeItem"><p><span>Helicopter<span></p><a href="#"><span>Go</span></a></div>
        <div class="themeItem"><p><span>Boat<span></p><a href="#"><span>Go</span></a></div>
    </div>
    <div class="scrollDown eventSearchScroll"><a href="#" id="next6"><img src="<?php bloginfo('template_directory'); ?>/images/scrollDown.png" alt="Scroll Down" /></a></div>
</div>

... css: 

    #themeSearch {
    background: url(../images/bgRed.png) top left repeat;
    width: 275px;
    height:346px;
    padding: 15px;
    float: left;
    margin: 0 20px;
}
#themeSelector {
    height:216px;
}
.themeItem {
    width: 100%;
    height: 35px;
    border: 1px solid #6e060a;
    clear: both;
    margin: 19.5px 0;
}

... и JS: 

    jQuery(document).ready(function() {
    jQuery('#themeSelector').cycle({ 
    fx:     'scrollUp', 
    timeout: 6000, 
    delay:  -2000 ,
    next:   '#next6', 
    prev:   '#prev6'
});
});

В данном конкретном случае я хочу показать около 4 'themeItems' одновременно, позволяя пользователям прокручивать вверх и вниз, чтобы показать больше.

Спасибо

Ответы [ 4 ]

1 голос
/ 15 сентября 2011

Похоже, вам нужно использовать что-то вроде jCarousel

http://sorgalla.com/projects/jcarousel/

1 голос
/ 17 ноября 2011

Вы можете попробовать:

http://www.gmarwaha.com/jquery/jcarousellite/

, где вы можете указать видимость:

visible: 2

Показать 2 изображения

1 голос
/ 15 сентября 2011

В цикле jQuery можно показывать только один «слайд» за раз, однако вы можете смоделировать то, что вы пытаетесь сделать, поместив более одного элемента контента (например, три или четыре изображения) в один слайд. Таким образом, у вас будет 3 или 4 изображения, показываемых одновременно, а когда контейнер зациклится, вы получите следующий слайд из 3-4 изображений.

0 голосов
/ 30 июля 2013

это можно сделать.http://jquery.malsup.com/cycle/div.html

Цикл сценария начинается с элементов навигации, таких как:

<div style="margin:auto;text-align:center"><div id="nav"></div></div>

, и продолжается слайдом div: 

`<div class="slideshow">
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="images/beach4.jpg" width="200" height="200" />
        <img src="images/beach5.jpg" width="200" height="200" />
        <img src="images/beach6.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach7.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach8.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach9.jpg" width="200" height="200" />
    </div>
</div>`

the class = 'slide' divs slpit прокручиваемый контент ...

единственное, чего не хватает, так это соответствующего css для определения скользящей области и навигационных ссылок 

`#nav { margin: 20px auto }
#nav a { padding: 4px 6px; margin: 3px; border: 1px solid #ccc; text-align: center; text-decoration: none; background-color: #ddd }
#nav a.activeSlide { color: #c00 }
#nav a:focus { outline: none; }

.slideshow { margin: 20px auto; padding: 0; clear: left; }
.slide { margin: 0; padding: 0 }
.slideshow, .slide { height: 232px; width: 710px; }`

это работаетдля меня как шарм.

...