Как сделать, чтобы слайдер jQuery прокручивал только один элемент вместо трех? - PullRequest
Новая
       18

Как сделать, чтобы слайдер jQuery прокручивал только один элемент вместо трех?

1 голос
/ 20 мая 2011

На моем сайте есть слайдер jQuery.Я использовал учебник в процессе, но этот слайдер настроен для прокрутки трех элементов, но я бы хотел, чтобы он просто прокручивал по одному на клике.Кроме этого, он прекрасно работает.

Я вижу, что это потому, что div ".pane" оборачивает два набора из трех элементов (это два разных неупорядоченных списка).Однако, когда я изменяю «.pane», чтобы обернуть каждый отдельный элемент (li), он не работает.

Есть мысли о простейшем способе решения этой проблемы? 

<div class="thumbnail_wrapper">
    <div class="left-tab">
        <img class="left" src="images/left-arrow.png" alt="Previous" />
    </div>
    <div class="holder">
        <div class="home_slider">
            <div class="pane"><ul>
                    <li class="post first showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>

            </ul></div><div class="pane"><ul>
                    <li class="post first showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                    <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>


                    <li class="post showDetails">
                    <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>
            </ul></div>             

            <div class="clear"></div>
        </div>
    </div>  
    <div class="right-tab">
        <img class="right" src="images/right-arrow.png" alt="Next" />
    </div>
</div>

1 Ответ

1 голос
/ 20 мая 2011

Измените свойство items в переменной scrollOptions на сами элементы, например, на $('.thumbnail_wrapper .pane2') как в вашем демо: 

var scrollOptions = {
    /* skip */
//  items: $panes,
    items: $('.thumbnail_wrapper .pane2'),
    /* skip */
};
...