Add arrows/dots to testimonial slider

assets/js/script.js

@@ -0,0 +1,319 @@
+jQuery(function ($) {
+	"use strict";
+
+	/* ========================================================================= */
+	/*	Page Preloader
+	/* ========================================================================= */
+
+	// Preloader js
+	$(window).on('load', function () {
+		$('#preloader').fadeOut(700);
+	});
+
+	/* ========================================================================= */
+	/*	Post image slider
+	/* ========================================================================= */
+
+	$("#post-thumb, #gallery-post").slick({
+		infinite: true,
+		arrows: false,
+		autoplay: true,
+		autoplaySpeed: 4000
+
+	});
+
+	$("#features").slick({
+		infinite: true,
+		arrows: false,
+		autoplay: true,
+		autoplaySpeed: 4000
+	});
+
+	/* ========================================================================= */
+	/*	Magnific popup
+	/* =========================================================================  */
+	$('.image-popup').magnificPopup({
+		type: 'image',
+		removalDelay: 160, //delay removal by X to allow out-animation
+		callbacks: {
+			beforeOpen: function () {
+				// just a hack that adds mfp-anim class to markup
+				this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
+				this.st.mainClass = this.st.el.attr('data-effect');
+			}
+		},
+		closeOnContentClick: true,
+		midClick: true,
+		fixedContentPos: false,
+		fixedBgPos: true
+	});
+	/* ========================================================================= */
+	/*	Portfolio Filtering Hook
+	/* =========================================================================  */
+
+	var containerEl = document.querySelector('.filtr-container');
+	if (containerEl) {
+		var filterizd = $('.filtr-container').filterizr({});
+	}
+	/* ========================================================================= */
+	/*	Testimonial Carousel
+	/* =========================================================================  */
+
+	//Init the carousel
+	$("#testimonials").slick({
+		adaptiveHeight: true,
+    // appendArrows: $('.client-meta', this),
+		autoplay: true,
+    // autoplaySpeed: 2500,
+    centerMode: true,
+    centerPadding: '0px',
+    dots: true,
+    // dotsClass: 'slick-dots-custom',
+    mobileFirst: true,
+    respondTo: 'min',
+	});
+
+	/* ========================================================================= */
+	/*   Contact Form Validating
+	/* ========================================================================= */
+
+
+	$('#contact-submit').click(function (e) {
+
+		//stop the form from being submitted
+		e.preventDefault();
+
+		/* declare the variables, var error is the variable that we use on the end
+		to determine if there was an error or not */
+		var error = false;
+		var name = $('#name').val();
+		var email = $('#email').val();
+		var subject = $('#subject').val();
+		var message = $('#message').val();
+
+		/* in the next section we do the checking by using VARIABLE.length
+		where VARIABLE is the variable we are checking (like name, email),
+		length is a JavaScript function to get the number of characters.
+		And as you can see if the num of characters is 0 we set the error
+		variable to true and show the name_error div with the fadeIn effect.
+		if it's not 0 then we fadeOut the div( that's if the div is shown and
+		the error is fixed it fadesOut.
+
+		The only difference from these checks is the email checking, we have
+		email.indexOf('@') which checks if there is @ in the email input field.
+		This JavaScript function will return -1 if no occurrence have been found.*/
+		if (name.length == 0) {
+			var error = true;
+			$('#name').css("border-color", "#D8000C");
+		} else {
+			$('#name').css("border-color", "#666");
+		}
+		if (email.length == 0 || email.indexOf('@') == '-1') {
+			var error = true;
+			$('#email').css("border-color", "#D8000C");
+		} else {
+			$('#email').css("border-color", "#666");
+		}
+		if (subject.length == 0) {
+			var error = true;
+			$('#subject').css("border-color", "#D8000C");
+		} else {
+			$('#subject').css("border-color", "#666");
+		}
+		if (message.length == 0) {
+			var error = true;
+			$('#message').css("border-color", "#D8000C");
+		} else {
+			$('#message').css("border-color", "#666");
+		}
+
+		//now when the validation is done we check if the error variable is false (no errors)
+		if (error == false) {
+			//disable the submit button to avoid spamming
+			//and change the button text to Sending...
+			$('#contact-submit').attr({
+				'disabled': 'false',
+				'value': 'Sending...'
+			});
+
+			/* using the jquery's post(ajax) function and a lifesaver
+			function serialize() which gets all the data from the form
+			we submit it to send_email.php */
+			$.post("sendmail.php", $("#contact-form").serialize(), function (result) {
+				//and after the ajax request ends we check the text returned
+				if (result == 'sent') {
+					//if the mail is sent remove the submit paragraph
+					$('#cf-submit').remove();
+					//and show the mail success div with fadeIn
+					$('#mail-success').fadeIn(500);
+				} else {
+					//show the mail failed div
+					$('#mail-fail').fadeIn(500);
+					//re enable the submit button by removing attribute disabled and change the text back to Send The Message
+					$('#contact-submit').removeAttr('disabled').attr('value', 'Send The Message');
+				}
+			});
+		}
+	});
+
+});
+// End Jquery Function
+
+
+/* ========================================================================= */
+/*	Animated section
+/* ========================================================================= */
+
+var wow = new WOW({
+	offset: 100, // distance to the element when triggering the animation (default is 0)
+	mobile: false // trigger animations on mobile devices (default is true)
+});
+
+//https://github.com/matthieua/WOW/issues/196#issuecomment-348734401
+var scrolled = false;
+$(window).on('scroll', function () {
+	if (!scrolled) {
+		scrolled = true;
+		wow.init();
+	}
+})
+
+/* ========================================================================= */
+/*	Google Map Customization
+/* =========================================================================  */
+
+function initialize() {
+
+	var latitude = $('#map-canvas').attr('data-latitude');
+	var longitude = $('#map-canvas').attr('data-longitude');
+	var myLatLng = new google.maps.LatLng(latitude, longitude);
+
+	var roadAtlasStyles = [{
+		"featureType": "landscape",
+		"elementType": "geometry.fill",
+		"stylers": [{
+			"color": "#2F3238"
+		}]
+	}, {
+		"elementType": "labels.text.fill",
+		"stylers": [{
+			"color": "#FFFFFF"
+		}]
+	}, {
+		"elementType": "labels.text.stroke",
+		"stylers": [{
+			"visibility": "off"
+		}]
+	}, {
+		"featureType": "road",
+		"elementType": "geometry.fill",
+		"stylers": [{
+			"color": "#50525f"
+		}]
+	}, {
+		"featureType": "road",
+		"elementType": "geometry.stroke",
+		"stylers": [{
+			"visibility": "on"
+		}, {
+			"color": "#808080"
+		}]
+	}, {
+		"featureType": "poi",
+		"elementType": "labels",
+		"stylers": [{
+			"visibility": "off"
+		}]
+	}, {
+		"featureType": "transit",
+		"elementType": "labels.icon",
+		"stylers": [{
+			"visibility": "off"
+		}]
+	}, {
+		"featureType": "poi",
+		"elementType": "geometry",
+		"stylers": [{
+			"color": "#808080"
+		}]
+	}, {
+		"featureType": "water",
+		"elementType": "geometry.fill",
+		"stylers": [{
+			"color": "#3071a7"
+		}, {
+			"saturation": -65
+		}]
+	}, {
+		"featureType": "road",
+		"elementType": "labels.icon",
+		"stylers": [{
+			"visibility": "off"
+		}]
+	}, {
+		"featureType": "landscape",
+		"elementType": "geometry.stroke",
+		"stylers": [{
+			"color": "#bbbbbb"
+		}]
+	}];
+
+	var mapOptions = {
+		zoom: 14,
+		center: myLatLng,
+		disableDefaultUI: true,
+		scrollwheel: false,
+		navigationControl: false,
+		mapTypeControl: false,
+		scaleControl: false,
+		draggable: false,
+		mapTypeControlOptions: {
+			mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
+		}
+	};
+
+	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
+
+
+	var marker = new google.maps.Marker({
+		position: myLatLng,
+		map: map,
+		title: '',
+	});
+
+
+	google.maps.event.addListener(marker, 'click', function () {
+		infowindow.open(map, marker);
+	});
+
+	var styledMapOptions = {
+		name: 'US Road Atlas'
+	};
+
+	var usRoadMapType = new google.maps.StyledMapType(
+		roadAtlasStyles, styledMapOptions);
+
+	map.mapTypes.set('roadatlas', usRoadMapType);
+	map.setMapTypeId('roadatlas');
+}
+
+google.maps.event.addDomListener(window, "load", initialize);
+
+/* ========================================================================= */
+/*	Staticman comments reply
+/* ========================================================================= */
+function changeValue(elementName, newValue) {
+	document.getElementsByName(elementName)[0].value = newValue;
+};
+
+/* ========================================================================= */
+/*	Honeypot
+/* ========================================================================= */
+$(document).ready(function () {
+	$('form').submit(function () {
+		if ($('input[type="text"]#e-mail').val().length > 0) {
+			$('form').attr('action', '/');
+			return false;
+		}
+	});
+});

assets/sass/custom.scss

@@ -54,6 +54,29 @@ p, h3, h4 {
   }
 }
 
+// .slick-dots {
+  // li {
+    // button {
+      // border-radius: 100%;
+      // padding: 5px;
+      // background-color: white;
+      // text-indent: 100vw;
+
+      // $button-size: 2px;
+      // height: $button-size;
+      // width: $button-size;
+      // // &:focus {
+        // // background-color: red;
+      // // }
+
+    // }
+
+    // .slick-active button {
+      // background-color: red;
+    // }
+  // }
+// }
+
 .social-icon {
   img {
     height: 75%;
@@ -84,3 +107,7 @@ p, h3, h4 {
   // background-size: auto;
   // background-size: contain;
 }
+
+#testimonials {
+  max-width: 75vw;
+}

config.toml

@@ -52,7 +52,7 @@ custom_css = ["css/custom.css"]
     bgImage = "images/slider/hero-area.jpg"
     # bgImage = "images/slider/eagle.png"
     heading = "Ataraxy"
-    content= "NA, MP-focused clan that is currently looking for friendly and active clan members to play together with."
+    content= "Top 250, MP-focused clan that is currently looking for friendly and active clan members to play together with."
     btn = true
     btnText="Requirements"
     btnURL="#requirements"

data/about.yml

@@ -15,4 +15,4 @@ benefits :
 - "vibrant and respectful Discord community"
 - "leadership opportunities"
 - "MEE6 leaderboard"
-- "mini-games (trivia/Pokecord)"
+- "mini-games (Pokecord/gambling/trivia)"

data/team.yml

@@ -15,7 +15,7 @@ teamMember :
   - imageName : pistolfist
     name : PistolFist
     designation : Vice Master
-    description : In charge of recruiting and assists with player management. Created this site and co-designed clan logo. Founder of clan. 
+    description : In charge of recruiting. Assists with player management. Created this site and co-designed clan logo. Founder of clan. 
     # socialIcon :
       # - icon : tf-ion-social-facebook
         # url : "#"

layouts/partials/testimonial.html

@@ -15,7 +15,7 @@
 
             <div class="col-xl-12">
                 {{"<!-- testimonial wrapper -->" | safeHTML}}
-                <div id="testimonials" class="wow fadeInUp" data-wow-duration="500ms" data-wow-delay="100ms">
+                <div id="testimonials" class="mx-auto wow fadeInUp" data-wow-duration="500ms" data-wow-delay="100ms">
                     {{ range .Site.Data.testimonial.testimonialItem }}
                     {{"<!-- testimonial single -->" | safeHTML}}
                     <div class="item text-center">