https://townofkipling.ca/Scripts/carousel.js

1$(function () {
2    'use strict';
3
4    // CAROUSEL SECTION
5	// MAKES THE IMAGES AS BACKGROUND-IMAGE INSIDE THE CAROUSEL (DEFAULT.ASPX)
6	var $wWidth = $(window).width(),
7        $wheight = $(window).height(),
8        $imageCarousel = $('#carousel .carousel-item img'),
9	    $slideQty = $('#carousel .carousel-item').length; // COUNTS THE CAROUSEL INDICATORS
10	
11    // Checks For The Size of The Viewport
12    if ($wWidth >= 784 ) {
13        $('.fullHeight').css('height', $wheight - 150);
14        
15	    // REPLACE IMAGES INSIDE CAROUSELS WITH A BACKGROUND IMAGE.
16	    $('#carousel .carousel-item img').each(function(){
17            var $imgSrc = $(this).attr('src');
18		
19		    $(this).parent().css({'background-image': 'url('+$imgSrc+')' });
20    	    //$(this).remove();
21            $(this).hide();
22	    });  
23    } else {
24        $('.fullHeight').css('height', 'inherit');
25        $imageCarousel.show();
26    }
27
28    if ($wheight <= 799) {
29        //$('.fullHeight').css('height', $wheight);
30    } else {
31        //alert('I am more than 800');
32    }
33	
34	//if ($wheight > 800 ) {
35 //           $('.fullHeight').css('height', $wheight - 130);
36        
37	//        // REPLACE IMAGES INSIDE CAROUSELS WITH A BACKGROUND IMAGE.
38	//        $('#carousel .carousel-item img').each(function(){
39 //               var $imgSrc = $(this).attr('src');
40		
41	//	        $(this).parent().css({'background-image': 'url('+$imgSrc+')' });
42 //   	        //$(this).remove();
43 //               $(this).hide();
44	//        });  
45 //       } else {
46 //           $('.fullHeight').css('height', 'auto');
47 //           $imageCarousel.show();
48 //       }
49	
50	// ADJUST THE HEIGHT OF .FULLHEIGHT WHEN RESIZED.
51	$(window).resize(function(){
52		var $imageCarousel = $('#carousel .carousel-item img'),
53            $wWidth = $(window).width(),
54            $wheight = $(window).height();
55		
56		//$('.fullHeight').css('height', $wheight);
57
58        // Checks For The Size of The Viewport
59        if ($wWidth >= 784 ) {
60            $('.fullHeight').css('height', $wheight - 150);
61        
62	        // REPLACE IMAGES INSIDE CAROUSELS WITH A BACKGROUND IMAGE.
63	        $('#carousel .carousel-item img').each(function(){
64                var $imgSrc = $(this).attr('src');
65		
66		        $(this).parent().css({'background-image': 'url('+$imgSrc+')' });
67    	        //$(this).remove();
68                $(this).hide();
69	        });  
70        } else {
71            $('.fullHeight').css('height', 'auto');
72            $imageCarousel.show();
73        }
74
75        if ($wheight <= 799) {
76           // $('.fullHeight').css('height', $wheight);
77        } else {
78            //alert('I am more than 800');
79        }
80		
81		//if ($wheight < 800 ) {
82  //          $('.fullHeight').css('height', $wheight - 130);
83        
84	 //       // REPLACE IMAGES INSIDE CAROUSELS WITH A BACKGROUND IMAGE.
85	 //       $('#carousel .carousel-item img').each(function(){
86  //              var $imgSrc = $(this).attr('src');
87		
88		//        $(this).parent().css({'background-image': 'url('+$imgSrc+')' });
89  //  	        //$(this).remove();
90  //              $(this).hide();
91	 //       });  
92  //      } else {
93  //          $('.fullHeight').css('height', 'auto');
94  //          $imageCarousel.show();
95  //      }
96	});
97
98    // AUTOMATICALLY GENERATE CAROUSEL INDICATORS
99    for (var i = 0; i < $slideQty; i++) {
100        var insertText = '<li data-target="#carousel" data-slide-to="' + i + '"></li>';
101
102        $('#carousel ol').append(insertText);
103        $('#carousel ol li:first-child').addClass('active');
104    }
105
106    $('#carousel').carousel({
107        pause: false,
108        interval: 7000
109    });
110
111});