CodePen – featureCarousel<\/title>\n <link href=\"https:\/\/cdn.bootcss.com\/font-awesome\/4.7.0\/fonts\/fontawesome-webfont.svg\">\n<link href=\"https:\/\/cdn.bootcss.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\">\n<link rel=\"stylesheet\" href=\".\/style.css\">\n\n<\/head>\n<body>\n\n<div class=\"carousel-container\"> \n <div class=\"carousel-main\" id=\"carousel\">\n <div class=\"carousel-feature bg-1\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-1\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/8020E858-0F39-415C-AF3D-7FC776FCB255-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-2\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-2\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/7E247F94-BC11-41DB-ACD4-9A0A6BEC0698-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-2\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-2\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/62583C89-E414-41C9-B110-E7596EC2F7AF-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-3\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-3\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/D552BBF0-C748-407E-A0A3-2FA4A9EE014F-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-3\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-3\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/762B8447-646B-40CA-8B1A-7358AB59B58F-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-3\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-3\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/505D280F-1A79-4EBD-A885-04F85543D721-scaled.jpg\"><\/a>\n <\/div>\n <\/div>\n <p class=\"arrow-section\" >\n <a id=\"carousel-left\" style=\"font-size: 48px;color: white;\">\u276e<\/a>\n <a id=\"carousel-right\" style=\"font-size: 48px;color: white;\">\u276f<\/i>\n<\/a>\n <\/p>\n<\/div>\n\n <script src='https:\/\/code.jquery.com\/jquery-2.2.4.min.js'><\/script><script src=\".\/script.js\"><\/script>\n\n<\/body>\n<\/html>\n\n\n<script>\n \/*!\n * Feature Carousel, Version 1.3\n * http:\/\/www.bkosolutions.com\n *\n * Copyright 2011 Brian Osborne\n * Licensed under GPL version 3\n * brian@bkosborne.com\n *\n * http:\/\/www.gnu.org\/licenses\/gpl.txt\n *\/\n(function($) {\n\n$.fn.featureCarousel = function (options) {\n\n \/\/ Adds support for multiple carousels on one page\n if (this.length > 1) {\n this.each(function() {\n $(this).featureCarousel(options);\n });\n return this;\n }\n \n \/\/ override the default options with user defined options\n options = $.extend({}, $.fn.featureCarousel.defaults, options || {});\n\n \/* These are universal values that are used throughout the plugin. Do not modify them\n * unless you know what you're doing. Most of them feed off the options\n * so most customization can be achieved by modifying the options values *\/\n var pluginData = {\n currentCenterNum: options.startingFeature,\n containerWidth: 0,\n containerHeight: 0,\n largeFeatureWidth: 0,\n largeFeatureHeight: 0,\n smallFeatureWidth: 0,\n smallFeatureHeight: 0,\n totalFeatureCount: $(this).children(\"div\").length,\n currentlyMoving: false,\n featuresContainer: $(this),\n featuresArray: [],\n containerIDTag: \"#\"+$(this).attr(\"id\"),\n timeoutVar: null,\n rotationsRemaining: 0,\n itemsToAnimate: 0,\n borderWidth:\t\t\t 0\n };\n\n \/**\n * Function to preload the images in the carousel if desired.\n * This is not recommended if there are a lot of images in the carousel because\n * it may take a while. Functionality does not depend on preloading the images\n *\/\n var preload = function(callback) {\n \/\/ user may not want to preload images\n if (options.preload == true) {\n var $imageElements = pluginData.featuresContainer.find(\"img\");\n var loadedImages = 0;\n var totalImages = $imageElements.length;\n\n $imageElements.each(function (index, element) {\n \/\/ Attempt to load the images\t\t\t\t\t\n var img = new Image();\n $(img).bind('load error', function () {\n \/\/ Add to number of images loaded and see if they are all done yet\n loadedImages++;\n if (loadedImages == totalImages) {\n \/\/ All done, perform callback\n callback();\n }\n });\n \n img.src = element.src;\n });\n } else {\n \/\/ if user doesn't want preloader, then just go right to callback\n callback();\n }\n }\n\n \/\/ Gets the feature container based on the number\n var getContainer = function(featureNum) {\n return pluginData.featuresArray[featureNum-1];\n }\n\n \/\/ get a feature given it's set position (the position that doesn't change)\n var getBySetPos = function(position) {\n $.each(pluginData.featuresArray, function () {\n if ($(this).data().setPosition == position)\n return $(this);\n });\n }\n\n \/\/ get previous feature number\n var getPreviousNum = function(num) {\n if ((num - 1) == 0) {\n return pluginData.totalFeatureCount;\n } else {\n return num - 1;\n }\n }\n\n \/\/ get next feature number\n var getNextNum = function(num) {\n if ((num + 1) > pluginData.totalFeatureCount) {\n return 1;\n } else {\n return num + 1;\n }\n }\n\n \/**\n * Because there are several options the user can set for the width and height\n * of the feature images, this function is used to determine which options were set\n * and to set the appropriate dimensions used for a small and large feature\n *\/\n var setupFeatureDimensions = function() {\n \/\/ Set the height and width of the entire carousel container\n pluginData.containerWidth = pluginData.featuresContainer.width();\n pluginData.containerHeight = pluginData.featuresContainer.height();\n\n \/\/ Grab the first image for reference\n var $firstFeatureImage = $(pluginData.containerIDTag).find(\".carousel-image:first\");\n\n \/\/ Large Feature Width\n if (options.largeFeatureWidth > 1)\n pluginData.largeFeatureWidth = options.largeFeatureWidth;\n else if (options.largeFeatureWidth > 0 && options.largeFeatureWidth < 1)\n pluginData.largeFeatureWidth = $firstFeatureImage.width() * options.largeFeatureWidth;\n else\n pluginData.largeFeatureWidth = $firstFeatureImage.outerWidth();\n \/\/ Large Feature Height\n if (options.largeFeatureHeight > 1)\n pluginData.largeFeatureHeight = options.largeFeatureHeight;\n else if (options.largeFeatureHeight > 0 && options.largeFeatureHeight < 1)\n pluginData.largeFeatureHeight = $firstFeatureImage.height() * options.largeFeatureHeight;\n else\n pluginData.largeFeatureHeight = $firstFeatureImage.outerHeight();\n \/\/ Small Feature Width\n if (options.smallFeatureWidth > 1)\n pluginData.smallFeatureWidth = options.smallFeatureWidth;\n else if (options.smallFeatureWidth > 0 && options.smallFeatureWidth < 1)\n pluginData.smallFeatureWidth = $firstFeatureImage.width() * options.smallFeatureWidth;\n else\n pluginData.smallFeatureWidth = $firstFeatureImage.outerWidth() \/ 2;\n \/\/ Small Feature Height\n if (options.smallFeatureHeight > 1)\n pluginData.smallFeatureHeight = options.smallFeatureHeight;\n else if (options.smallFeatureHeight > 0 && options.smallFeatureHeight < 1)\n pluginData.smallFeatureHeight = $firstFeatureImage.height() * options.smallFeatureHeight;\n else\n pluginData.smallFeatureHeight = $firstFeatureImage.outerHeight() \/ 2;\n }\n\n \/**\n * Function to take care of setting up various aspects of the carousel,\n * most importantly the default positions for the features\n *\/\n var setupCarousel = function() {\n \/\/ Set the total feature count to the amount the user wanted to cutoff\n if (options.displayCutoff > 0 && options.displayCutoff < pluginData.totalFeatureCount) {\n pluginData.totalFeatureCount = options.displayCutoff;\n }\n\n \/\/ fill in the features array\n pluginData.featuresContainer.find(\".carousel-feature\").each(function (index) {\n if (index < pluginData.totalFeatureCount) {\n pluginData.featuresArray[index] = $(this);\n }\n });\n\n \/\/ Determine the total border width around the feature if there is one\n if (pluginData.featuresContainer.find(\".carousel-feature\").first().css(\"borderLeftWidth\") != \"medium\") {\n pluginData.borderWidth = parseInt(pluginData.featuresContainer.find(\".carousel-feature\").first().css(\"borderLeftWidth\"))*2;\n }\n\n \/\/ Place all the features in a center hidden position to start off\n pluginData.featuresContainer\n \/\/ Have to make the container relative positioning\n .find(\".carousel-feature\").each(function () {\n \/\/ Center all the features in the middle and hide them\n $(this).css({\n 'left': (pluginData.containerWidth \/ 2) - (pluginData.smallFeatureWidth \/ 2) - (pluginData.borderWidth \/ 2),\n 'width': pluginData.smallFeatureWidth,\n 'height': pluginData.smallFeatureHeight,\n 'top': options.smallFeatureOffset + options.topPadding,\n 'opacity': 0\n });\n })\n \/\/ Set all the images to small feature size\n .find(\".carousel-image\").css({\n 'width': pluginData.smallFeatureWidth\n });\n \n \/\/ set position to relative of captions if displaying below image\n if (options.captionBelow) {\n pluginData.featuresContainer.find('.carousel-caption').css('position','relative');\n }\n\n \/\/ figure out number of items that will rotate each time\n if (pluginData.totalFeatureCount < 4) {\n pluginData.itemsToAnimate = pluginData.totalFeatureCount;\n } else {\n pluginData.itemsToAnimate = 4;\n }\n\n \/\/ Hide story info and set the proper positioning\n pluginData.featuresContainer.find(\".carousel-caption\")\n .hide();\n }\n\n \/**\n * Here all the position data is set for the features.\n * This is an important part of the carousel to keep track of where\n * each feature within the carousel is\n *\/\n var setupFeaturePositions = function() {\n \/\/ give all features a set number that won't change so they remember their\n \/\/ original order\n $.each(pluginData.featuresArray, function (i) {\n $(this).data('setPosition',i+1);\n });\n\n \/\/ Go back one - This is done because we call the move function right away, which\n \/\/ shifts everything to the right. So we set the current center back one, so that\n \/\/ it displays in the center when that happens\n var oneBeforeStarting = getPreviousNum(options.startingFeature);\n pluginData.currentCenterNum = oneBeforeStarting;\n\n \/\/ Center feature will be position 1\n var $centerFeature = getContainer(oneBeforeStarting);\n $centerFeature.data('position',1);\n\n \/\/ Everything before that center feature...\n var $prevFeatures = $centerFeature.prevAll();\n $prevFeatures.each(function (i) {\n $(this).data('position',(pluginData.totalFeatureCount - i));\n });\n\n \/\/ And everything after that center feature...\n var $nextFeatures = $centerFeature.nextAll();\n $nextFeatures.each(function (i) {\n if ($(this).data('setPosition') != undefined) {\n $(this).data('position',(i + 2));\n }\n });\n\n \/\/ if the counter style is for including number tags in description...\n if (options.counterStyle == 'caption') {\n $.each(pluginData.featuresArray, function () {\n var pos = getPreviousNum($(this).data('position'));\n var $numberTag = $(\"<span><\/span>\");\n $numberTag.addClass(\"numberTag\");\n $numberTag.html(\"(\"+ pos + \" of \" + pluginData.totalFeatureCount + \") \");\n $(this).find('.carousel-caption p').prepend($numberTag);\n });\n }\n }\n\n \/**\n * This function will set up the two different types of trackers used\n *\/\n var setupTrackers = function()\n {\n if (options.trackerIndividual) {\n \/\/ construct the tracker list\n var $list = $(\"<ul><\/ul>\");\n $list.addClass(\"tracker-individual-container\");\n for (var i = 0; i < pluginData.totalFeatureCount; i++) {\n \/\/ item position one plus the index\n var counter = i+1;\n\n \/\/ Build the DOM for the tracker list\n var $trackerBlip = $(\"<div>\"+counter+\"<\/div>\");\n $trackerBlip.addClass(\"tracker-individual-blip\");\n $trackerBlip.css(\"cursor\",\"pointer\");\n $trackerBlip.attr(\"id\",\"tracker-\"+(i+1));\n var $listEntry = $(\"<li><\/li>\");\n $listEntry.append($trackerBlip);\n $listEntry.css(\"float\",\"left\");\n $listEntry.css(\"list-style-type\",\"none\");\n $list.append($listEntry);\n }\n \/\/ add the blip list and then make sure it's visible\n $(pluginData.containerIDTag).append($list);\n $list.hide().show();\n }\n \n if (options.trackerSummation) {\n \/\/ Build the tracker div that will hold the tracking data\n var $tracker = $('<div><\/div>');\n $tracker.addClass('tracker-summation-container');\n \/\/ Collect info in spans\n var $current = $('<span><\/span>').addClass('tracker-summation-current').text(options.startingFeature);\n var $total = $('<span><\/span>').addClass('tracker-summation-total').text(pluginData.totalFeatureCount);\n var $middle = $('<span><\/span>').addClass('tracker-summation-middle').text(' of ');\n \/\/ Add it all together\n $tracker.append($current).append($middle).append($total);\n \/\/ Insert into DOM\n $(pluginData.containerIDTag).append($tracker);\n }\n }\n\n \/\/ Update the tracker information with the new centered feature\n var updateTracker = function(oldCenter, newCenter) {\n if (options.trackerIndividual) {\n \/\/ get selectors for the two trackers\n var $trackerContainer = pluginData.featuresContainer.find(\".tracker-individual-container\");\n var $oldCenter = $trackerContainer.find(\"#tracker-\"+oldCenter);\n var $newCenter = $trackerContainer.find(\"#tracker-\"+newCenter);\n\n \/\/ change classes\n $oldCenter.removeClass(\"tracker-individual-blip-selected\");\n $newCenter.addClass(\"tracker-individual-blip-selected\");\n }\n \n if (options.trackerSummation) {\n var $trackerContainer = pluginData.featuresContainer.find('.tracker-summation-container');\n $trackerContainer.find('.tracker-summation-current').text(newCenter);\n }\n }\n\n \/**\n * This function will set the autoplay for the carousel to\n * automatically rotate it given the time in the options\n * pass in TRUE to just clear the timer\n *\/\n var setTimer = function(stop) {\n \/\/ clear the timeout var if it exists\n clearTimeout(pluginData.timeoutVar);\n\n \/\/ set interval for moving if autoplay is set\n if (!stop && options.autoPlay != 0) {\n var autoTime = (Math.abs(options.autoPlay) < options.carouselSpeed) ? options.carouselSpeed : Math.abs(options.autoPlay);\n pluginData.timeoutVar = setTimeout(function () {\n (options.autoPlay > 0) ? initiateMove(true,1) : initiateMove(false,1);\n }, autoTime);\n }\n }\n\n\n \/\/ This is a helper function for the animateFeature function that\n \/\/ will update the positions of all the features based on the direction\n var rotatePositions = function(direction) {\n $.each(pluginData.featuresArray, function () {\n var newPos;\n if (direction == false) {\n newPos = getNextNum($(this).data().position);\n } else {\n newPos = getPreviousNum($(this).data().position);\n }\n $(this).data('position',newPos);\n });\n }\n\n \/**\n * This function is used to animate the given feature to the given\n * location. Valid locations are \"left\", \"right\", \"center\", \"hidden\"\n *\/\n var animateFeature = function($feature, direction)\n {\n var new_width, new_height, new_top, new_left, new_zindex, new_padding, new_fade;\n\n \/\/ Determine the old and new positions of the feature\n var oldPosition = $feature.data('position');\n var newPosition;\n if (direction == true)\n newPosition = getPreviousNum(oldPosition);\n else\n newPosition = getNextNum(oldPosition);\n \n \/\/ callback for moving out of center pos\n if (oldPosition == 1) {\n options.leavingCenter($feature);\n }\n\n \/\/ Caculate new new css values depending on where the feature will be located\n if (newPosition == 1) {\n new_width = pluginData.largeFeatureWidth;\n new_height = pluginData.largeFeatureHeight;\n new_top = options.topPadding;\n new_zindex = $feature.css(\"z-index\");\n new_left = (pluginData.containerWidth \/ 2) - (pluginData.largeFeatureWidth \/ 2) - (pluginData.borderWidth \/ 2);\n new_fade = 1.0;\n } else {\n new_width = pluginData.smallFeatureWidth;\n new_height = pluginData.smallFeatureHeight;\n new_top = options.smallFeatureOffset + options.topPadding;\n new_zindex = 1;\n new_fade = 0.4;\n \/\/ some info is different for the left, right, and hidden positions\n \/\/ left\n if (newPosition == pluginData.totalFeatureCount) {\n new_left = options.sidePadding;\n \/\/ right\n } else if (newPosition == 2) {\n new_left = pluginData.containerWidth - pluginData.smallFeatureWidth - options.sidePadding - pluginData.borderWidth;\n \/\/ hidden\n } else {\n new_left = (pluginData.containerWidth \/ 2) - (pluginData.smallFeatureWidth \/ 2) - (pluginData.borderWidth \/ 2);\n new_fade = 0;\n }\n }\n \/\/ This code block takes care of hiding the feature information if the feature is leaving the center\n if (oldPosition == 1) {\n \/\/ Slide up the story information\n $feature.find(\".carousel-caption\")\n .hide();\n }\n\n \/\/ Animate the feature div to its new location\n $feature\n .animate(\n {\n width: new_width,\n height: new_height,\n top: new_top,\n left: new_left,\n opacity: new_fade\n },\n options.carouselSpeed,\n options.animationEasing,\n function () {\n \/\/ Take feature info out of hiding if new position is center\n if (newPosition == 1) {\n \/\/ need to set the height to auto to accomodate caption if displayed below image\n if (options.captionBelow)\n $feature.css('height','auto');\n \/\/ fade in the feature information\n $feature.find(\".carousel-caption\")\n .fadeTo(\"fast\",0.85);\n \/\/ callback for moved to center\n options.movedToCenter($feature);\n }\n \/\/ decrement the animation queue\n pluginData.rotationsRemaining = pluginData.rotationsRemaining - 1;\n \/\/ have to change the z-index after the animation is done\n $feature.css(\"z-index\", new_zindex);\n \/\/ change trackers if using them\n if (options.trackerIndividual || options.trackerSummation) {\n \/\/ just update the tracker once; once the new center feature has arrived in center\n if (newPosition == 1) {\n \/\/ figure out what item was just in the center, and what item is now in the center\n var newCenterItemNum = pluginData.featuresContainer.find(\".carousel-feature\").index($feature) + 1;\n var oldCenterItemNum;\n if (direction == false)\n oldCenterItemNum = getNextNum(newCenterItemNum);\n else\n oldCenterItemNum = getPreviousNum(newCenterItemNum);\n \/\/ now update the trackers\n updateTracker(oldCenterItemNum, newCenterItemNum);\n }\n }\n\n \/\/ did all the the animations finish yet?\n var divide = pluginData.rotationsRemaining \/ pluginData.itemsToAnimate;\n if (divide % 1 == 0) {\n \/\/ if so, set moving to false...\n pluginData.currentlyMoving = false;\n \/\/ change positions for all items...\n rotatePositions(direction);\n\n \/\/ and move carousel again if queue is not empty\n if (pluginData.rotationsRemaining > 0)\n move(direction);\n }\n \n \/\/ reset timer and auto rotate again\n setTimer(false);\n }\n )\n \/\/ select the image within the feature\n .find('.carousel-image')\n \/\/ animate its size down\n .animate({\n width: new_width,\n height: new_height\n },\n options.carouselSpeed,\n options.animationEasing)\n .end();\n }\n\n \/**\n * move the carousel to the left or to the right. The features that\n * will move into the four positions are calculated and then animated\n * rotate to the RIGHT when direction is TRUE and\n * rotate to the LEFT when direction is FALSE\n *\/\n var move = function(direction)\n {\n \/\/ Set the carousel to currently moving\n pluginData.currentlyMoving = true;\n\n \/\/ Obtain the new feature positions based on the direction that the carousel is moving\n var $newCenter, $newLeft, $newRight, $newHidden;\n if (direction == true) {\n \/\/ Shift features to the left\n $newCenter = getContainer(getNextNum(pluginData.currentCenterNum));\n $newLeft = getContainer(pluginData.currentCenterNum);\n $newRight = getContainer(getNextNum(getNextNum(pluginData.currentCenterNum)));\n $newHidden = getContainer(getPreviousNum(pluginData.currentCenterNum));\n pluginData.currentCenterNum = getNextNum(pluginData.currentCenterNum);\n } else {\n $newCenter = getContainer(getPreviousNum(pluginData.currentCenterNum));\n $newLeft = getContainer(getPreviousNum(getPreviousNum(pluginData.currentCenterNum)));\n $newRight = getContainer(pluginData.currentCenterNum);\n $newHidden = getContainer(getNextNum(pluginData.currentCenterNum));\n pluginData.currentCenterNum = getPreviousNum(pluginData.currentCenterNum);\n }\n\n \/\/ The z-index must be set before animations take place for certain movements\n \/\/ this makes the animations look nicer\n if (direction) {\n $newLeft.css(\"z-index\", 3);\n } else {\n $newRight.css(\"z-index\", 3);\n }\n $newCenter.css(\"z-index\", 4);\n \n \/\/ Fire moving to center event\n options.movingToCenter($newCenter);\n\n \/\/ Animate the features into their new positions\n animateFeature($newLeft, direction);\n animateFeature($newCenter, direction);\n animateFeature($newRight, direction);\n \/\/ Only want to animate the \"hidden\" feature if there are more than three\n if (pluginData.totalFeatureCount > 3) {\n animateFeature($newHidden, direction);\n }\n }\n\n \/\/ This is used to relegate carousel movement throughout the plugin\n \/\/ It will only initiate a move if the carousel isn't currently moving\n \/\/ It will set the animation queue to the number of rotations given\n var initiateMove = function(direction, rotations) {\n if (pluginData.currentlyMoving == false) {\n var queue = rotations * pluginData.itemsToAnimate;\n pluginData.rotationsRemaining = queue;\n move(direction);\n }\n }\n\n \/**\n * This will find the shortest distance to travel the carousel from\n * one position to another position. It will return the shortest distance\n * in number form, and will be positive to go to the right and negative for left\n *\/\n var findShortestDistance = function(from, to) {\n var goingToLeft = 1, goingToRight = 1, tracker;\n tracker = from;\n \/\/ see how long it takes to go to the left\n while ((tracker = getPreviousNum(tracker)) != to) {\n goingToLeft++;\n }\n\n tracker = from;\n \/\/ see how long it takes to to to the right\n while ((tracker = getNextNum(tracker)) != to) {\n goingToRight++;\n }\n\n \/\/ whichever is shorter\n return (goingToLeft < goingToRight) ? goingToLeft*-1 : goingToRight;\n }\n\n \/\/ Move to the left if left button clicked\n $(options.leftButtonTag).on('click',function () {\n initiateMove(false,1);\n });\n\n \/\/ Move to right if right button clicked\n $(options.rightButtonTag).on('click',function () {\n initiateMove(true,1);\n });\n\n \/\/ These are the click and hover events for the features\n pluginData.featuresContainer.find(\".carousel-feature\")\n .click(function () {\n var position = $(this).data('position');\n if (position == 2) {\n initiateMove(true,1);\n } else if (position == pluginData.totalFeatureCount) {\n initiateMove(false,1);\n }\n })\n .mouseover(function () {\n if (pluginData.currentlyMoving == false) {\n var position = $(this).data('position');\n if (position == 2 || position == pluginData.totalFeatureCount) {\n $(this).css(\"opacity\",0.8);\n }\n }\n \/\/ pause the rotation?\n if (options.pauseOnHover) setTimer(true);\n \/\/ stop the rotation?\n if (options.stopOnHover) options.autoPlay = 0;\n })\n .mouseout(function () {\n if (pluginData.currentlyMoving == false) {\n var position = $(this).data('position');\n if (position == 2 || position == pluginData.totalFeatureCount) {\n $(this).css(\"opacity\",0.4);\n }\n }\n \/\/ resume the rotation\n if (options.pauseOnHover) {\n setTimer(false);\n }\n });\n\n \/\/ Add event listener to all clicks within the features container\n \/\/ This is done to disable any links that aren't within the center feature\n $(\"a\", pluginData.containerIDTag).on(\"click\", function (event) {\n \/\/ travel up to the container\n var $parents = $(this).parentsUntil(pluginData.containerIDTag);\n \/\/ now check each of the feature divs within it\n $parents.each(function () {\n var position = $(this).data('position');\n \/\/ if there are more than just feature divs within the container, they will\n \/\/ not have a position and it may come back as undefined. Throw these out\n if (position != undefined) {\n \/\/ if any of the links on a feature OTHER THAN the center feature were clicked,\n \/\/ initiate a carousel move but then throw the link action away\n if (position != 1) {\n if (position == pluginData.totalFeatureCount) {\n initiateMove(false,1);\n } else if (position == 2) {\n initiateMove(true,1);\n }\n event.preventDefault();\n return false;\n \/\/ if the position WAS the center (i.e. 1), fire callback\n } else {\n options.clickedCenter($(this));\n }\n }\n });\n });\n\n \/\/ Did someone click one of the individual trackers?\n $(\".tracker-individual-blip\", pluginData.containerIDTag).on(\"click\",function () {\n \/\/ grab the position # that was clicked\n var goTo = $(this).attr(\"id\").substring(8);\n \/\/ find out where that feature # actually is in the carousel right now\n var whereIsIt = pluginData.featuresContainer.find(\".carousel-feature\").eq(goTo-1).data('position');\n \/\/ which feature # is currently in the center\n var currentlyAt = pluginData.currentCenterNum;\n \/\/ if the tracker was clicked for the current center feature, do nothing\n if (goTo != currentlyAt) {\n \/\/ find the shortest distance to move the carousel\n var shortest = findShortestDistance(1, whereIsIt);\n \/\/ initiate a move in that direction with given number of rotations\n if (shortest < 0) {\n initiateMove(false,(shortest*-1));\n } else {\n initiateMove(true,shortest);\n }\n }\n\n });\n \n \/****************\n PUBLIC FUNCTIONS \n ****************\/\n this.initialize = function () {\n \/\/ Call the preloader and pass in our callback, which is just a slew of function calls\n \/\/ that should only be executed after the images have been loaded\n preload(function () {\n setupFeatureDimensions();\n setupCarousel();\n setupFeaturePositions();\n setupTrackers();\n initiateMove(true,1);\n });\n\n return this;\n };\n \n this.next = function() {\n initiateMove(true, 1);\n }\n this.prev = function () {\n initiateMove(false, 1);\n }\n this.pause = function () {\n setTimer(true);\n }\n this.start = function () {\n setTimer(false);\n }\n \n \/\/ Initialize the plugin\n return this.initialize();\n};\n\n$.fn.featureCarousel.defaults = {\n \/\/ If zero, take original width and height of image\n \/\/ If between 0 and 1, multiply by original width and height (acts as a percentage)\n \/\/ If greater than one, use as a forced width\/height for all of the images\n largeFeatureWidth : 0,\n largeFeatureHeight:\t\t0,\n smallFeatureWidth: .5,\n smallFeatureHeight:\t\t.5,\n \/\/ how much to pad the top of the carousel\n topPadding: 20,\n \/\/ spacing between the sides of the container\n sidePadding: 50,\n \/\/ the additional offset to pad the side features from the top of the carousel\n smallFeatureOffset:\t\t50,\n \/\/ indicates which feature to start the carousel at\n startingFeature: 1,\n \/\/ speed in milliseconds it takes to rotate the carousel\n carouselSpeed: 1000,\n \/\/ time in milliseconds to set interval to autorotate the carousel\n \/\/ set to zero to disable it, negative to go left\n autoPlay: 4000,\n \/\/ with autoplay enabled, set this option to true to have the carousel pause rotating\n \/\/ when a user hovers over any feature\n pauseOnHover: true,\n \/\/ with autoplay enabled, set this option to completely stop the autorotate functionality\n \/\/ when a user hovers over any feature\n stopOnHover: false,\n \/\/ numbered blips can appear and be used to track the currently centered feature, as well as \n \/\/ allow the user to click a number to move to that feature. Set to false to not process these at all\n \/\/ and true to process and display them\n trackerIndividual: true,\n \/\/ a summation of the features can also be used to display an \"x Of y\" style of tracking\n \/\/ this can be combined with the above option as well\n trackerSummation: true,\n \/\/ true to preload all images in the carousel before displaying anything. If this is set to false,\n \/\/ you will probably need to set a fixed width\/height to prevent strangeness\n preload: true,\n \/\/ Will only display this many features in the carousel\n \/\/ set to zero to disable\n displayCutoff: 0,\n \/\/ an easing can be specified for the animation of the carousel\n animationEasing: 'swing',\n \/\/ selector for the left arrow of the carousel\n leftButtonTag: '#carousel-left',\n \/\/ selector for the right arrow of the carousel\n rightButtonTag: '#carousel-right',\n \/\/ display captions below the image instead of on top\n captionBelow: false,\n \/\/ callback function for when a feature has animated to the center\n movedToCenter: $.noop,\n \/\/ callback function for when feature left center\n leavingCenter: $.noop,\n \/\/ callback function for when center feature was clicked\n clickedCenter: $.noop,\n \/\/ callback function for when a feature has start moving to center\n movingToCenter: $.noop\n};\n\n})(jQuery);\n\n\/\/initialized\nvar carousel = $(\"#carousel\").featureCarousel({\nautoPlay:0,\ntrackerIndividual:false,\ntrackerSummation:false,\nsmallFeatureWidth:.6,\nsmallFeatureHeight:.6,\ntopPadding:0,\nsidePadding:0,\nsmallFeatureOffset:40,\ncarouselSpeed: 500,\nleftButtonTag: '#carousel-left',\nrightButtonTag: '#carousel-right',\n});\n<\/script>\n\n\n\n<div style=\"height:296px\" aria-hidden=\"true\" class=\"wp-block-spacer hidemobile height2\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e41\u0e04\u0e1b\u0e1b\u0e34\u0e17\u0e2d\u0e25 \u0e40\u0e2d\u0e47\u0e19\u0e08\u0e34\u0e40\u0e19\u0e35\u0e22\u0e23\u0e34\u0e48\u0e07 \u0e40\u0e19\u0e47\u0e15\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04 \u0e08\u0e33\u0e01\u0e31\u0e14 (\u0e21\u0e2b\u0e32\u0e0a\u0e19) \u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e41\u0e04\u0e1b\u0e1b\u0e34\u0e17\u0e2d\u0e25 \u0e40\u0e2d\u0e47\u0e19\u0e08\u0e34\u0e40\u0e19\u0e35\u0e22\u0e23\u0e34\u0e48\u0e07 \u0e40\u0e19\u0e47\u0e15\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04 \u0e23\u0e48\u0e27\u0e21\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e2a\u0e34\u0e48\u0e07\u0e14\u0e35\u0e46 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e31\u0e07\u0e04\u0e21 \u0e42\u0e14\u0e22\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e08\u0e32\u0e04\u0e23\u0e16\u0e40\u0e02\u0e47\u0e19\u0e41\u0e25\u0e30\u0e40\u0e15\u0e35\u0e22\u0e07\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e41\u0e01\u0e48\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e43\u0e19\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/p>","protected":false},"author":3,"featured_media":10114,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[13,6],"tags":[],"class_list":["post-10065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-news-activities"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/10065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/comments?post=10065"}],"version-history":[{"count":1,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/10065\/revisions"}],"predecessor-version":[{"id":10118,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/10065\/revisions\/10118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/media\/10114"}],"wp:attachment":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/media?parent=10065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/categories?post=10065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/tags?post=10065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Capital Engineering Network Public Co., Ltd. contributes to society by donating wheelchairs and beds to patients in need in the community at The Foundation for Community Health Under the Patronage of H.R.H. Princess Galyani Vadhana Krom Luang Naradhiwas Rajanagarindra On September 25, 2023<\/p>\n\n\n\n

<\/div>\n\n\n\n\n\n\n \n CodePen – featureCarousel<\/title>\n <link href=\"https:\/\/cdn.bootcss.com\/font-awesome\/4.7.0\/fonts\/fontawesome-webfont.svg\">\n<link href=\"https:\/\/cdn.bootcss.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\">\n<link rel=\"stylesheet\" href=\".\/style.css\">\n\n<\/head>\n<body>\n\n<div class=\"carousel-container\"> \n <div class=\"carousel-main\" id=\"carousel\">\n <div class=\"carousel-feature bg-1\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-1\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/8020E858-0F39-415C-AF3D-7FC776FCB255-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-2\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-2\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/7E247F94-BC11-41DB-ACD4-9A0A6BEC0698-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-2\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-2\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/62583C89-E414-41C9-B110-E7596EC2F7AF-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-3\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-3\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/D552BBF0-C748-407E-A0A3-2FA4A9EE014F-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-3\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-3\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/762B8447-646B-40CA-8B1A-7358AB59B58F-scaled.jpg\"><\/a>\n <\/div>\n\n <div class=\"carousel-feature bg-3\">\n <a class=\"carousel-link\" ><img loading=\"lazy\" decoding=\"async\" class=\"carousel-image\" alt=\"featureCarousel-3\" width=\"620\" height=\"500\" src=\"http:\/\/www.cenplc.com\/wp-content\/uploads\/2024\/02\/505D280F-1A79-4EBD-A885-04F85543D721-scaled.jpg\"><\/a>\n <\/div>\n <\/div>\n <p class=\"arrow-section\" >\n <a id=\"carousel-left\" style=\"font-size: 48px;color: white;\">\u276e<\/a>\n <a id=\"carousel-right\" style=\"font-size: 48px;color: white;\">\u276f<\/i>\n<\/a>\n <\/p>\n<\/div>\n\n <script src='https:\/\/code.jquery.com\/jquery-2.2.4.min.js'><\/script><script src=\".\/script.js\"><\/script>\n\n<\/body>\n<\/html>\n\n\n<script>\n \/*!\n * Feature Carousel, Version 1.3\n * http:\/\/www.bkosolutions.com\n *\n * Copyright 2011 Brian Osborne\n * Licensed under GPL version 3\n * brian@bkosborne.com\n *\n * http:\/\/www.gnu.org\/licenses\/gpl.txt\n *\/\n(function($) {\n\n$.fn.featureCarousel = function (options) {\n\n \/\/ Adds support for multiple carousels on one page\n if (this.length > 1) {\n this.each(function() {\n $(this).featureCarousel(options);\n });\n return this;\n }\n \n \/\/ override the default options with user defined options\n options = $.extend({}, $.fn.featureCarousel.defaults, options || {});\n\n \/* These are universal values that are used throughout the plugin. Do not modify them\n * unless you know what you're doing. Most of them feed off the options\n * so most customization can be achieved by modifying the options values *\/\n var pluginData = {\n currentCenterNum: options.startingFeature,\n containerWidth: 0,\n containerHeight: 0,\n largeFeatureWidth: 0,\n largeFeatureHeight: 0,\n smallFeatureWidth: 0,\n smallFeatureHeight: 0,\n totalFeatureCount: $(this).children(\"div\").length,\n currentlyMoving: false,\n featuresContainer: $(this),\n featuresArray: [],\n containerIDTag: \"#\"+$(this).attr(\"id\"),\n timeoutVar: null,\n rotationsRemaining: 0,\n itemsToAnimate: 0,\n borderWidth:\t\t\t 0\n };\n\n \/**\n * Function to preload the images in the carousel if desired.\n * This is not recommended if there are a lot of images in the carousel because\n * it may take a while. Functionality does not depend on preloading the images\n *\/\n var preload = function(callback) {\n \/\/ user may not want to preload images\n if (options.preload == true) {\n var $imageElements = pluginData.featuresContainer.find(\"img\");\n var loadedImages = 0;\n var totalImages = $imageElements.length;\n\n $imageElements.each(function (index, element) {\n \/\/ Attempt to load the images\t\t\t\t\t\n var img = new Image();\n $(img).bind('load error', function () {\n \/\/ Add to number of images loaded and see if they are all done yet\n loadedImages++;\n if (loadedImages == totalImages) {\n \/\/ All done, perform callback\n callback();\n }\n });\n \n img.src = element.src;\n });\n } else {\n \/\/ if user doesn't want preloader, then just go right to callback\n callback();\n }\n }\n\n \/\/ Gets the feature container based on the number\n var getContainer = function(featureNum) {\n return pluginData.featuresArray[featureNum-1];\n }\n\n \/\/ get a feature given it's set position (the position that doesn't change)\n var getBySetPos = function(position) {\n $.each(pluginData.featuresArray, function () {\n if ($(this).data().setPosition == position)\n return $(this);\n });\n }\n\n \/\/ get previous feature number\n var getPreviousNum = function(num) {\n if ((num - 1) == 0) {\n return pluginData.totalFeatureCount;\n } else {\n return num - 1;\n }\n }\n\n \/\/ get next feature number\n var getNextNum = function(num) {\n if ((num + 1) > pluginData.totalFeatureCount) {\n return 1;\n } else {\n return num + 1;\n }\n }\n\n \/**\n * Because there are several options the user can set for the width and height\n * of the feature images, this function is used to determine which options were set\n * and to set the appropriate dimensions used for a small and large feature\n *\/\n var setupFeatureDimensions = function() {\n \/\/ Set the height and width of the entire carousel container\n pluginData.containerWidth = pluginData.featuresContainer.width();\n pluginData.containerHeight = pluginData.featuresContainer.height();\n\n \/\/ Grab the first image for reference\n var $firstFeatureImage = $(pluginData.containerIDTag).find(\".carousel-image:first\");\n\n \/\/ Large Feature Width\n if (options.largeFeatureWidth > 1)\n pluginData.largeFeatureWidth = options.largeFeatureWidth;\n else if (options.largeFeatureWidth > 0 && options.largeFeatureWidth < 1)\n pluginData.largeFeatureWidth = $firstFeatureImage.width() * options.largeFeatureWidth;\n else\n pluginData.largeFeatureWidth = $firstFeatureImage.outerWidth();\n \/\/ Large Feature Height\n if (options.largeFeatureHeight > 1)\n pluginData.largeFeatureHeight = options.largeFeatureHeight;\n else if (options.largeFeatureHeight > 0 && options.largeFeatureHeight < 1)\n pluginData.largeFeatureHeight = $firstFeatureImage.height() * options.largeFeatureHeight;\n else\n pluginData.largeFeatureHeight = $firstFeatureImage.outerHeight();\n \/\/ Small Feature Width\n if (options.smallFeatureWidth > 1)\n pluginData.smallFeatureWidth = options.smallFeatureWidth;\n else if (options.smallFeatureWidth > 0 && options.smallFeatureWidth < 1)\n pluginData.smallFeatureWidth = $firstFeatureImage.width() * options.smallFeatureWidth;\n else\n pluginData.smallFeatureWidth = $firstFeatureImage.outerWidth() \/ 2;\n \/\/ Small Feature Height\n if (options.smallFeatureHeight > 1)\n pluginData.smallFeatureHeight = options.smallFeatureHeight;\n else if (options.smallFeatureHeight > 0 && options.smallFeatureHeight < 1)\n pluginData.smallFeatureHeight = $firstFeatureImage.height() * options.smallFeatureHeight;\n else\n pluginData.smallFeatureHeight = $firstFeatureImage.outerHeight() \/ 2;\n }\n\n \/**\n * Function to take care of setting up various aspects of the carousel,\n * most importantly the default positions for the features\n *\/\n var setupCarousel = function() {\n \/\/ Set the total feature count to the amount the user wanted to cutoff\n if (options.displayCutoff > 0 && options.displayCutoff < pluginData.totalFeatureCount) {\n pluginData.totalFeatureCount = options.displayCutoff;\n }\n\n \/\/ fill in the features array\n pluginData.featuresContainer.find(\".carousel-feature\").each(function (index) {\n if (index < pluginData.totalFeatureCount) {\n pluginData.featuresArray[index] = $(this);\n }\n });\n\n \/\/ Determine the total border width around the feature if there is one\n if (pluginData.featuresContainer.find(\".carousel-feature\").first().css(\"borderLeftWidth\") != \"medium\") {\n pluginData.borderWidth = parseInt(pluginData.featuresContainer.find(\".carousel-feature\").first().css(\"borderLeftWidth\"))*2;\n }\n\n \/\/ Place all the features in a center hidden position to start off\n pluginData.featuresContainer\n \/\/ Have to make the container relative positioning\n .find(\".carousel-feature\").each(function () {\n \/\/ Center all the features in the middle and hide them\n $(this).css({\n 'left': (pluginData.containerWidth \/ 2) - (pluginData.smallFeatureWidth \/ 2) - (pluginData.borderWidth \/ 2),\n 'width': pluginData.smallFeatureWidth,\n 'height': pluginData.smallFeatureHeight,\n 'top': options.smallFeatureOffset + options.topPadding,\n 'opacity': 0\n });\n })\n \/\/ Set all the images to small feature size\n .find(\".carousel-image\").css({\n 'width': pluginData.smallFeatureWidth\n });\n \n \/\/ set position to relative of captions if displaying below image\n if (options.captionBelow) {\n pluginData.featuresContainer.find('.carousel-caption').css('position','relative');\n }\n\n \/\/ figure out number of items that will rotate each time\n if (pluginData.totalFeatureCount < 4) {\n pluginData.itemsToAnimate = pluginData.totalFeatureCount;\n } else {\n pluginData.itemsToAnimate = 4;\n }\n\n \/\/ Hide story info and set the proper positioning\n pluginData.featuresContainer.find(\".carousel-caption\")\n .hide();\n }\n\n \/**\n * Here all the position data is set for the features.\n * This is an important part of the carousel to keep track of where\n * each feature within the carousel is\n *\/\n var setupFeaturePositions = function() {\n \/\/ give all features a set number that won't change so they remember their\n \/\/ original order\n $.each(pluginData.featuresArray, function (i) {\n $(this).data('setPosition',i+1);\n });\n\n \/\/ Go back one - This is done because we call the move function right away, which\n \/\/ shifts everything to the right. So we set the current center back one, so that\n \/\/ it displays in the center when that happens\n var oneBeforeStarting = getPreviousNum(options.startingFeature);\n pluginData.currentCenterNum = oneBeforeStarting;\n\n \/\/ Center feature will be position 1\n var $centerFeature = getContainer(oneBeforeStarting);\n $centerFeature.data('position',1);\n\n \/\/ Everything before that center feature...\n var $prevFeatures = $centerFeature.prevAll();\n $prevFeatures.each(function (i) {\n $(this).data('position',(pluginData.totalFeatureCount - i));\n });\n\n \/\/ And everything after that center feature...\n var $nextFeatures = $centerFeature.nextAll();\n $nextFeatures.each(function (i) {\n if ($(this).data('setPosition') != undefined) {\n $(this).data('position',(i + 2));\n }\n });\n\n \/\/ if the counter style is for including number tags in description...\n if (options.counterStyle == 'caption') {\n $.each(pluginData.featuresArray, function () {\n var pos = getPreviousNum($(this).data('position'));\n var $numberTag = $(\"<span><\/span>\");\n $numberTag.addClass(\"numberTag\");\n $numberTag.html(\"(\"+ pos + \" of \" + pluginData.totalFeatureCount + \") \");\n $(this).find('.carousel-caption p').prepend($numberTag);\n });\n }\n }\n\n \/**\n * This function will set up the two different types of trackers used\n *\/\n var setupTrackers = function()\n {\n if (options.trackerIndividual) {\n \/\/ construct the tracker list\n var $list = $(\"<ul><\/ul>\");\n $list.addClass(\"tracker-individual-container\");\n for (var i = 0; i < pluginData.totalFeatureCount; i++) {\n \/\/ item position one plus the index\n var counter = i+1;\n\n \/\/ Build the DOM for the tracker list\n var $trackerBlip = $(\"<div>\"+counter+\"<\/div>\");\n $trackerBlip.addClass(\"tracker-individual-blip\");\n $trackerBlip.css(\"cursor\",\"pointer\");\n $trackerBlip.attr(\"id\",\"tracker-\"+(i+1));\n var $listEntry = $(\"<li><\/li>\");\n $listEntry.append($trackerBlip);\n $listEntry.css(\"float\",\"left\");\n $listEntry.css(\"list-style-type\",\"none\");\n $list.append($listEntry);\n }\n \/\/ add the blip list and then make sure it's visible\n $(pluginData.containerIDTag).append($list);\n $list.hide().show();\n }\n \n if (options.trackerSummation) {\n \/\/ Build the tracker div that will hold the tracking data\n var $tracker = $('<div><\/div>');\n $tracker.addClass('tracker-summation-container');\n \/\/ Collect info in spans\n var $current = $('<span><\/span>').addClass('tracker-summation-current').text(options.startingFeature);\n var $total = $('<span><\/span>').addClass('tracker-summation-total').text(pluginData.totalFeatureCount);\n var $middle = $('<span><\/span>').addClass('tracker-summation-middle').text(' of ');\n \/\/ Add it all together\n $tracker.append($current).append($middle).append($total);\n \/\/ Insert into DOM\n $(pluginData.containerIDTag).append($tracker);\n }\n }\n\n \/\/ Update the tracker information with the new centered feature\n var updateTracker = function(oldCenter, newCenter) {\n if (options.trackerIndividual) {\n \/\/ get selectors for the two trackers\n var $trackerContainer = pluginData.featuresContainer.find(\".tracker-individual-container\");\n var $oldCenter = $trackerContainer.find(\"#tracker-\"+oldCenter);\n var $newCenter = $trackerContainer.find(\"#tracker-\"+newCenter);\n\n \/\/ change classes\n $oldCenter.removeClass(\"tracker-individual-blip-selected\");\n $newCenter.addClass(\"tracker-individual-blip-selected\");\n }\n \n if (options.trackerSummation) {\n var $trackerContainer = pluginData.featuresContainer.find('.tracker-summation-container');\n $trackerContainer.find('.tracker-summation-current').text(newCenter);\n }\n }\n\n \/**\n * This function will set the autoplay for the carousel to\n * automatically rotate it given the time in the options\n * pass in TRUE to just clear the timer\n *\/\n var setTimer = function(stop) {\n \/\/ clear the timeout var if it exists\n clearTimeout(pluginData.timeoutVar);\n\n \/\/ set interval for moving if autoplay is set\n if (!stop && options.autoPlay != 0) {\n var autoTime = (Math.abs(options.autoPlay) < options.carouselSpeed) ? options.carouselSpeed : Math.abs(options.autoPlay);\n pluginData.timeoutVar = setTimeout(function () {\n (options.autoPlay > 0) ? initiateMove(true,1) : initiateMove(false,1);\n }, autoTime);\n }\n }\n\n\n \/\/ This is a helper function for the animateFeature function that\n \/\/ will update the positions of all the features based on the direction\n var rotatePositions = function(direction) {\n $.each(pluginData.featuresArray, function () {\n var newPos;\n if (direction == false) {\n newPos = getNextNum($(this).data().position);\n } else {\n newPos = getPreviousNum($(this).data().position);\n }\n $(this).data('position',newPos);\n });\n }\n\n \/**\n * This function is used to animate the given feature to the given\n * location. Valid locations are \"left\", \"right\", \"center\", \"hidden\"\n *\/\n var animateFeature = function($feature, direction)\n {\n var new_width, new_height, new_top, new_left, new_zindex, new_padding, new_fade;\n\n \/\/ Determine the old and new positions of the feature\n var oldPosition = $feature.data('position');\n var newPosition;\n if (direction == true)\n newPosition = getPreviousNum(oldPosition);\n else\n newPosition = getNextNum(oldPosition);\n \n \/\/ callback for moving out of center pos\n if (oldPosition == 1) {\n options.leavingCenter($feature);\n }\n\n \/\/ Caculate new new css values depending on where the feature will be located\n if (newPosition == 1) {\n new_width = pluginData.largeFeatureWidth;\n new_height = pluginData.largeFeatureHeight;\n new_top = options.topPadding;\n new_zindex = $feature.css(\"z-index\");\n new_left = (pluginData.containerWidth \/ 2) - (pluginData.largeFeatureWidth \/ 2) - (pluginData.borderWidth \/ 2);\n new_fade = 1.0;\n } else {\n new_width = pluginData.smallFeatureWidth;\n new_height = pluginData.smallFeatureHeight;\n new_top = options.smallFeatureOffset + options.topPadding;\n new_zindex = 1;\n new_fade = 0.4;\n \/\/ some info is different for the left, right, and hidden positions\n \/\/ left\n if (newPosition == pluginData.totalFeatureCount) {\n new_left = options.sidePadding;\n \/\/ right\n } else if (newPosition == 2) {\n new_left = pluginData.containerWidth - pluginData.smallFeatureWidth - options.sidePadding - pluginData.borderWidth;\n \/\/ hidden\n } else {\n new_left = (pluginData.containerWidth \/ 2) - (pluginData.smallFeatureWidth \/ 2) - (pluginData.borderWidth \/ 2);\n new_fade = 0;\n }\n }\n \/\/ This code block takes care of hiding the feature information if the feature is leaving the center\n if (oldPosition == 1) {\n \/\/ Slide up the story information\n $feature.find(\".carousel-caption\")\n .hide();\n }\n\n \/\/ Animate the feature div to its new location\n $feature\n .animate(\n {\n width: new_width,\n height: new_height,\n top: new_top,\n left: new_left,\n opacity: new_fade\n },\n options.carouselSpeed,\n options.animationEasing,\n function () {\n \/\/ Take feature info out of hiding if new position is center\n if (newPosition == 1) {\n \/\/ need to set the height to auto to accomodate caption if displayed below image\n if (options.captionBelow)\n $feature.css('height','auto');\n \/\/ fade in the feature information\n $feature.find(\".carousel-caption\")\n .fadeTo(\"fast\",0.85);\n \/\/ callback for moved to center\n options.movedToCenter($feature);\n }\n \/\/ decrement the animation queue\n pluginData.rotationsRemaining = pluginData.rotationsRemaining - 1;\n \/\/ have to change the z-index after the animation is done\n $feature.css(\"z-index\", new_zindex);\n \/\/ change trackers if using them\n if (options.trackerIndividual || options.trackerSummation) {\n \/\/ just update the tracker once; once the new center feature has arrived in center\n if (newPosition == 1) {\n \/\/ figure out what item was just in the center, and what item is now in the center\n var newCenterItemNum = pluginData.featuresContainer.find(\".carousel-feature\").index($feature) + 1;\n var oldCenterItemNum;\n if (direction == false)\n oldCenterItemNum = getNextNum(newCenterItemNum);\n else\n oldCenterItemNum = getPreviousNum(newCenterItemNum);\n \/\/ now update the trackers\n updateTracker(oldCenterItemNum, newCenterItemNum);\n }\n }\n\n \/\/ did all the the animations finish yet?\n var divide = pluginData.rotationsRemaining \/ pluginData.itemsToAnimate;\n if (divide % 1 == 0) {\n \/\/ if so, set moving to false...\n pluginData.currentlyMoving = false;\n \/\/ change positions for all items...\n rotatePositions(direction);\n\n \/\/ and move carousel again if queue is not empty\n if (pluginData.rotationsRemaining > 0)\n move(direction);\n }\n \n \/\/ reset timer and auto rotate again\n setTimer(false);\n }\n )\n \/\/ select the image within the feature\n .find('.carousel-image')\n \/\/ animate its size down\n .animate({\n width: new_width,\n height: new_height\n },\n options.carouselSpeed,\n options.animationEasing)\n .end();\n }\n\n \/**\n * move the carousel to the left or to the right. The features that\n * will move into the four positions are calculated and then animated\n * rotate to the RIGHT when direction is TRUE and\n * rotate to the LEFT when direction is FALSE\n *\/\n var move = function(direction)\n {\n \/\/ Set the carousel to currently moving\n pluginData.currentlyMoving = true;\n\n \/\/ Obtain the new feature positions based on the direction that the carousel is moving\n var $newCenter, $newLeft, $newRight, $newHidden;\n if (direction == true) {\n \/\/ Shift features to the left\n $newCenter = getContainer(getNextNum(pluginData.currentCenterNum));\n $newLeft = getContainer(pluginData.currentCenterNum);\n $newRight = getContainer(getNextNum(getNextNum(pluginData.currentCenterNum)));\n $newHidden = getContainer(getPreviousNum(pluginData.currentCenterNum));\n pluginData.currentCenterNum = getNextNum(pluginData.currentCenterNum);\n } else {\n $newCenter = getContainer(getPreviousNum(pluginData.currentCenterNum));\n $newLeft = getContainer(getPreviousNum(getPreviousNum(pluginData.currentCenterNum)));\n $newRight = getContainer(pluginData.currentCenterNum);\n $newHidden = getContainer(getNextNum(pluginData.currentCenterNum));\n pluginData.currentCenterNum = getPreviousNum(pluginData.currentCenterNum);\n }\n\n \/\/ The z-index must be set before animations take place for certain movements\n \/\/ this makes the animations look nicer\n if (direction) {\n $newLeft.css(\"z-index\", 3);\n } else {\n $newRight.css(\"z-index\", 3);\n }\n $newCenter.css(\"z-index\", 4);\n \n \/\/ Fire moving to center event\n options.movingToCenter($newCenter);\n\n \/\/ Animate the features into their new positions\n animateFeature($newLeft, direction);\n animateFeature($newCenter, direction);\n animateFeature($newRight, direction);\n \/\/ Only want to animate the \"hidden\" feature if there are more than three\n if (pluginData.totalFeatureCount > 3) {\n animateFeature($newHidden, direction);\n }\n }\n\n \/\/ This is used to relegate carousel movement throughout the plugin\n \/\/ It will only initiate a move if the carousel isn't currently moving\n \/\/ It will set the animation queue to the number of rotations given\n var initiateMove = function(direction, rotations) {\n if (pluginData.currentlyMoving == false) {\n var queue = rotations * pluginData.itemsToAnimate;\n pluginData.rotationsRemaining = queue;\n move(direction);\n }\n }\n\n \/**\n * This will find the shortest distance to travel the carousel from\n * one position to another position. It will return the shortest distance\n * in number form, and will be positive to go to the right and negative for left\n *\/\n var findShortestDistance = function(from, to) {\n var goingToLeft = 1, goingToRight = 1, tracker;\n tracker = from;\n \/\/ see how long it takes to go to the left\n while ((tracker = getPreviousNum(tracker)) != to) {\n goingToLeft++;\n }\n\n tracker = from;\n \/\/ see how long it takes to to to the right\n while ((tracker = getNextNum(tracker)) != to) {\n goingToRight++;\n }\n\n \/\/ whichever is shorter\n return (goingToLeft < goingToRight) ? goingToLeft*-1 : goingToRight;\n }\n\n \/\/ Move to the left if left button clicked\n $(options.leftButtonTag).on('click',function () {\n initiateMove(false,1);\n });\n\n \/\/ Move to right if right button clicked\n $(options.rightButtonTag).on('click',function () {\n initiateMove(true,1);\n });\n\n \/\/ These are the click and hover events for the features\n pluginData.featuresContainer.find(\".carousel-feature\")\n .click(function () {\n var position = $(this).data('position');\n if (position == 2) {\n initiateMove(true,1);\n } else if (position == pluginData.totalFeatureCount) {\n initiateMove(false,1);\n }\n })\n .mouseover(function () {\n if (pluginData.currentlyMoving == false) {\n var position = $(this).data('position');\n if (position == 2 || position == pluginData.totalFeatureCount) {\n $(this).css(\"opacity\",0.8);\n }\n }\n \/\/ pause the rotation?\n if (options.pauseOnHover) setTimer(true);\n \/\/ stop the rotation?\n if (options.stopOnHover) options.autoPlay = 0;\n })\n .mouseout(function () {\n if (pluginData.currentlyMoving == false) {\n var position = $(this).data('position');\n if (position == 2 || position == pluginData.totalFeatureCount) {\n $(this).css(\"opacity\",0.4);\n }\n }\n \/\/ resume the rotation\n if (options.pauseOnHover) {\n setTimer(false);\n }\n });\n\n \/\/ Add event listener to all clicks within the features container\n \/\/ This is done to disable any links that aren't within the center feature\n $(\"a\", pluginData.containerIDTag).on(\"click\", function (event) {\n \/\/ travel up to the container\n var $parents = $(this).parentsUntil(pluginData.containerIDTag);\n \/\/ now check each of the feature divs within it\n $parents.each(function () {\n var position = $(this).data('position');\n \/\/ if there are more than just feature divs within the container, they will\n \/\/ not have a position and it may come back as undefined. Throw these out\n if (position != undefined) {\n \/\/ if any of the links on a feature OTHER THAN the center feature were clicked,\n \/\/ initiate a carousel move but then throw the link action away\n if (position != 1) {\n if (position == pluginData.totalFeatureCount) {\n initiateMove(false,1);\n } else if (position == 2) {\n initiateMove(true,1);\n }\n event.preventDefault();\n return false;\n \/\/ if the position WAS the center (i.e. 1), fire callback\n } else {\n options.clickedCenter($(this));\n }\n }\n });\n });\n\n \/\/ Did someone click one of the individual trackers?\n $(\".tracker-individual-blip\", pluginData.containerIDTag).on(\"click\",function () {\n \/\/ grab the position # that was clicked\n var goTo = $(this).attr(\"id\").substring(8);\n \/\/ find out where that feature # actually is in the carousel right now\n var whereIsIt = pluginData.featuresContainer.find(\".carousel-feature\").eq(goTo-1).data('position');\n \/\/ which feature # is currently in the center\n var currentlyAt = pluginData.currentCenterNum;\n \/\/ if the tracker was clicked for the current center feature, do nothing\n if (goTo != currentlyAt) {\n \/\/ find the shortest distance to move the carousel\n var shortest = findShortestDistance(1, whereIsIt);\n \/\/ initiate a move in that direction with given number of rotations\n if (shortest < 0) {\n initiateMove(false,(shortest*-1));\n } else {\n initiateMove(true,shortest);\n }\n }\n\n });\n \n \/****************\n PUBLIC FUNCTIONS \n ****************\/\n this.initialize = function () {\n \/\/ Call the preloader and pass in our callback, which is just a slew of function calls\n \/\/ that should only be executed after the images have been loaded\n preload(function () {\n setupFeatureDimensions();\n setupCarousel();\n setupFeaturePositions();\n setupTrackers();\n initiateMove(true,1);\n });\n\n return this;\n };\n \n this.next = function() {\n initiateMove(true, 1);\n }\n this.prev = function () {\n initiateMove(false, 1);\n }\n this.pause = function () {\n setTimer(true);\n }\n this.start = function () {\n setTimer(false);\n }\n \n \/\/ Initialize the plugin\n return this.initialize();\n};\n\n$.fn.featureCarousel.defaults = {\n \/\/ If zero, take original width and height of image\n \/\/ If between 0 and 1, multiply by original width and height (acts as a percentage)\n \/\/ If greater than one, use as a forced width\/height for all of the images\n largeFeatureWidth : 0,\n largeFeatureHeight:\t\t0,\n smallFeatureWidth: .5,\n smallFeatureHeight:\t\t.5,\n \/\/ how much to pad the top of the carousel\n topPadding: 20,\n \/\/ spacing between the sides of the container\n sidePadding: 50,\n \/\/ the additional offset to pad the side features from the top of the carousel\n smallFeatureOffset:\t\t50,\n \/\/ indicates which feature to start the carousel at\n startingFeature: 1,\n \/\/ speed in milliseconds it takes to rotate the carousel\n carouselSpeed: 1000,\n \/\/ time in milliseconds to set interval to autorotate the carousel\n \/\/ set to zero to disable it, negative to go left\n autoPlay: 4000,\n \/\/ with autoplay enabled, set this option to true to have the carousel pause rotating\n \/\/ when a user hovers over any feature\n pauseOnHover: true,\n \/\/ with autoplay enabled, set this option to completely stop the autorotate functionality\n \/\/ when a user hovers over any feature\n stopOnHover: false,\n \/\/ numbered blips can appear and be used to track the currently centered feature, as well as \n \/\/ allow the user to click a number to move to that feature. Set to false to not process these at all\n \/\/ and true to process and display them\n trackerIndividual: true,\n \/\/ a summation of the features can also be used to display an \"x Of y\" style of tracking\n \/\/ this can be combined with the above option as well\n trackerSummation: true,\n \/\/ true to preload all images in the carousel before displaying anything. If this is set to false,\n \/\/ you will probably need to set a fixed width\/height to prevent strangeness\n preload: true,\n \/\/ Will only display this many features in the carousel\n \/\/ set to zero to disable\n displayCutoff: 0,\n \/\/ an easing can be specified for the animation of the carousel\n animationEasing: 'swing',\n \/\/ selector for the left arrow of the carousel\n leftButtonTag: '#carousel-left',\n \/\/ selector for the right arrow of the carousel\n rightButtonTag: '#carousel-right',\n \/\/ display captions below the image instead of on top\n captionBelow: false,\n \/\/ callback function for when a feature has animated to the center\n movedToCenter: $.noop,\n \/\/ callback function for when feature left center\n leavingCenter: $.noop,\n \/\/ callback function for when center feature was clicked\n clickedCenter: $.noop,\n \/\/ callback function for when a feature has start moving to center\n movingToCenter: $.noop\n};\n\n})(jQuery);\n\n\/\/initialized\nvar carousel = $(\"#carousel\").featureCarousel({\nautoPlay:0,\ntrackerIndividual:false,\ntrackerSummation:false,\nsmallFeatureWidth:.6,\nsmallFeatureHeight:.6,\ntopPadding:0,\nsidePadding:0,\nsmallFeatureOffset:40,\ncarouselSpeed: 500,\nleftButtonTag: '#carousel-left',\nrightButtonTag: '#carousel-right',\n});\n<\/script>\n\n\n\n<div style=\"height:296px\" aria-hidden=\"true\" class=\"wp-block-spacer hidemobile height2\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e41\u0e04\u0e1b\u0e1b\u0e34\u0e17\u0e2d\u0e25 \u0e40\u0e2d\u0e47\u0e19\u0e08\u0e34\u0e40\u0e19\u0e35\u0e22\u0e23\u0e34\u0e48\u0e07 \u0e40\u0e19\u0e47\u0e15\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04 \u0e08\u0e33\u0e01\u0e31\u0e14 (\u0e21\u0e2b\u0e32\u0e0a\u0e19) \u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e41\u0e04\u0e1b\u0e1b\u0e34\u0e17\u0e2d\u0e25 \u0e40\u0e2d\u0e47\u0e19\u0e08\u0e34\u0e40\u0e19\u0e35\u0e22\u0e23\u0e34\u0e48\u0e07 \u0e40\u0e19\u0e47\u0e15\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04 \u0e23\u0e48\u0e27\u0e21\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e2a\u0e34\u0e48\u0e07\u0e14\u0e35\u0e46 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e31\u0e07\u0e04\u0e21 \u0e42\u0e14\u0e22\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e08\u0e32\u0e04\u0e23\u0e16\u0e40\u0e02\u0e47\u0e19\u0e41\u0e25\u0e30\u0e40\u0e15\u0e35\u0e22\u0e07\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e41\u0e01\u0e48\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e43\u0e19\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/p>","protected":false},"author":3,"featured_media":10114,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[13,6],"tags":[],"class_list":["post-10065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-news-activities"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/10065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/comments?post=10065"}],"version-history":[{"count":1,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/10065\/revisions"}],"predecessor-version":[{"id":10118,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/10065\/revisions\/10118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/media\/10114"}],"wp:attachment":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/media?parent=10065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/categories?post=10065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/tags?post=10065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}