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

М

мир

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

Вложения

  • example-carousel.zip
    143,6 KB · Просмотры: 12
Похоже, что этот слайдер не приспособлен для такого. Попробуй другие, anythigslider или jcarousellite, например.
 
ArtyGrand написал(а):
Похоже, что этот слайдер не приспособлен для такого. Попробуй другие, anythigslider или jcarousellite, например.
Нажмите для раскрытия...
что за бред?

ТС, используйте разные 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;}
 
kadurinho написал(а):
что за бред?
Нажмите для раскрытия...
Я попробовал тоже $('#slider2').tinycarousel(); использовать, но он не заработал. Неужели стили решили проблему?


А еще я пробовал через класс активировать, как другие слайдеры делаю, тоже не помогло.
 
ArtyGrand написал(а):
Я попробовал тоже $('#slider2').tinycarousel(); использовать, но он не заработал. Неужели стили решили проблему?


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

Вложения

  • example.rar
    141,8 KB · Просмотры: 8
Блин, ну вы что? Тайни карусель нормально хавает и классы!

<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
 
Последнее редактирование:
Еще есть интересные скрипты карусели Фоторама и caroufredsel
 
На лови))) - Вот вариант аж из 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>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху