Форум

scrobot · #1 (**permalink**) 14.05.2014, 13:41

Здравствуйте, возникла проблема. Имеется jcarousel, имеется 5 видимых элементов. Мне нужно 3ему элементу li придать класс active. Карусель замкнута, т.е. просто nth-child не поможет. Необходимо именно их 5 отображаемых на экране элемента придать третьему класс. Подскажите возможные решения. Заранее спасибо.

krasovsky · #2 (**permalink**) 14.05.2014, 14:12

Ох, помню, придумывал что то подобное

getArray = function(count,curSlide) {//создаем массив,аргументы - количество слайдов,активный слайд
	var c = [];
	for (i=0;i<count;i++) {
		c.push(i);//создаем массив из элементов (допустим их 5 == [1,2,3,4,5])
	}			
	c = c.concat(c.concat(c))//конкатинация массива == [1,2,3,4,5,1,2,3,4,5,12,3,4,5]
	c[count+cureentSlide]='center';//вычисление центра допустим активный слайд 2 ==[1,2,3,4,5,1,'center',3,4,5,12,3,4,5],хотя можно и не вычислять,так для наглядности
	return c;
}

Получил массив теперь можешь спокойно отсчитывать по нему в любую сторону - 3 в лево будет 5 слайд, враво 3 слайд.

рони · #3 (**permalink**) 14.05.2014, 14:16

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

Имеется jcarousel

а ссылку на источник?
а ещё лучше макет тут или в песочнице

scrobot · #4 (**permalink**) 14.05.2014, 14:21

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

а ссылку на источник?

http://sorgalla.com/jcarousel/examples/responsive/ вот эта каруселька используется

scrobot · #5 (**permalink**) 14.05.2014, 14:44

http://plast-pak.esy.es/ - а вот и сам макет

рони · #6 (**permalink**) 14.05.2014, 14:59

scrobot,
а доку почитать?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Responsive Carousel - jCarousel Examples</title>
        <base href="http://sorgalla.com/jcarousel/examples/responsive/" />
        <!-- Shared assets -->
        <link rel="stylesheet" type="text/css" href="_shared/css/style.css">

        <!-- Example assets -->
        <link rel="stylesheet" type="text/css" href="jcarousel.responsive.css">

        <script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
        <style type="text/css">
        .jcarousel  img.active{
          border: #FF0000 4px  solid;
          border-radius: 4px;
          width: 92%;
          height: 92%;
        }

        </style>
        <script>(function($) {
    $(function() {
        var jcarousel = $('.jcarousel');

        jcarousel
            .on('jcarousel:reload jcarousel:create', function () {
                var width = jcarousel.innerWidth();

                if (width >= 600) {
                    width = width / 5;
                } else if (width >= 350) {
                    width = width / 2;
                }

                jcarousel.jcarousel('items').css('width', width + 'px');
            })
            .jcarousel({
                wrap: 'circular'

            });

        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });

        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .on('click', function(e) {
                e.preventDefault();
            })
            .jcarouselPagination({
                perPage: 1,
                item: function(page) {
                    return '<a href="#' + page + '">' + page + '</a>';
                }
            });

$('.jcarousel')
    .on('jcarousel:animateend', function(event, carousel) {
        var visible = $('.jcarousel').jcarousel('visible');
       $('img', '.jcarousel').removeClass('active') //   $('li', '.jcarousel').removeClass('active')
        $('img',visible.eq(2)).addClass('active');   //   visible.eq(2).addClass('active');

    });


    });
})(jQuery);

</script>

    </head>
    <body>

        <div class="wrapper">
            <h1>Responsive Carousel</h1>


            <p>This example shows how to implement a responsive carousel. Resize the browser window to see the effect.</p>

            <div class="jcarousel-wrapper">
                <div class="jcarousel">
                    <ul>
                        <li><img src="../_shared/img/img1.jpg" alt="Image 1"></li>
                        <li><img src="../_shared/img/img2.jpg" alt="Image 2"></li>
                        <li><img src="../_shared/img/img3.jpg" alt="Image 3" class="active"></li>
                        <li><img src="../_shared/img/img4.jpg" alt="Image 4"></li>
                        <li><img src="../_shared/img/img5.jpg" alt="Image 5"></li>
                        <li><img src="../_shared/img/img6.jpg" alt="Image 6"></li>
                    </ul>
                </div>

                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>

                <p class="jcarousel-pagination"></p>
            </div>
        </div>

    </body>
</html>

scrobot · #7 (**permalink**) 14.05.2014, 15:01

Да вот только что хотел написать извинения за отнятое время)) Полазил и сам нашел. Как-то я пропустил этот пункт в доке. Спасибо большое.

Форум

Справочник

Discord чат

Курсы javascript