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

Question

У меня есть слайдер с 6 изображениями, который показывает только 3 изображения за раз, используя jquery caroufredsel. Мне нужно добавить границу к среднему изображению слайдера (используя класс). Как я могу это сделать?

Мой код,

        $('#gallery').carouFredSel({
            width: '100%',
            auto: true,
            items: {
                visible: 3,
                start: -1,

            },
            swipe: {
                onMouse: true,
                onTouch: true
            },
            scroll: {
                items: 1,
                duration: 1000,
                timeoutDuration: 3000

            },

            prev: '#WorkPrev',
            next: '#WorkNext'
        });

Html есть,

  <div class="galleryWrap">
        <div id="gallery">
            <div class="galleryImage"> <img src="img/slider2img1.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img2.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img3.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img4.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img5.jpg"/></div>
            <div class="galleryImage"> <img src="img/slider2img6.jpg"/></div>
        </div>
    </div>

Помоги мне. Спасибо за аванс

jquery caroufredsel

0

Manu 23 Дек 2013 в 12:05

Answer 1

Вы можете сделать это с помощью функций обратного вызова carouFredSel

Добавление границы напрямую

$('#gallery').carouFredSel({
        // your all other properties come here
        auto: {
            onBefore : function( data ) {
                var vis_elements;
                vis_elements  = $("#gallery").triggerHandler("configuration", "items.visible");
                var mid_element =  Math.floor(vis_elements/2);
                $.each(data.items.visible, function () { $(this).css({'border': ''})});
                data.items.visible.eq(mid_element).css({'border': '1px solid'});
           }
        }
    });

Или вы также можете добавить класс css к элементу

auto: {
                onBefore : function( data ) {
                    var vis_elements;
                    vis_elements  = $("#gallery").triggerHandler("configuration", "items.visible");
                    var mid_element =  Math.floor(vis_elements/2);

                    $.each(data.items.visible, function () { 
                      // remove class from all other elements
                      $(this).removeClass("your class"); // your class comes here
                    });

                    // add your class here
                    data.items.visible.eq(mid_element).addClass("your class");
               }
            }

Проверьте http://jsfiddle.net/raunakkathuria/rgqfz/

1

Raunak Kathuria 23 Дек 2013 в 10:12

Answer 2

Попробуйте это: - http://jsfiddle.net/adiioo7/Dnv23/3/

CSS: -

.galleryImage{float:left}

.galleryImage:nth-child(3n+2){  
  border: 4px solid #ccc;
}

< Сильный > JS : -

$('#gallery').carouFredSel({
    auto: true,
    items: 3,
    swipe: {
        onMouse: true,
        onTouch: true
    },
    scroll: {
        items: 3,
        duration: 1000,
        timeoutDuration: 3000

    },

    prev: '#WorkPrev',
    next: '#WorkNext'
});

1

Aditya Singh 23 Дек 2013 в 10:40

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

2 ответа

Попробуйте это: - http://jsfiddle.net/adiioo7/Dnv23/3/

Похожие вопросы

Новые вопросы

jquery