[Помощь] Помогите следелать слайдер

Тема в разделе "JavaScript", создана пользователем KPACHODAP, 9 дек 2014.

Модераторы: ZiX
  1. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    640
    Симпатии:
    111
    Добрый день друзья помогите реализовать данный сладер в том же виде, не прошу наводить красоту самое главное функционал html + css+js



    Так как подобных слайдеров не встречал чтобы были и цыфры перещелкивания сразу группы элементов и вперед назад, Слайдер группой элементов.

    дайте наводку где искать или может уже где нить реализовано есть подобное! за ранее всем благодарен!


    jcarusel невышло сделать в 2 ряда!(((
     
    Последнее редактирование: 10 дек 2014
  2. ZOLK

    ZOLK

    Регистр.:
    13 сен 2011
    Сообщения:
    189
    Симпатии:
    107
    Наводка:
     
  3. KPACHODAP

    KPACHODAP DELETED

    Регистр.:
    21 дек 2009
    Сообщения:
    640
    Симпатии:
    111

    у кодеконей не позволяет выводить страницы разбития как у меня на скрине а так подходит!
    2-й вариант ваще не фига не открылся демо!


    есть предложения еще?
     
  4. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Вот очень крутой слайдер, функционала выше крыши:
    https://github.com/jssor/slider
    В комплекте есть демки и создатель эффектов (правда сырой пока).
    Демки на сайте разработчика — http://www.jssor.com/demos/index.html
    Сам всё хочу прикрутить его к своему движку, но пока не придумал как формировать эффекты в админке — у него реально много настроек и возможностей — от кучи эффектов с картинками и текстами до «слайдер в слайдере».
    Конкретно под Ваш запрос я нашёл вот эту демку: http://www.jssor.com/demos/tiled-menu-slider.html
    Но демок так много, что, возможно, найдёте и ещё.

    Особенно приятно, что:
    1. Разработчик его регулярно пилит.
    2. Он бесплатный, лежит на Гитхабе и можно вносить свои предложения — автор откликается.
    3. Если освоить настройки, то об других слайдерах можно и забыть — в этом практически всё есть, можно пользоваться только им.
     
    Последнее редактирование: 10 дек 2014
    quzexk и pozhisni нравится это.
  5. ZOLK

    ZOLK

    Регистр.:
    13 сен 2011
    Сообщения:
    189
    Симпатии:
    107
    Вот точно то что нужно и бесплатно: http://www.jssor.com/demos/tiled-menu-slider.html
    Чтоб цифры было видно в пагинаторе, думаю в css подправить пару строк и все

    Вот еще: http://www.webstuffshare.com/2012/07/portfolio-flipping-slider-using-jquery-css3/
     
  6. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    364
    Симпатии:
    182
    я делал что-то подобное с такой группировкой на скорую руку. Вот код, всё предельно ясно:

    Код:
        
        <script type="text/javascript"><!-- 
    function shopt(idgal) {
    if(idgal==1) {
    $("#num2").hide("slow");
    $("#num3").hide("slow");
    }
    if(idgal==2) {
    $("#num1").hide("slow");
    $("#num3").hide("slow");
    }
    if(idgal==3) {
    $("#num1").hide("slow");
    $("#num2").hide("slow");
    }
    $("#num"+idgal).show("slow");
    }
    $(document).ready(function() {
    shopt(1);
    $("a#optimage").fancybox({
            'transitionIn'    :    'elastic',
            'transitionOut'    :    'elastic',
            'speedIn'        :    600, 
            'speedOut'        :    500, 
            'overlayShow'    :    false
        });
       
    });
    //--></script>
    <div class="optgal">
    <span onclick="shopt(1);">1 </span> | <span onclick="shopt(2);">2 </span> | <span onclick="shopt(3);">3 </span>
    <div id="num1">
    <a href="/image/data/1.jpg" id="optimage" rel="rr"><img src="/image/data/min/1.jpg" /></a>
    <a href="/image/data/2.jpg" id="optimage" rel="rr"><img src="/image/data/min/2.jpg" /></a>
    <a href="/image/data/3.jpg" id="optimage" rel="rr"><img src="/image/data/min/3.jpg" /></a>
    <a href="/image/data/4.jpg" id="optimage" rel="rr"><img src="/image/data/min/4.jpg" /></a>
    <a href="/image/data/5.jpg" id="optimage" rel="rr"><img src="/image/data/min/5.jpg" /></a>
    </div>
    <div id="num2">
    <a href="/image/data/13.jpg" id="optimage" rel="rr"><img src="/image/data/min/13.jpg" /></a>
    <a href="/image/data/14.jpg" id="optimage" rel="rr"><img src="/image/data/min/14.jpg" /></a>
    <a href="/image/data/15.jpg" id="optimage" rel="rr"><img src="/image/data/min/15.jpg" /></a>
    <a href="/image/data/16.jpg" id="optimage" rel="rr"><img src="/image/data/min/16.jpg" /></a>
    <a href="/image/data/17.jpg" id="optimage" rel="rr"><img src="/image/data/min/17.jpg" /></a>
    </div>
    <div id="num3">
    <a href="/image/data/25.jpg" id="optimage" rel="rr"><img src="/image/data/min/25.jpg" /></a>
    <a href="/image/data/26.jpg" id="optimage" rel="rr"><img src="/image/data/min/26.jpg" /></a>
    </div>
    <span onclick="shopt(1);">1 </span> | <span onclick="shopt(2);">2 </span> | <span onclick="shopt(3);">3 </span>
    </div>  
      
     
    Последнее редактирование: 10 дек 2014