\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<!-- partial:index.partial.html -->\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:\/\/cen.codex.co.th\/wp-content\/uploads\/2023\/09\/sub1news_0042.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:\/\/cen.codex.co.th\/wp-content\/uploads\/2023\/09\/sub2news_0042.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:\/\/cen.codex.co.th\/wp-content\/uploads\/2023\/09\/sub3news_0042.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:\/\/cen.codex.co.th\/wp-content\/uploads\/2023\/09\/news_0042.jpg\"><\/a>\n <\/div>\n\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<!-- partial -->\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:100px\" aria-hidden=\"true\" class=\"wp-block-spacer hidemobile height2\"><\/div>","protected":false},"excerpt":{"rendered":"<p>RCI shareholders' meeting 59 years.<\/p>","protected":false},"author":1,"featured_media":5551,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[14,6],"tags":[],"class_list":["post-5550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-news-activities"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/5550","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/comments?post=5550"}],"version-history":[{"count":4,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/5550\/revisions"}],"predecessor-version":[{"id":9754,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/posts\/5550\/revisions\/9754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/media\/5551"}],"wp:attachment":[{"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/media?parent=5550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/categories?post=5550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cenplc.com\/en\/wp-json\/wp\/v2\/tags?post=5550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}