Hi there,
I would like to set FALSE to my slider if the screen is lower then 992px else set it to TRUE.
My code doesn’t give me any errors using Gulp. However it’s not working for some reason.
So the SliderDOTS need to be set to FALSE if the screen size is less then 992px.
This is my code:
com.dg.Max.extend('iar.front.City', true, function() {
var dom = com.dg.max.utils.Dom,
maps,
infowindow,
checkWidth = $(window).width(),
sliderDots,
that = this.add({
name: 'Home',
constructor: function() {
that.super();
mobile_slide_content();
dom.on(window, 'resize', resizeEvent);
if (!!IAR_data.location) {
initGoogleMaps();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': IAR_data.city_name
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
console.log(results);
getWeather(results);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
}),
mobile_slide_content = function() {
var hotspot_slider = $("#hotspot-slider");
if (!!hotspot_slider) {
hotspot_slider.owlCarousel({
navigation: true,
pagination: sliderDots,
singleItem: false,
autoPlay: false,
items: 4,
dragBeforeAnimFinish: false,
itemsMobile: [767, 1],
itemsTablet: [768, 2],
itemsDesktopSmall: [980, 2],
itemsDesktop: [1199, 4],
navigationText: [
"<i class='iar-icon-arrow-left'></i>",
"<i class='iar-icon-arrow-right'></i>"
],
});
} else {
if (typeof hotspot_slider.data('owlCarousel') != 'undefined') {
hotspot_slider.data('owlCarousel').destroy();
hotspot_slider.removeClass('owl-carousel');
}
}
},
resizeEvent = function() {
mobile_slide_content();
if(checkWidth < 992) {
sliderDots = false;
} else {
sliderDots = false;
}
},
can somebody please point me to the right direction?