I've a slider which having 6 images and that shows only 3 images at a time using caroufredsel jquery. I need to add border to the middle slider image (using class). How can I do this?
My code is,
$('#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 is,
<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>
Help me. Thanks for advance
You can do it using the carouFredSel callback functions
adding border directly
$('#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'});
}
}
});
or you can also add css class to the element
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");
}
}