Change the height image slideshow homepage on desktop & mobile version

jdlines
Offline
Last seen: 11 months 4 weeks ago
Tue, 07/19/2016 - 10:35
#1
Change the height image slideshow homepage on desktop & mobile version

Hi Team,

I need your assistance, how to change the layout size especially the hight of banner slideshow on dekstop and mobile, I tried with change on script.js but nothing

please advise

thanks

hattt13
Offline
Last seen: 1 day 5 hours ago
Wed, 07/20/2016 - 10:41

you can find this code in file script.js

function BannerSlider() {
if($('#banner-slider').length) {
var offset_h = $('#header').innerHeight();
$('#banner-slider').owlCarousel({
autoPlay: 5000,
navigation: true,
singleItem: true,
pagination:false,
transitionStyle:'fade',
navigationText: ['<i class="hillter-icon-left-arrow"></i>','<i class="hillter-icon-right-arrow"></i>'],
beforeInit: function () {
var height = $('#banner-slider').data().height,
window_h = $(window).height(),
window_w = $(window).width();


$('.slider-item').each(function(index, el) {
var url = $(this).data().image;

$(this).css('background-image', 'url('+url+')');


if( height !='' && height != undefined ) {


if(window_w > 767 ) {
$(this).css('height', height);
} else if(window_w <= 767 ) {
$(this).css('height', 500);
} else if(window_w <= 480 ) {
$(this).css('height', 400);
}

}else {
$(this).css('height', window_h - offset_h);
}


});


},
beforeUpdate: function() {
var height = $('#banner-slider').data().height,
window_w = $(window).width();


if(!(height !='' && height != undefined)) {
$('.slider-item').each(function(index, el) {
var window_h = $(window).height()
$(this).css('height', window_h - offset_h +'px');
});
} else {
$('.slider-item').each(function(index, el) {
if(window_w > 767 ) {
$(this).css('height', height);
} else if(window_w <= 767 ) {
$(this).css('height', 500);
} else if(window_w <= 480 ) {
$(this).css('height', 400);
}
});
}
}
});
}
}

 change it with the following code: 

/*Banner Slide*/
BannerSlider();
function BannerSlider() {
$("#banner-slider").owlCarousel({
autoPlay : 3000,
stopOnHover : true,
navigation:true,
paginationSpeed : 1000,
goToFirstSpeed : 2000,
singleItem : true,
autoHeight : true,
transitionStyle:"fade"
});


$( ".slider-item" ).each(function() {
var attr = $(this).attr('data-image');


if (typeof attr !== typeof undefined && attr !== false) {
$(this).css('background-image', 'url('+attr+')');
}
});


}

and use css with class 

.banner-slider .slider-item

 change the layout size especially the hight of banner slideshow on dekstop Or mobile. Example:

.banner-slider .slider-item {
height: 500px;
}



 Thanks

Log in or register to post comments