Форум

TeMb14 · #1 (**permalink**) 19.06.2015, 18:20

Доброго всем времени суток, господа, у меня такой вопрос, как изменить интервал пролистывания картинок в карусели ? (точнее время от смены одной картинки к другой) Вот собственно часть кода:

t.jCarousel.plugin("jcarouselAutoscroll",{_options:{target:"+=1",interval:3e3,autostart:!0},_timer:null,_init:function(){this.onDestroy=t.proxy(function(){this._destroy()

Я Так понимаю, интервал между сменой картинок, должен регулироваться параметром interval, но какое то у него странное значение "3e3", изменение данного значения в миллисекунды не дает ни какого результата, подскажите пожалуйста, что мне делать. И время смены картинок в карусели приблизительно 3 секунды, хотелось бы изменить этот параметр на 6 секунд.

dd_smol · #2 (**permalink**) 19.06.2015, 21:00

jCarousel Docs

TeMb14 · #3 (**permalink**) 20.06.2015, 06:39

Документацию я читал, я не пойму почему значение ни чего не меняет.

dd_smol · #4 (**permalink**) 20.06.2015, 08:32

Читайте более внимательно не нужно править код плагина … на это есть специальные настройки о которых позаботился автор плагина.

рони · #5 (**permalink**) 20.06.2015, 17:57

TeMb14, строка 32 для установки паузы и конечно загрузить сами плагины карусели и автоскрола.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jCarousel Examples</title>
        <style type="text/css">body{background:#000052}
         .jcarousel-wrapper{margin:20px auto;position:relative;border:10px solid #fff;width:600px;height:400px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 2px #999;-moz-box-shadow:0 0 2px #999;box-shadow:0 0 2px #999}
         .jcarousel-wrapper .photo-credits{position:absolute;right:15px;bottom:0;font-size:13px;color:#fff;text-shadow:0 0 1px rgba(0,0,0,0.85);opacity:.66}
         .jcarousel-wrapper .photo-credits a{color:#fff}
         .jcarousel{position:relative;overflow:hidden}
         .jcarousel ul{width:20000em;position:relative;list-style:none;margin:0;padding:0}
         .jcarousel li{float:left}
         .jcarousel-control-prev,.jcarousel-control-next{position:absolute;top:200px;width:30px;height:30px;text-align:center;background:#4E443C;color:#fff;text-decoration:none;text-shadow:0 0 1px #000;font:24px/27px Arial,sans-serif;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;-webkit-box-shadow:0 0 2px #999;-moz-box-shadow:0 0 2px #999;box-shadow:0 0 2px #999}
         .jcarousel-control-prev{left:-50px}
         .jcarousel-control-next{right:-50px}
         .jcarousel-control-prev:hover span,.jcarousel-control-next:hover span{display:block}
         .jcarousel-control-prev.inactive,.jcarousel-control-next.inactive{opacity:.5;cursor:default}
         .jcarousel-pagination{position:absolute;bottom:0;left:15px}
         .jcarousel-pagination a{text-decoration:none;display:inline-block;font-size:11px;line-height:14px;min-width:14px;background:#fff;color:#4E443C;border-radius:14px;padding:3px;text-align:center;margin-right:2px;opacity:.75}
         .jcarousel-pagination a.active{background:#4E443C;color:#fff;opacity:1;text-shadow:0 -1px 0 rgba(0,0,0,0.75)}
         </style>
        <!-- Example assets -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.3/jquery.jcarousel.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.3/jquery.jcarousel-autoscroll.js"></script>
        <script>
    (function($) {
        $(function() {
            $('.jcarousel').jcarousel({
                wrap: 'circular'
            }).jcarouselAutoscroll({
                interval: 6000,
                target: '+=1',
                autostart: true
            });
        });
    })(jQuery);
  </script>

    </head>
    <body>

        <div class="wrapper">


            <div class="jcarousel-wrapper">
                <div data-jcarousel="true" data-wrap="circular" class="jcarousel">
                    <ul>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg" width="600" height="400" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>

    </body>
</html>

TeMb14 · #6 (**permalink**) 18.07.2015, 11:35

спасибо большое, сейчас попробую разобраться )

laimas · #7 (**permalink**) 18.07.2015, 11:44

Сообщение от TeMb14

но какое то у него странное значение "3e3"

Нет ничего странного, это 3000 мс, или 3 сек.

Форум

Справочник

Discord чат

Курсы javascript