Карусель li

@bb_oo · Регистрация: 22.11.2013

Author24 — интернет-сервис помощи студентам

Итак. Ниже представлены куски кода. Подскажите, как сделать так, чтобы при нажатии на ".next" карусель прокручивала содержимое, скажем на 7 элементов <li>? а на ".prev" наооборот. И еще сделать две проверки:

1. Если, при нажатии на <.next> нету больше дивов для прокрутки, то прокручивалась вначало;
2. Если начало, то при нажатии на <.prev> ничего не происходило, т.е. карусель не вращалась.

HTML5

<div class="popular-stores">
                    <h2>Популярные магазины</h2>
 
                    <ul>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_yellow">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_yellow">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                    </ul>
                    <div class="prev"></div>
                    <div class="next"></div>
                </div>

	24.11.2014, 22:05

Опции темы