Set "pagination" to false on screen width 992px

JavaScript
1

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?

2

Code’s too advanced for me but this looks wrong.

if(checkWidth < 992) {
						sliderDots = false;	
					} else {
						sliderDots = false;
					}

You are setting it to false whatever.

Couldn’t you just have used css media queries and set it to display:none if you don’t want it to show at <992px?

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.