diff --git a/package-lock.json b/package-lock.json
index 75b370569..af3ab0fc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3513,18 +3513,32 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
       "dev": true,
       "requires": {
-        "bn.js": "^4.4.0",
-        "brorand": "^1.0.1",
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
         "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.0"
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        },
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        }
       }
     },
     "emoji-regex": {
@@ -7539,6 +7553,11 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "photoswipe": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz",
+      "integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA=="
+    },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
diff --git a/package.json b/package.json
index 0227f7253..4c8804d99 100644
--- a/package.json
+++ b/package.json
@@ -8,14 +8,15 @@
     "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
   },
   "dependencies": {
-    "blurhash": "^1.1.3",
     "axios": "^0.21.1",
+    "blurhash": "^1.1.3",
     "buefy": "^0.9.4",
     "bulma": "^0.9.1",
     "css-vars-ponyfill": "^2.3.1",
     "mdi": "^2.2.43",
     "moment": "^2.25.3",
     "node-sass": "^4.14.1",
+    "photoswipe": "^4.1.3",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
diff --git a/src/classes/theme-helper/template-tags.php b/src/classes/theme-helper/template-tags.php
index db70879e6..c50fca4fc 100644
--- a/src/classes/theme-helper/template-tags.php
+++ b/src/classes/theme-helper/template-tags.php
@@ -218,88 +218,239 @@ function tainacan_the_collection_description() {
  *
  * @return string
  */
-function tainacan_the_media_component($media_items, $args) {
-	echo tainacan_get_the_media_component($media_items, $args);
+function tainacan_the_media_component($media_id, $media_items_thumbs, $media_items_main, $args) {
+	echo tainacan_get_the_media_component($media_id, $media_items_thumbs, $media_items_main, $args);
 }
 
 
 /**
- * Tainacan Gallery component, used to render document, attachments and other files
- *
- * @param array        $media_items_thumbs          Array of media items to be rendered inside smaller the carousel. Default to empty array
- * @param array        $media_items_main            Array of media items to be rendered inside main, bigger the carousel. Default to empty array
+ * Tainacan Media Gallery component, used to render document, attachments and other files
+ * 
+ * @param string       $media_id               ID to be added to the gallery div. If both main and thumbnail items are passed, each div ID will be posfixed with '-main' or '-thumbs'.
+ * @param array        $media_items_thumbs     Array of media items to be rendered inside smaller the carousel. Default to empty array
+ * @param array        $media_items_main       Array of media items to be rendered inside main, bigger the carousel. Default to empty array
  * @param array|string $args {
- *     Optional. Array of arguments.
- *
- *     @type bool        $render_main_gallery       Render a main gallery bellow the thumbnails carousel. Default false. 
- *     @type string      $before_main_div           String to be added before the main gallery div
- *     @type string      $after_main_div            String to be added after the main gallery div
- *     @type string      $before_thumbs_div         String to be added before the thumbs gallery div
- *     @type string      $after_thumbs_div          String to be added after the thumbs gallery div
- *     @type string      $before_main_ul            String to be added before the main gallery ul
- *     @type string      $after_main_ul             String to be added after the main gallery ul
- *     @type string      $before_thumbs_ul          String to be added before the thumbs gallery ul
- *     @type string      $after_thumbs_ul           String to be added after the thumbs gallery ul
- *     @type string      $class_main_div            Class to be added to the main gallery div
- *     @type string      $class_main_ul	            Class to be added to the main gallery ul
- *     @type string      $class_main_li             Class to be added to the main gallery li
- *     @type string      $class_thumbs_div          Class to be added to the thumbs gallery div
- *     @type string      $class_thumbs_ul           Class to be added to the thumbs gallery ul
- *     @type string      $class_thumbs_li           Class to be added to the thumbs gallery li
+ *   Optional. Array of arguments.
+ *     @type string      before_main_div       String to be added before the main gallery div
+ *     @type string      after_main_div        String to be added after the main gallery div
+ *     @type string      before_thumbs_div     String to be added before the thumbs gallery div
+ *     @type string      after_thumbs_div      String to be added after the thumbs gallery div
+ *     @type string      before_main_ul        String to be added before the main gallery ul
+ *     @type string      after_main_ul         String to be added after the main gallery ul
+ *     @type string      before_thumbs_ul      String to be added before the thumbs gallery ul
+ *     @type string      after_thumbs_ul       String to be added after the thumbs gallery ul
+ *     @type string      class_main_div        Class to be added to the main gallery div
+ *     @type string      class_main_ul	       Class to be added to the main gallery ul
+ *     @type string      class_main_li         Class to be added to the main gallery li
+ *     @type string      class_thumbs_div      Class to be added to the thumbs gallery div
+ *     @type string      class_thumbs_ul       Class to be added to the thumbs gallery ul
+ *     @type string      class_thumbs_li       Class to be added to the thumbs gallery li
+ *     @type bool        auto_play             Sets swiper to autoplay
+ *     @type integer     auto_play_delay       Sets swiper to autoplay delay in milisecs
+ *     @type bool        show_arrows           Shows swiper navigation arrows
+ *     @type bool        show_pagination       Shows swiper pagination
+ *     @type bool        pagination_type       Swiper pagination type ('bullets', 'fraction', 'progressbar')
+ *     @type bool        show_share_button     Shows share button on lightbox
  * }
  * @return string
  */
-function tainacan_get_the_media_component($media_items_thumbs = array(), $media_items_main = array(), $args = array()) {
+	
+function tainacan_get_the_media_component(
+	$media_id = 'tainacan-media-component',
+	$media_items_thumbs = array(),
+	$media_items_main = array(),
+	$args = array()
+) {
 	global $TAINACAN_BASE_URL;
 
-	// Modal layer for rendering photoswipe
-	echo tainacan_get_the_media_modal_layer();
-
-	//Necessary enqueues for the media component
-	wp_enqueue_style( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), TAINACAN_VERSION);
-	wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), TAINACAN_VERSION, true );	 
-	wp_enqueue_style( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css', array(), TAINACAN_VERSION);
-	wp_enqueue_style( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css', array(), TAINACAN_VERSION);
-	wp_enqueue_script( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js', array(), TAINACAN_VERSION, true );	 
-	wp_enqueue_script( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js', array(), TAINACAN_VERSION, true );
+	$args = array_merge(array(
+		'before_main_div' => '',
+		'after_main_div' => '',
+		'before_thumbs_div' => '',
+		'after_thumbs_div' => '',
+		'before_main_ul' => '',
+		'after_main_ul' => '',
+		'before_thumbs_ul' => '',
+		'after_thumbs_ul' => '',
+		'class_main_div' => '',
+		'class_main_ul' => '',
+		'class_main_li' => '',
+		'class_thumbs_div' => '',
+		'class_thumbs_ul' => '',
+		'class_thumbs_li' => '',
+		'auto_play' => false,
+		'auto_play_delay' => 3000,
+		'show_arrows' => false,
+		'show_pagination' => true,
+		'pagination_type' => 'bullets',
+		'show_share_button' => false
+	), $args);
 
+	$args['has_media_main'] = $media_items_main && is_array($media_items_main) && count($media_items_main);
+	$args['has_media_thumbs'] = $media_items_thumbs && is_array($media_items_thumbs) && count($media_items_thumbs);
+	$args['media_main_id'] = $args['has_media_thumbs'] ? ( $media_id . '-main' ) : $media_id;
+	$args['media_thumbs_id'] = $args['has_media_main'] ? ( $media_id . '-thumbs' ) : $media_id;
+	
+	// Modal lightbox layer for rendering photoswipe
+	add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
+	
 	wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/media-component.css', array(), TAINACAN_VERSION);
-	wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['swiper', 'photoswipe', 'photoswipe-skin'], TAINACAN_VERSION, true );
+	wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['tainacan-search'], TAINACAN_VERSION, true );
 ?>
 
-	<?php if ( isset($args['render_main_gallery']) && $args['render_main_gallery'] == true ) : ?>
+	<?php if ( $args['has_media_main'] ) : ?>
+		
+		<!-- Slider main container -->
 		<?php echo $args['before_main_div'] ?>
-		<div class="tainacan-media-component__swiper-main swiper-container <?php echo $args['class_main_div'] ?>">
+		<div id="<?php echo $args['media_main_id'] ?>" class="tainacan-media-component__swiper-main swiper-container <?php echo $args['class_main_div'] ?>">
+			
+			 <!-- Additional required wrapper -->
 			<?php echo $args['before_main_ul'] ?>
 			<ul class="swiper-wrapper <?php echo $args['class_main_ul'] ?>">
 				<?php foreach($media_items_main as $media_item) { ?>
 					<li class="swiper-slide <?php echo $args['class_main_li'] ?>">
-						<?php tainacan_get_single_attachment_as_html($media_item->ID) ?>
+						<?php echo $media_item ?>
 					</li>
 				<?php }; ?>
 			</ul>
 			<?php echo $args['before_main_ul'] ?>
+
+			<?php if ( $args['show_pagination'] ) : ?>
+				<!-- If we need pagination -->
+				<div class="swiper-pagination"></div>
+			<?php endif; ?>
+
+			<?php if ( $args['show_arrows'] ) : ?>
+				<!-- If we need navigation buttons -->
+				<div class="swiper-button-prev"></div>
+				<div class="swiper-button-next"></div>
+			<?php endif; ?>
 		</div>
 		<?php echo $args['after_main_div'] ?>
 	<?php endif; ?>
 
-	<?php echo $args['before_thumbs_div'] ?>
-	<div class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
-		<?php echo $args['before_thumbs_ul'] ?>
-		<ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>">
-			<?php foreach($media_items_thumbs as $media_item) { ?>
-				<li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>">
-					<?php echo wp_get_attachment_image($media_item->ID) ?>
-				</li>
-			<?php }; ?>
-		</ul>
-		<?php echo $args['before_thumbs_ul'] ?>
-	</div>
-	<?php echo $args['after_thumbs_div'] ?>
+	<?php if ( $args['has_media_thumbs'] ) : ?>
+
+		<!-- Slider main container -->
+		<?php echo $args['before_thumbs_div'] ?>
+		<div id="<?php echo $args['media_thumbs_id'] ?>" class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
+			
+			<!-- Additional required wrapper -->
+			<?php echo $args['before_thumbs_ul'] ?>
+			<ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>">
+				<?php foreach($media_items_thumbs as $media_item) { ?>
+					<li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>">
+						<?php echo $media_item ?>
+					</li>
+				<?php }; ?>
+			</ul>
+			<?php echo $args['before_thumbs_ul'] ?>
+
+			<?php if ( $args['show_pagination'] ) : ?>
+				<!-- If we need pagination -->
+				<div class="swiper-pagination"></div>
+			<?php endif; ?>
+
+			<?php if ( $args['show_arrows'] ) : ?>
+				<!-- If we need navigation buttons -->
+				<div class="swiper-button-prev"></div>
+				<div class="swiper-button-next"></div>
+			<?php endif; ?>
+		</div>
+		<?php echo $args['after_thumbs_div'] ?>
+	<?php endif; ?>
+
+	<?php 
+		wp_add_inline_script( 'tainacan-media-component', "
+			tainacan_plugin.tainacan_media_components = (typeof tainacan_plugin != undefined && typeof tainacan_plugin.tainacan_media_components != 'undefined') ? tainacan_plugin.tainacan_media_components : [];
+			tainacan_plugin.tainacan_media_components.push(JSON.parse('" . json_encode($args) . "'));
+		", 'before' ); 
+	?>
 	
 <?php
 }
 
+
+/**
+ * Tainacan Media Item for the Media Gallery component, used to render a single link displayed in the carousel
+ * 
+ * @param array|string $args {
+ *   Optional. Array of arguments.
+ *     @type string      before_slide_content    String to be added before the slide-content div or a tag
+ *     @type string      after_slide_content     String to be added after the slide-content div or a tag
+ *     @type string      class_slide_content     Class to be added to the slide-content div or a tag
+ *     @type string      before_slide_metadata   String to be added before the slide-metadata div
+ *     @type string      after_slide_metadata    String to be added after the slide-metadata div
+ *     @type string      class_slide_metadata    Class to be added to the slide-metadata div
+ *     @type mixed       media_content           The content of the slide itself, such as an image, audio, video or iframe tag
+ *     @type string      media_full_link         A link to wrap the content, possibly to show a full version in the main modal. If this is passed, the slide-content div is rendered as an a tag
+ *     @type string      media_title             The media title, if available
+ *     @type string      media_description       The media description, if available
+ *     @type string      media_caption           The media caption, if available
+ * }
+ * @return string
+ */
+	
+function tainacan_get_the_media_component_slide( $args = array() ) {
+
+	$args = array_merge(array(
+		'before_slide_content' => '',
+		'after_slide_content' => '',
+		'class_slide_content' => '',
+		'before_slide_metadata' => '',
+		'after_slide_metadata' => '',
+		'class_slide_metadata' => '',
+		'media_content' => '',
+		'media_full_link' => '',
+		'media_title' => '',
+		'media_description' => '',
+		'media_caption' => '',
+	), $args);
+
+	ob_start();
+
+	if ( !empty($args['media_content']) ) : ?>
+
+		<?php echo $args['before_slide_content'] ?>
+		<?php if ($args['media_full_link']) : ?>
+			<a class="swiper-slide-content <?php echo $args['class_slide_content'] ?>" href="<?php echo $args['media_full_link'] ?>">
+		<?php else: ?>
+			<div class="swiper-slide-content <?php echo $args['class_slide_content'] ?>">
+		<?php endif; ?>
+				<?php echo $args['media_content'] ?>
+				
+				<?php echo $args['before_slide_metadata'] ?>
+
+				<?php if ( !empty($args['media_title']) || !empty($args['description']) || !empty($args['media_caption']) ) :?>
+					<div class="swiper-slide-metadata">
+						<?php if ( !empty($args['media_title']) ) :?>
+							<span class="swiper-slide-metadata__name"><?php echo $args['media_title'] ?></span>
+						<?php endif; ?>
+						<?php if ( !empty($args['media_description']) ) :?>
+							<span class="swiper-slide-metadata__description"><?php echo $args['media_description'] ?></span>
+						<?php endif; ?>
+						<?php if ( !empty($args['media_caption']) ) :?>
+							<span class="swiper-slide-metadata__caption"><?php echo $args['media_caption'] ?></span>
+						<?php endif; ?>
+					</div>
+				<?php endif; ?>
+
+				<?php echo $args['after_slide_metadata'] ?>
+		<?php if ($args['media_full_link']) : ?>
+			</a>
+		<?php else: ?>
+			</div>
+		<?php endif; ?>
+		<?php echo $args['after_slide_content'] ?>
+		
+	<?php endif;
+
+	$content = ob_get_contents();
+	ob_end_clean();
+
+	return $content;
+}
+
 /**
  * Div with content necessay to render the photowipe modal
  *
@@ -307,8 +458,7 @@ function tainacan_get_the_media_component($media_items_thumbs = array(), $media_
  */
 function tainacan_get_the_media_modal_layer() {
 ?> 
-    <!-- add PhotoSwipe (.pswp) element to DOM - 
-    Root element of PhotoSwipe. Must have class pswp. -->
+    <!-- Root element of PhotoSwipe lightbox. Must have class pswp. -->
     <div class="tainacan-photoswipe-layer pswp" tabindex="-1" role="dialog" aria-hidden="true">
 
         <!-- Background of PhotoSwipe. 
@@ -481,9 +631,7 @@ function tainacan_is_view_mode_enabled($view_mode_slug) {
  */
 function tainacan_the_faceted_search($args = array()) {
 	$theme_helper = \Tainacan\Theme_Helper::get_instance();
-	// echo $theme_helper->get_tainacan_items_list($args);
-	$attachments = tainacan_get_the_attachments();
-	tainacan_the_media_component($attachments, $attachments, ['render_main_gallery' => true, 'class_main_div' => 'teste']);
+	echo $theme_helper->get_tainacan_items_list($args);
 }
 
 /**
diff --git a/src/views/class-tainacan-admin.php b/src/views/class-tainacan-admin.php
index e8467eb7c..93d5969db 100644
--- a/src/views/class-tainacan-admin.php
+++ b/src/views/class-tainacan-admin.php
@@ -220,7 +220,7 @@ class Admin {
 		$tainacan_admin_i18n['entities_labels'] = $entities_labels;
 
 		$components = ( has_filter( 'tainacan_register_web_components' ) ) ? apply_filters( 'tainacan_register_web_components' ) : [];
-
+	
 		$cur_user  = wp_get_current_user();
 		$user_caps = array();
 		$prefs     = array();
diff --git a/src/views/media-component/media-component.js b/src/views/media-component/media-component.js
index ea2ead5ae..560228368 100644
--- a/src/views/media-component/media-component.js
+++ b/src/views/media-component/media-component.js
@@ -1,83 +1,39 @@
-// TAINACAN MEDIA GALLERY --------------------------------------------------------
+// TAINACAN MEDIA COMPONENT --------------------------------------------------------
 //
-// Counts on some markup to make a list of media link be displayed
-// as a carousel with a lightbox. It can be used in two modes:
-
-/*
-
--- MODE 1 ---- Carousel of thumbnails only ----------------------------------------
-
-<div class="swiper-container-thumbs swiper-container">
-  <ul class="swiper-wrapper">
-    <li class="swiper-slide">
-      <a href="link-to-full-image-or-file">
-        <img href="link-to-thumbnail" alt..>
-        <span class="swiper-slide-name>File name</span>
-      </a>
-    </li>
-  </ul>
-</div>
-
-new TainacanMediaGallery(.swiper-container-thumbs, null, {...});
-
-
--- MODE 2 ---- Carousel of thumbnails with main slider ----------------------------
-
-<div class="swiper-container-main swiper-container">
-  <ul class="swiper-wrapper">
-    <li class="swiper-slide">
-      <a href="link-to-full-image-or-file">
-        <img href="link-to-medium-or-large" alt..>
-        <span class="swiper-slide-name>File name</span>
-        
-      </a>
-    </li>
-  </ul>
-</div>
-<div class="swiper-container-thumbs swiper-container">
-  <ul class="swiper-wrapper">
-    <li class="swiper-slide">
-      <img href="link-to-thumbnail" alt..>
-      <span class="swiper-slide-name>File name</span>
-    </li>
-  </ul>
-</div>
-
-new TainacanMediaGallery(.swiper-container-thumbs, .swiper-container-main, {...});
-
-*/
+// Counts on some HMTL markup to make a list of media link be displayed
+// as a carousel with a lightbox. Check examples in the end of the file 
+import PhotoSwipe from 'photoswipe/dist/photoswipe.js';
+import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
 
 class TainacanMediaGallery {
 
     /**
-     * constructor initializes the instance
-     * @param  {String}  thumbnailsGallerySelector      html element to be queried containing the thumbnails list
-     * @param  {String}  mainGallerySelector            html element to be queried containing the main list
-     * @param  {Object}  options                        several options to be tweaked
-     * @param  {Boolean} options.autoPlay               sets swiper to autoplay
-     * @param  {Number}  options.autoPlayDelay          sets swiper to autoplay dealy in milisecs
-     * @param  {Boolean} options.showCarouselArrows     shows swiper navigation arrows
-     * @param  {Boolean} options.showCarouselDots       shows swiper naviagation dots
-     * @param  {Boolean} options.showShareButton        shows share button on lightbox
-     * @param  {Boolean} options.showTitle              shows file title on lightbox
-     * @param  {Boolean} options.showCaption            shows file caption on lightbox
-     * @param  {Boolean} options.showDescription        shows file description on 
+     * Constructor initializes the instance. Options are Snake Case because they come from PHP side
+     * @param  {String}  thumbs_gallery_selector       html element to be queried containing the thumbnails list
+     * @param  {String}  main_gallery_selector         html element to be queried containing the main list
+     * @param  {Object}  options                       several options to be tweaked
+     * @param  {Boolean} options.auto_play             sets swiper to autoplay
+     * @param  {Number}  options.auto_play_delay       sets swiper to autoplay delay in milisecs
+     * @param  {Boolean} options.show_arrows           shows swiper navigation arrows
+     * @param  {Boolean} options.show_pagination       shows swiper pagination
+     * @param  {Boolean} options.pagination_type       swiper pagination type ('bullets', 'fraction', 'progressbar')
+     * @param  {Boolean} options.show_share_button     shows share button on lightbox
      * 
-     * @return {Object}                                 TainacanMediaGallery instance
+     * @return {Object}                                TainacanMediaGallery instance
      */
-    constructor(thumbnailsGallerySelector, mainGallerySelector, options) {
-        this.thumbnailsGallerySelector = thumbnailsGallerySelector;
-        this.mainGallerySelector = mainGallerySelector;
+    constructor(thumbs_gallery_selector, main_gallery_selector, options) {
+        this.thumbs_gallery_selector = thumbs_gallery_selector;
+        this.main_gallery_selector = main_gallery_selector;
         this.thumbsSwiper = null;
         this.mainSwiper = null;
         this.options = options;
     
         this.initializeSwiper();
         
-        if (this.mainGallerySelector)
-            this.initPhotoSwipeFromDOM(this.mainGallerySelector + " .swiper-wrapper");
-        else if (this.thumbnailsGallerySelector)
-            this.initPhotoSwipeFromDOM(this.thumbnailsGallerySelector + " .swiper-wrapper");
+        if (this.main_gallery_selector)
+            this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
+        else if (this.thumbs_gallery_selector)
+            this.initPhotoSwipeFromDOM(this.thumbs_gallery_selector + " .swiper-wrapper");
     }
   
     /* Initializes Swiper JS instances of carousels */
@@ -85,45 +41,55 @@ class TainacanMediaGallery {
   
         let autoPlay = false;
     
-        if (this.options.autoPlay) {
+        if (this.options.auto_play) {
             autoPlay = {
-            delay: this.options.autoPlayDelay ? this.options.autoPlayDelay : 3000
+            delay: this.options.auto_play_delay ? this.options.auto_play_delay : 3000
             };
         }
         
-        if (this.thumbnailsGallerySelector) {
-    
-            const thumbnailSwiperOptions = {
-            spaceBetween: 16,
-            slidesPerView: 'auto',
-            navigation: {
-                nextEl: '.swiper-button-next',
-                prevEl: '.swiper-button-prev',
-            },
-            autoplay: autoPlay,
-            centerInsufficientSlides: true
+        if (this.thumbs_gallery_selector) {
+            const thumbSwiperOptions = {
+                spaceBetween: 16,
+                slidesPerView: 'auto',
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                },
+                pagination: {
+                    el: '.swiper-pagination',
+                    type: 'fraction',
+                },
+                autoplay: autoPlay,
+                centerInsufficientSlides: true
             };
-            this.thumbsSwiper = new Swiper(this.thumbnailsGallerySelector, thumbnailSwiperOptions);
+            this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbSwiperOptions);
         }
     
-        if (this.mainGallerySelector) {
+        if (this.main_gallery_selector) {
     
             let mainSwiperOptions = {
-            slidesPerView: 1,
-            slidesPerGroup: 1,
-            navigation: {
-                nextEl: '.swiper-button-next',
-                prevEl: '.swiper-button-prev',
-            },
-            autoplay: autoPlay,
+                slidesPerView: 1,
+                slidesPerGroup: 1,
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                },
+                pagination: {
+                    el: '.swiper-pagination',
+                    type: 'progressbar',
+                },
             };
             if (this.thumbsSwiper) {
-            mainSwiperOptions.thumbs = {
-                swiper: this.thumbsSwiper,
-                autoScrollOffset: 1
+                mainSwiperOptions.thumbs = {
+                    swiper: this.thumbsSwiper,
+                    autoScrollOffset: 1
+                }
+            } else {
+                mainSwiperOptions.thumbs = {
+                    autoplay: autoPlay,
+                }
             }
-            }
-            this.mainSwiper = new Swiper(this.mainGallerySelector, mainSwiperOptions);
+            this.mainSwiper = new Swiper(this.main_gallery_selector, mainSwiperOptions);
     
         }
     }
@@ -218,7 +184,7 @@ class TainacanMediaGallery {
             captionEl: true,
             fullscreenEl: true,
             zoomEl: true,
-            shareEl: this.options.showShareButton ? this.options.showShareButton : false,
+            shareEl: this.options.show_share_button ? this.options.show_share_button : false,
             counterEl: true,
             arrowEl: true,
             preloaderEl: true,
@@ -363,9 +329,61 @@ class TainacanMediaGallery {
         return params;
     }
 }
-  
-new TainacanMediaGallery(
-    '.tainacan-media-component__swiper-thumbs',
-    '.tainacan-media-component__swiper-main',
-    { autoPlay: true, autoPlayDelay: 7000 }
-);
\ No newline at end of file
+
+/* Loads and instantiates media components passed to the global variable */
+document.addEventListener('DOMContentLoaded', function() {
+    if (tainacan_plugin.tainacan_media_components && tainacan_plugin.tainacan_media_components.length) {
+        tainacan_plugin.tainacan_media_components.forEach((component) => {
+            new TainacanMediaGallery(
+                component.media_thumbs_id ? '#' + component.media_thumbs_id : null,
+                component.media_main_id ? '#' + component.media_main_id : null,
+                component
+            );
+        });
+    }
+});
+
+
+/*
+
+---- Carousel of thumbnails only ----------------------------------------
+
+<div class="swiper-container-thumbs swiper-container">
+  <ul class="swiper-wrapper">
+    <li class="swiper-slide">
+      <a href="link-to-full-image-or-file">
+        <img href="link-to-thumbnail" alt..>
+        <span class="swiper-slide-name>File name</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+new TainacanMediaGallery(.swiper-container-thumbs, null, {...});
+
+
+---- Carousel of thumbnails with main slider ----------------------------
+
+<div class="swiper-container-main swiper-container">
+  <ul class="swiper-wrapper">
+    <li class="swiper-slide">
+      <a href="link-to-full-image-or-file">
+        <img href="link-to-medium-or-large" alt..>
+        <span class="swiper-slide-name>File name</span>
+        
+      </a>
+    </li>
+  </ul>
+</div>
+<div class="swiper-container-thumbs swiper-container">
+  <ul class="swiper-wrapper">
+    <li class="swiper-slide">
+      <img href="link-to-thumbnail" alt..>
+      <span class="swiper-slide-name>File name</span>
+    </li>
+  </ul>
+</div>
+
+new TainacanMediaGallery(.swiper-container-thumbs, .swiper-container-main, {...});
+
+*/
\ No newline at end of file
diff --git a/webpack.common.js b/webpack.common.js
index c7f00f9a6..94122d9a6 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,4 +1,5 @@
 let path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
     entry: {
@@ -103,5 +104,11 @@ module.exports = {
     },
     performance: {
         hints: false
-    }
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            'Swiper': 'Swiper',
+            'PhotoSwipe': 'PhotoSwipe'
+        })
+    ]
 };
\ No newline at end of file