слайдер карусель

Тема в разделе "Верстка", создана пользователем мир, 19 июн 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    Подскажите пожалуйста!
    Как на странице разместить 2 таких слайдера?
     

    Вложения:

  2. ArtyGrand

    ArtyGrand Постоялец

    Регистр.:
    6 июн 2009
    Сообщения:
    81
    Симпатии:
    37
    Похоже, что этот слайдер не приспособлен для такого. Попробуй другие, anythigslider или jcarousellite, например.
     
  3. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    что за бред?

    ТС, используйте разные id для слайдера, к примеру

    для первого слайдера

    Код:
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider1').tinycarousel(); 
            });
        </script> 
     
        <div id="slider1">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    <li><img src="images/picture6.jpg" /></li>
                    <li><img src="images/picture5.jpg" /></li>
                    <li><img src="images/picture4.jpg" /></li>                                 
                    <li><img src="images/picture3.jpg" /></li>
                    <li><img src="images/picture2.jpg" /></li>
                    <li><img src="images/picture1.jpg" /></li>
                </ul>
            </div>
            <a class="buttons next" href="#">right</a>
        </div>
    для второго слайдера

    Код:
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider2').tinycarousel(); 
            });
        </script> 
     
        <div id="slider2">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    <li><img src="images/picture6.jpg" /></li>
                    <li><img src="images/picture5.jpg" /></li>
                    <li><img src="images/picture4.jpg" /></li>                                 
                    <li><img src="images/picture3.jpg" /></li>
                    <li><img src="images/picture2.jpg" /></li>
                    <li><img src="images/picture1.jpg" /></li>
                </ul>
            </div>
            <a class="buttons next" href="#">right</a>
        </div>
    и собственно прописать стили для второго слайдера, к примеру

    Код:
    #slider2 { height: 1%; overflow:hidden; padding: 0 0 10px;  }
    #slider2 .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
    #slider2 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
    #slider2 .next { background-position: 0 0; margin: 30px 0 0 10px;  }
    #slider2 .disable { visibility: hidden; }
    #slider2 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
    #slider2 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
    
     
  4. ArtyGrand

    ArtyGrand Постоялец

    Регистр.:
    6 июн 2009
    Сообщения:
    81
    Симпатии:
    37
    Я попробовал тоже $('#slider2').tinycarousel(); использовать, но он не заработал. Неужели стили решили проблему?


    А еще я пробовал через класс активировать, как другие слайдеры делаю, тоже не помогло.
     
  5. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    рабочий пример с 2-мя каруселями
     

    Вложения:

    • example.rar
      Размер файла:
      141,8 КБ
      Просмотров:
      8
    мир нравится это.
  6. DragonWerewolf

    DragonWerewolf Писатель

    Регистр.:
    30 окт 2013
    Сообщения:
    3
    Симпатии:
    0
    Блин, ну вы что? Тайни карусель нормально хавает и классы!

    <div id="slider1" class="slider">

    </div>

    <div id="slider2" class="slider">

    </div>

    $('.slider').tinycarousel();
    и все! а иды будут использоваться ,если нужны разные настройки стилей

    А не работал он у вас , потому как вы
    .viewport и .overview настроили не верно! надо четко указывать у них !ШИРИНУ! и !ВЫСОТУ! overflow:hidden, далее у LI тоже указываем нужную ширину и float:left и если все li не влазят, то крутилка нормально будет работать!

    А у вас наверняка еще и button все имеют класс disable =))) а это явный признак косяка c настройками css
     
    Последнее редактирование: 15 фев 2014
  7. Tanaert

    Tanaert Писатель

    Регистр.:
    7 ноя 2013
    Сообщения:
    2
    Симпатии:
    0
    Спасибо
     
  8. Torm

    Torm Постоялец

    Регистр.:
    3 окт 2011
    Сообщения:
    66
    Симпатии:
    17
    Еще есть интересные скрипты карусели Фоторама и caroufredsel
     
  9. denkog

    denkog Писатель

    Регистр.:
    12 мар 2013
    Сообщения:
    8
    Симпатии:
    0
    На лови))) - Вот вариант аж из 3-х

    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Исправленная карусель</title>
    
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
        <script type="text/javascript">
           
            $(document).ready(function(){
                $('#slider1').tinycarousel();   
                $('#slider2').tinycarousel();
                $('#slider3').tinycarousel();
            });
           
        </script>   
        <style>
        .slider { height: 1%; overflow:hidden; padding: 0 0 10px;   }
        .slider .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
        .slider .buttons { background:url("images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
        .slider .next { background-position: 0 0; margin: 30px 0 0 10px;  }
        .slider .disable { visibility: hidden; }
        .slider .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
        .slider .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
        </style>
       
       
           
    </head>
    <body>
    
        <div id="slider1" class="slider" style="float:left">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    <li><img src="images/picture6.jpg" /></li>
                    <li><img src="images/picture5.jpg" /></li>
                    <li><img src="images/picture4.jpg" /></li>                                   
                    <li><img src="images/picture3.jpg" /></li>
                    <li><img src="images/picture2.jpg" /></li>
                    <li><img src="images/picture1.jpg" /></li>
                </ul>
            </div>
            <a class="buttons next" href="#">right</a>
        </div>
       
        <div id="slider2" class="slider" style="float:left">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    <li><img src="images/picture6.jpg" /></li>
                    <li><img src="images/picture5.jpg" /></li>
                    <li><img src="images/picture4.jpg" /></li>                                   
                    <li><img src="images/picture3.jpg" /></li>
                    <li><img src="images/picture2.jpg" /></li>
                    <li><img src="images/picture1.jpg" /></li>
                </ul>
            </div>
            <a class="buttons next" href="#">right</a>
        </div>
       
        <div id="slider3" class="slider">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    <li><img src="images/picture6.jpg" /></li>
                    <li><img src="images/picture5.jpg" /></li>
                    <li><img src="images/picture4.jpg" /></li>                                   
                    <li><img src="images/picture3.jpg" /></li>
                    <li><img src="images/picture2.jpg" /></li>
                    <li><img src="images/picture1.jpg" /></li>
                </ul>
            </div>
            <a class="buttons next" href="#">right</a>
        </div>
       
    </body>
    </html>