diff --git a/app/code/WeltPixel/Backend/Block/Adminhtml/Debugger.php b/app/code/WeltPixel/Backend/Block/Adminhtml/Debugger.php
new file mode 100644
index 0000000000000000000000000000000000000000..bb9e166d9111a0c0c68acfa2bb1405329c7c3949
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Block/Adminhtml/Debugger.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace WeltPixel\Backend\Block\Adminhtml;
+
+/**
+ * Class Debugger
+ * @package WeltPixel\Backend\Block\Adminhtml
+ */
+class Debugger extends  \Magento\Backend\Block\Widget\Grid\Container
+{
+    protected function _construct()
+    {
+        $this->_controller = 'weltpixelbackend_debugger';
+        $this->_blockGroup = 'WeltPixel_Backend';
+        parent::_construct();
+        $this->removeButton('add');
+        $this->addButton(
+            'only-custom',
+            [
+                'label' => __("Only Custom Modules"),
+                'onclick' => 'setLocation(\'' . $this->getUrl('*/*/rewritescustom') . '\')',
+                'class' => 'primary'
+            ]
+        );
+        $this->addButton(
+            'all-core',
+            [
+                'label' => __("All Magento Modules"),
+                'onclick' => 'setLocation(\'' . $this->getUrl('*/*/rewritesall') . '\')',
+                'class' => 'secondary'
+            ]
+        );
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Block/Adminhtml/Grid/Renderer/RewriteStatus.php b/app/code/WeltPixel/Backend/Block/Adminhtml/Grid/Renderer/RewriteStatus.php
new file mode 100644
index 0000000000000000000000000000000000000000..d3ff0816cbda7258758ff4965cf29c3a8942fd2d
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Block/Adminhtml/Grid/Renderer/RewriteStatus.php
@@ -0,0 +1,28 @@
+<?php
+namespace WeltPixel\Backend\Block\Adminhtml\Grid\Renderer;
+
+/**
+ * Class RewriteStatus
+ * @package WeltPixel\Backend\Block\Adminhtml\Grid\Renderer
+ */
+class RewriteStatus extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
+{
+
+    /**
+     * Prepare link to display in grid
+     *
+     * @param \Magento\Framework\DataObject $row
+     * @return string
+     */
+    public function render(\Magento\Framework\DataObject $row)
+    {
+        $statusClass = 'ok';
+        $statusMessage = __('OK');
+        if (!$row->getStatus()) {
+            $statusClass = 'nok';
+            $statusMessage = __('CHECK REWRITE');
+        }
+
+        return '<span class="rewrite-status rewrite-status-'.$statusClass.'">' . $statusMessage .'</span>';
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Block/Adminhtml/ModulesVersion.php b/app/code/WeltPixel/Backend/Block/Adminhtml/ModulesVersion.php
new file mode 100644
index 0000000000000000000000000000000000000000..be256918ea590f58e2634b53f4c47f3329208f55
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Block/Adminhtml/ModulesVersion.php
@@ -0,0 +1,157 @@
+<?php
+
+namespace WeltPixel\Backend\Block\Adminhtml;
+
+/**
+ * Class ModulesVersion
+ * @package WeltPixel\Backend\Block\Adminhtml
+ */
+class ModulesVersion extends  \Magento\Backend\Block\Template
+{
+    CONST MODULE_VERSIONS = 'https://www.weltpixel.com/weltpixel_extensions.json';
+
+    /**
+     * @var \Magento\Framework\App\DeploymentConfig
+     */
+    protected $deploymentConfig;
+
+    /**
+     * @var \Magento\Framework\Component\ComponentRegistrarInterface
+     */
+    protected $componentRegistrar;
+
+    /**
+     * @var \Magento\Framework\Filesystem\Directory\ReadFactory
+     */
+    protected $readFactory;
+
+    /**
+     * @var array
+     */
+    protected $latestVersions;
+
+    /**
+     * @param \Magento\Framework\App\DeploymentConfig $deploymentConfig
+     * @param \Magento\Framework\Component\ComponentRegistrarInterface $componentRegistrar
+     * @param \Magento\Framework\Filesystem\Directory\ReadFactory $readFactory
+     * @param \Magento\Backend\Block\Template\Context $context
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Framework\App\DeploymentConfig $deploymentConfig,
+        \Magento\Framework\Component\ComponentRegistrarInterface $componentRegistrar,
+        \Magento\Framework\Filesystem\Directory\ReadFactory $readFactory,
+        \Magento\Backend\Block\Template\Context $context,
+        array $data = [])
+    {
+        $this->deploymentConfig = $deploymentConfig;
+        $this->readFactory = $readFactory;
+        $this->componentRegistrar = $componentRegistrar;
+        $this->latestVersions = $this->getModulesLatestVersions();
+        parent::__construct($context, $data);
+    }
+
+    /**
+     * @return array
+     */
+    protected function getModulesLatestVersions() {
+        $curl = curl_init(self::MODULE_VERSIONS);
+
+        curl_setopt($curl, CURLOPT_HEADER, 0);
+        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
+        $response = curl_exec($curl);
+
+        $latestVersions = json_decode($response, true);
+
+        return $latestVersions;
+    }
+
+
+    /**
+     * @return array
+     */
+    public function getModuleVersions() {
+        $this->getModulesLatestVersions();
+        $modules = $this->deploymentConfig->get('modules');
+
+        $moduleDetails = [];
+
+        foreach ($modules as $moduleName => $isEnabled) {
+            if (strpos($moduleName, 'WeltPixel_') !== false ) {
+                $moduleDetails[$moduleName]['enabled'] = $isEnabled;
+                $moduleDetails[$moduleName]['version'] = $this->getComposerVersion($moduleName, \Magento\Framework\Component\ComponentRegistrar::MODULE);
+                if (isset($this->latestVersions['modules'][$moduleName]['version']))  {
+                    $moduleDetails[$moduleName]['latest_version'] = $this->latestVersions['modules'][$moduleName]['version'];
+                    $moduleDetails[$moduleName]['theme_module'] = $this->latestVersions['modules'][$moduleName]['theme_module'];
+                } else {
+                    $moduleDetails[$moduleName]['latest_version'] = __('N/A');
+                    $moduleDetails[$moduleName]['theme_module'] = false;
+                }
+                /** Adding latest version comparison messages */
+                if ($moduleDetails[$moduleName]['version'] == $moduleDetails[$moduleName]['latest_version']) {
+                    $moduleDetails[$moduleName]['status_message'] = __('Up to Date');
+                    $moduleDetails[$moduleName]['status'] = true;
+                } else {
+                    $moduleDetails[$moduleName]['status_message'] = __('Update needed');
+                    $moduleDetails[$moduleName]['status'] = false;
+                }
+            }
+        }
+
+        return $moduleDetails;
+    }
+
+    /**
+     * @return array
+     */
+    public function getThemeVersions() {
+        $themeDetails = [];
+
+        $themes = [
+            'Pearl' => 'frontend/Pearl/weltpixel',
+            'Pearl custom' => 'frontend/Pearl/weltpixel_custom'
+        ];
+        foreach ($themes as $name => $theme) {
+            $themeVersion =  $this->getComposerVersion($theme, \Magento\Framework\Component\ComponentRegistrar::THEME);
+            if ($themeVersion != 'N/A') {
+                $themeDetails[$name]['version'] = $themeVersion;
+                if (isset($this->latestVersions['themes'][$name]))  {
+                    $themeDetails[$name]['latest_version'] = $this->latestVersions['themes'][$name];
+                } else {
+                    $themeDetails[$name]['latest_version'] = __('N/A');
+                }
+                /** Adding latest version comparison messages */
+                if ($themeDetails[$name]['version'] == $themeDetails[$name]['latest_version']) {
+                    $themeDetails[$name]['status_message'] = __('Up to Date');
+                    $themeDetails[$name]['status'] = true;
+                } else {
+                    $themeDetails[$name]['status_message'] = __('Update needed');
+                    $themeDetails[$name]['status'] = false;
+                }
+            }
+        }
+
+        return $themeDetails;
+    }
+
+    /**
+     * @param $moduleName
+     * @return string
+     */
+    protected function getComposerVersion($moduleName, $type) {
+        $path = $this->componentRegistrar->getPath(
+            $type,
+            $moduleName
+        );
+
+        if (!$path) {
+            return __('N/A');
+        }
+
+        $dirReader = $this->readFactory->create($path);
+        $composerJsonData = $dirReader->readFile('composer.json');
+        $data = json_decode($composerJsonData, true);
+        return $data['version'];
+
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Block/Adminhtml/System/Config/Extensions.php b/app/code/WeltPixel/Backend/Block/Adminhtml/System/Config/Extensions.php
new file mode 100644
index 0000000000000000000000000000000000000000..243596b4f8d2b6eaab16f7c5107fdcf9a017e63f
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Block/Adminhtml/System/Config/Extensions.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace WeltPixel\Backend\Block\Adminhtml\System\Config;
+
+/**
+ * Class Extensions
+ * @package WeltPixel\Backend\Block\Adminhtml\System\Config
+ */
+class Extensions extends \Magento\Config\Block\System\Config\Form\Fieldset
+{
+    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        return '<iframe id="weltpixel_store" width="100%" src="https://www.weltpixel.com/store/index.html?id=' . uniqid() .'" ></iframe>';
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Block/Adminhtml/System/Config/Notification.php b/app/code/WeltPixel/Backend/Block/Adminhtml/System/Config/Notification.php
new file mode 100644
index 0000000000000000000000000000000000000000..1181a19e333c2e2d3a63ee1f7b7fbfd82c5d3c8e
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Block/Adminhtml/System/Config/Notification.php
@@ -0,0 +1,23 @@
+<?php
+namespace WeltPixel\Backend\Block\Adminhtml\System\Config;
+
+use Magento\Config\Block\System\Config\Form\Field;
+use Magento\Framework\Data\Form\Element\AbstractElement;
+
+/**
+ * Class Notification
+ * @package WeltPixel\Backend\Block\Adminhtml\System\Config
+ */
+class Notification extends Field
+{
+    protected $_template = 'WeltPixel_Backend::system/config/notification.phtml';
+
+    /**
+     * @param AbstractElement $element
+     * @return string
+     */
+    protected function _getElementHtml(AbstractElement $element)
+    {
+        return $this->_toHtml();
+    }
+}
\ No newline at end of file
diff --git a/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger.php b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger.php
new file mode 100644
index 0000000000000000000000000000000000000000..a9b0f556d8c6ed967a214ba7922de9ef03172871
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger.php
@@ -0,0 +1,41 @@
+<?php
+namespace WeltPixel\Backend\Controller\Adminhtml;
+
+abstract class Debugger extends \Magento\Backend\App\Action
+{
+    /**
+     * Authorization level of a basic admin session
+     *
+     * @see _isAllowed()
+     */
+    const ADMIN_RESOURCE = 'WeltPixel_Backend::WeltPixel_Debugger';
+
+    /**
+     * Core registry
+     *
+     * @var \Magento\Framework\Registry
+     */
+    protected $_coreRegistry;
+
+    /**
+     * @param \Magento\Backend\App\Action\Context $context
+     * @param \Magento\Framework\Registry $coreRegistry
+     */
+    public function __construct(\Magento\Backend\App\Action\Context $context, \Magento\Framework\Registry $coreRegistry)
+    {
+        $this->_coreRegistry = $coreRegistry;
+        parent::__construct($context);
+    }
+
+    /**
+     * Init page
+     *
+     * @param \Magento\Backend\Model\View\Result\Page $resultPage
+     * @return \Magento\Backend\Model\View\Result\Page
+     */
+    protected function initPage($resultPage)
+    {
+        $resultPage->setActiveMenu('WeltPixel_Backend::WeltPixel_Debugger');
+        return $resultPage;
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Modules.php b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Modules.php
new file mode 100644
index 0000000000000000000000000000000000000000..20fcef138dcddfa9a99833d8f5d47fd3cf15033b
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Modules.php
@@ -0,0 +1,39 @@
+<?php
+namespace WeltPixel\Backend\Controller\Adminhtml\Debugger;
+
+class Modules extends \WeltPixel\Backend\Controller\Adminhtml\Debugger
+{
+    const ADMIN_RESOURCE = 'WeltPixel_Backend::WeltPixel_Debugger_Modules';
+
+    /**
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    protected $resultPageFactory;
+
+    /**
+     * @param \Magento\Backend\App\Action\Context $context
+     * @param \Magento\Framework\Registry $coreRegistry
+     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
+     */
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Framework\Registry $coreRegistry,
+        \Magento\Framework\View\Result\PageFactory $resultPageFactory
+    ) {
+        $this->resultPageFactory = $resultPageFactory;
+        parent::__construct($context, $coreRegistry);
+    }
+
+    /**
+     * Index action
+     *
+     * @return \Magento\Framework\Controller\ResultInterface
+     */
+    public function execute()
+    {
+        /** @var \Magento\Backend\Model\View\Result\Page $resultPage */
+        $resultPage = $this->resultPageFactory->create();
+        $this->initPage($resultPage)->getConfig()->getTitle()->prepend(__('Modules'));
+        return $resultPage;
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewrites.php b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewrites.php
new file mode 100644
index 0000000000000000000000000000000000000000..c4171be286596a8069b45d1d2dd65d245968655c
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewrites.php
@@ -0,0 +1,39 @@
+<?php
+namespace WeltPixel\Backend\Controller\Adminhtml\Debugger;
+
+class Rewrites extends \WeltPixel\Backend\Controller\Adminhtml\Debugger
+{
+    const ADMIN_RESOURCE = 'WeltPixel_Backend::WeltPixel_Debugger';
+
+    /**
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    protected $resultPageFactory;
+
+    /**
+     * @param \Magento\Backend\App\Action\Context $context
+     * @param \Magento\Framework\Registry $coreRegistry
+     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
+     */
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Framework\Registry $coreRegistry,
+        \Magento\Framework\View\Result\PageFactory $resultPageFactory
+    ) {
+        $this->resultPageFactory = $resultPageFactory;
+        parent::__construct($context, $coreRegistry);
+    }
+
+    /**
+     * Index action
+     *
+     * @return \Magento\Framework\Controller\ResultInterface
+     */
+    public function execute()
+    {
+        /** @var \Magento\Backend\Model\View\Result\Page $resultPage */
+        $resultPage = $this->resultPageFactory->create();
+        $this->initPage($resultPage)->getConfig()->getTitle()->prepend(__('Check Rewrites / Preferences'));
+        return $resultPage;
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewritesall.php b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewritesall.php
new file mode 100644
index 0000000000000000000000000000000000000000..cee90105eaa01d27d771ffd5889c9cd91b77b03d
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewritesall.php
@@ -0,0 +1,36 @@
+<?php
+namespace WeltPixel\Backend\Controller\Adminhtml\Debugger;
+
+class Rewritesall extends \WeltPixel\Backend\Controller\Adminhtml\Debugger\Rewrites
+{
+    /**
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    protected $resultPageFactory;
+
+    /**
+     * @param \Magento\Backend\App\Action\Context $context
+     * @param \Magento\Framework\Registry $coreRegistry
+     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
+     */
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Framework\Registry $coreRegistry,
+        \Magento\Framework\View\Result\PageFactory $resultPageFactory
+    )
+    {
+        $this->resultPageFactory = $resultPageFactory;
+        parent::__construct($context, $coreRegistry, $resultPageFactory);
+    }
+
+    /**
+     * @return \Magento\Framework\Controller\ResultInterface
+     */
+    public function execute()
+    {
+        /** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
+        $this->_session->setDebuggerRewite(true);
+        $resultRedirect = $this->resultRedirectFactory->create();
+        return $resultRedirect->setPath('*/*/rewrites');
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewritescustom.php b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewritescustom.php
new file mode 100644
index 0000000000000000000000000000000000000000..eefed0aaa4731a0ea3952ba70072c5e1e998c793
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Controller/Adminhtml/Debugger/Rewritescustom.php
@@ -0,0 +1,36 @@
+<?php
+namespace WeltPixel\Backend\Controller\Adminhtml\Debugger;
+
+class Rewritescustom extends \WeltPixel\Backend\Controller\Adminhtml\Debugger\Rewrites
+{
+    /**
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    protected $resultPageFactory;
+
+    /**
+     * @param \Magento\Backend\App\Action\Context $context
+     * @param \Magento\Framework\Registry $coreRegistry
+     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
+     */
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Framework\Registry $coreRegistry,
+        \Magento\Framework\View\Result\PageFactory $resultPageFactory
+    )
+    {
+        $this->resultPageFactory = $resultPageFactory;
+        parent::__construct($context, $coreRegistry, $resultPageFactory);
+    }
+
+    /**
+     * @return \Magento\Framework\Controller\ResultInterface
+     */
+    public function execute()
+    {
+        /** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
+        $this->_session->setDebuggerRewite(false);
+        $resultRedirect = $this->resultRedirectFactory->create();
+        return $resultRedirect->setPath('*/*/rewrites');
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Helper/Utility.php b/app/code/WeltPixel/Backend/Helper/Utility.php
new file mode 100644
index 0000000000000000000000000000000000000000..1bfc1260811e05e08a2c92d6547d907ebe4d94d0
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Helper/Utility.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace WeltPixel\Backend\Helper;
+
+use Magento\Framework\View\Design\Theme\ThemeProviderInterface;
+
+/**
+ * @SuppressWarnings(PHPMD.TooManyFields)
+ * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
+ */
+class Utility extends \Magento\Framework\App\Helper\AbstractHelper
+{
+
+    /** @var  ThemeProviderInterface */
+    protected $themeProvider;
+	
+	/**
+	 * Constructor
+	 *
+	 * @param \Magento\Framework\App\Helper\Context $context
+     * @param ThemeProviderInterface $themeProvider
+	 */
+	public function __construct(
+			\Magento\Framework\App\Helper\Context $context,
+            ThemeProviderInterface $themeProvider
+	) {
+		parent::__construct($context);
+		$this->themeProvider = $themeProvider;
+	}
+
+	public function isPearlThemeUsed($storeCode = null) {
+        $themeId = $this->scopeConfig->getValue(
+            \Magento\Framework\View\DesignInterface::XML_PATH_THEME_ID,
+            \Magento\Store\Model\ScopeInterface::SCOPE_STORE,
+            $storeCode
+        );
+
+        $theme = $this->themeProvider->getThemeById($themeId);
+        $isPearlTheme = $this->_validatePearlTheme($theme);
+        return $isPearlTheme;
+    }
+
+    /**
+     * @param \Magento\Theme\Model\Theme $theme
+     * @return bool
+     */
+    protected function _validatePearlTheme($theme) {
+        $pearlThemePath = 'Pearl/weltpixel';
+        do {
+            if ($theme->getThemePath() == $pearlThemePath) {
+                return true;
+            }
+            $theme = $theme->getParentTheme();
+        } while ($theme);
+
+        return false;
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Model/Feed.php b/app/code/WeltPixel/Backend/Model/Feed.php
new file mode 100644
index 0000000000000000000000000000000000000000..32b8e30c533d742c925f0607392365151a283690
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Model/Feed.php
@@ -0,0 +1,53 @@
+<?php
+namespace WeltPixel\Backend\Model;
+
+use Magento\Framework\Config\ConfigOptionsListConstants;
+
+/**
+ * WeltPixelAdmin Feed model
+ *
+ * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
+ */
+class Feed extends \Magento\AdminNotification\Model\Feed
+{
+
+    const XML_FREQUENCY_PATH = 'system/adminnotification/frequency';
+
+    /**
+     * Feed url for WeltPixel Feed
+     *
+     * @var string
+     */
+    protected $_weltPixelFeedUrl = 'http://weltpixel.com/notifications.rss';
+
+    /**
+     * Retrieve feed url
+     *
+     * @return string
+     */
+    public function getFeedUrl()
+    {
+        return $this->_weltPixelFeedUrl;
+    }
+
+    /**
+     * Retrieve Last update time
+     *
+     * @return int
+     */
+    public function getLastUpdate()
+    {
+        return $this->_cacheManager->load('weltpixel_notifications_lastcheck');
+    }
+
+    /**
+     * Set last update time (now)
+     *
+     * @return $this
+     */
+    public function setLastUpdate()
+    {
+        $this->_cacheManager->save(time(), 'weltpixel_notifications_lastcheck');
+        return $this;
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Model/ResourceModel/Debugger/Grid/Collection.php b/app/code/WeltPixel/Backend/Model/ResourceModel/Debugger/Grid/Collection.php
new file mode 100644
index 0000000000000000000000000000000000000000..b7712e75541fba4a93c92013f10c9b90bb60a89f
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Model/ResourceModel/Debugger/Grid/Collection.php
@@ -0,0 +1,244 @@
+<?php
+namespace WeltPixel\Backend\Model\ResourceModel\Debugger\Grid;
+
+use Magento\Framework\Api\Search\SearchResultInterface;
+use Magento\Framework\Search\AggregationInterface;
+
+/**
+ * Class Collection
+ * @package WeltPixel\Bakcend\Model\ResourceModel\Debugger\Grid
+ */
+class Collection extends \Magento\Framework\Data\Collection implements SearchResultInterface
+{
+    /**
+     * @var AggregationInterface
+     */
+    protected $aggregations;
+
+    /**
+     * @var \WeltPixel\Backend\Model\Scanner
+     */
+    protected $scanner;
+
+    /**
+     * @var \Magento\Backend\Model\Session
+     */
+    protected $backendSession;
+
+
+    /**
+     * @param \Magento\Backend\Model\Session $backendSession
+     * @param \WeltPixel\Backend\Model\Scanner $scanner
+     * @param \Magento\Framework\DataObjectFactory $dataObjectFactory
+     * @param \Magento\Framework\Data\Collection\EntityFactoryInterface $entityFactory
+     * @param \Psr\Log\LoggerInterface $logger
+     * @param \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy
+     * @param \Magento\Framework\Event\ManagerInterface $eventManager
+     * @param string $mainTable
+     * @param string $eventPrefix
+     * @param string $eventObject
+     * @param string $resourceModel
+     * @param string $model
+     *
+     * @SuppressWarnings(PHPMD.ExcessiveParameterList)
+     */
+    public function __construct(
+        \Magento\Backend\Model\Session $backendSession,
+        \WeltPixel\Backend\Model\Scanner $scanner,
+        \Magento\Framework\DataObjectFactory $dataObjectFactory,
+        \Magento\Framework\Data\Collection\EntityFactoryInterface $entityFactory,
+        \Psr\Log\LoggerInterface $logger,
+        \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy,
+        \Magento\Framework\Event\ManagerInterface $eventManager,
+        $mainTable,
+        $eventPrefix,
+        $eventObject,
+        $resourceModel,
+        $model = 'Magento\Framework\View\Element\UiComponent\DataProvider\Document'
+    )
+    {
+        parent::__construct(
+            $entityFactory,
+            $logger,
+            $fetchStrategy,
+            $eventManager,
+            null,
+            null
+        );
+
+        $this->_eventPrefix = $eventPrefix;
+        $this->_eventObject = $eventObject;
+        $this->_dataObjectFactory = $dataObjectFactory;
+        $this->scanner = $scanner;
+        $this->backendSession = $backendSession;
+    }
+
+    /**
+     * @var \Magento\Framework\DataObjectFactory
+     */
+    protected $_dataObjectFactory;
+
+    /**
+     * @return AggregationInterface
+     */
+    public function getAggregations()
+    {
+        return $this->aggregations;
+    }
+
+    /**
+     * @param AggregationInterface $aggregations
+     * @return $this
+     */
+    public function setAggregations($aggregations)
+    {
+        $this->aggregations = $aggregations;
+    }
+
+    /**
+     * Retrieve all ids for collection
+     * Backward compatibility with EAV collection
+     *
+     * @param int $limit
+     * @param int $offset
+     * @return array
+     */
+    public function getAllIds($limit = null, $offset = null)
+    {
+        return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);
+    }
+
+    /**
+     * Get search criteria.
+     *
+     * @return \Magento\Framework\Api\SearchCriteriaInterface|null
+     */
+    public function getSearchCriteria()
+    {
+        return null;
+    }
+
+    /**
+     * Set search criteria.
+     *
+     * @param \Magento\Framework\Api\SearchCriteriaInterface $searchCriteria
+     * @return $this
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function setSearchCriteria(\Magento\Framework\Api\SearchCriteriaInterface $searchCriteria = null)
+    {
+        return $this;
+    }
+
+    /**
+     * Get total count.
+     *
+     * @return int
+     */
+    public function getTotalCount()
+    {
+        return $this->getSize();
+    }
+
+    /**
+     * Set total count.
+     *
+     * @param int $totalCount
+     * @return $this
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function setTotalCount($totalCount)
+    {
+        return $this;
+    }
+
+    /**
+     * Set items list.
+     *
+     * @param \Magento\Framework\Api\ExtensibleDataInterface[] $items
+     * @return $this
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function setItems(array $items = null)
+    {
+        return $this;
+    }
+
+    /**
+     * @return \Magento\Framework\DataObject[]
+     */
+    public function getItems()
+    {
+        $this->_populateCollection();
+        return parent::getItems();
+    }
+
+    public function _populateCollection()
+    {
+        $rewritesOption = $this->backendSession->getDebuggerRewite(false);
+        $rewrites = $this->scanner->getRewrites($rewritesOption);
+
+        $searchKey = str_replace("\\\\\\\\", "\\", $this->scanner->getData('filterCondition'));
+
+        if ($searchKey) {
+            foreach ($rewrites as $key => $value) {
+                if (strpos(strtolower($key), strtolower($searchKey)) === false) {
+                    unset($rewrites[$key]);
+                }
+            }
+        }
+
+        foreach ($rewrites as $originalClass => $rewriteOptions) {
+            foreach ($rewriteOptions as $areaCode => $rewriteClasses) {
+                if (count($rewriteClasses) > 1) {
+                    $status = false;
+                } else {
+                    $status = true;
+                }
+
+                /**
+                 * Exceptions
+                 * Magento\Catalog\Block\Product\ImageBuilder class we rewrite in LazyLoading, OwlCarousel modules as well
+                 * these modules are sold as standalone ones, so we rewrite the class also in CategoryPage module
+                 * where we merge the functionalities from those 2 modules, in this case this rewite is marked as Ok,
+                 */
+                if (($originalClass == 'Magento\Catalog\Block\Product\ImageBuilder') &&
+                    ($areaCode == 'frontend') &&
+                    (count($rewriteClasses) == 3)
+                ) {
+                    $status = true;
+                }
+
+                foreach ($rewriteClasses as $key => $rewriteClass) {
+                    $item = $this->_dataObjectFactory->create();
+                    if ($key) {
+                        $item->setArea('');
+                        $item->setOriginalClass('');
+                    } else {
+                        $item->setArea($areaCode);
+                        $item->setOriginalClass($originalClass);
+                    }
+                    $item->setRewriteClass($rewriteClass);
+                    $item->setStatus($status);
+                    $this->addItem($item);
+                }
+            }
+        }
+    }
+
+    /**
+     * Filter applied only on the original_class column
+     *
+     * @param array|string $field
+     * @param array|int|string $condition
+     * @return $this
+     */
+    public function addFieldToFilter($field, $condition)
+    {
+        $conditionValue = substr($condition['like'], 2, -2);
+
+        $this->scanner->setData('filterCondition', $conditionValue);
+
+        return $this;
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Model/Scanner.php b/app/code/WeltPixel/Backend/Model/Scanner.php
new file mode 100644
index 0000000000000000000000000000000000000000..4f3e4da5b27abec9a07d6c98c628e3ab3daa1cde
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Model/Scanner.php
@@ -0,0 +1,122 @@
+<?php
+
+namespace WeltPixel\Backend\Model;
+
+class Scanner extends \Magento\Framework\Model\AbstractModel
+{
+    /**
+     * @var \Magento\Framework\App\Config\FileResolver
+     */
+    protected $fileResolver;
+
+    /**
+     * @var \Magento\Framework\App\AreaList
+     */
+    protected $areaList;
+
+    /**
+     * Direct usage of \Magento\Setup\Module\Di\Code\Scanner\ConfigurationScanner
+     * caused error on compilation
+     * Argument 1 passed to Magento\\Setup\\Module\\Di\\Code\\Scanner\\ConfigurationScanner::__construct()
+     * must be an instance of Magento\\Framework\\App\\Config\\FileResolver,
+     * instance of Magento\\Framework\\ObjectManager\\ObjectManager given
+     *
+     * so FileResolver and AreaList injected directly insetad
+     *
+     * @param \Magento\Framework\Model\Context $context
+     * @param \Magento\Framework\Registry $registry
+     * @param \Magento\Framework\App\Config\FileResolver $fileResolver
+     * @param \Magento\Framework\App\AreaList $areaList
+     */
+    public function __construct(
+        \Magento\Framework\Model\Context $context,
+        \Magento\Framework\Registry $registry,
+        \Magento\Framework\App\Config\FileResolver $fileResolver,
+        \Magento\Framework\App\AreaList $areaList
+    )
+    {
+        parent::__construct($context, $registry);
+        $this->fileResolver = $fileResolver;
+        $this->areaList = $areaList;
+    }
+
+    /**
+     * \Magento\Setup\Module\Di\Code\Scanner\ConfigurationScanner scan usage,
+     * because the original class injection is causing error on compilation
+     *
+     * @param $fileName
+     * @return array
+     */
+    public function getScannedFiles($fileName) {
+        $files = [];
+        $areaCodes = array_merge(
+            ['primary', \Magento\Framework\App\Area::AREA_GLOBAL],
+            $this->areaList->getCodes()
+        );
+        foreach ($areaCodes as $area) {
+            $files = array_merge_recursive(
+                $files,
+                $this->fileResolver->get($fileName, $area)->toArray()
+            );
+        }
+        return array_keys($files);
+    }
+
+    /**
+     * @param bool $all
+     * @return array
+     */
+    public function getRewrites($all = false)
+    {
+        $diFiles = $this->getScannedFiles('di.xml');
+        $moduleFiles = $this->getScannedFiles('module.xml');
+
+        array_walk($moduleFiles, function (&$item) {
+            $item = str_replace('/module.xml', '', $item);
+        });
+
+        if (!$all) {
+            foreach ($diFiles as $key => $file) {
+                preg_match('/(.*\/etc)/', $file, $matches);
+                $resultKey = $matches[1];
+                if (!in_array($resultKey, $moduleFiles) ||
+                    (strpos($file, '/vendor/magento') !== false)
+                ) {
+                    unset($diFiles[$key]);
+                }
+            }
+        }
+
+        $rewrites = $this->_collectRewriteEntities($diFiles);
+        return $rewrites;
+
+    }
+
+    /**
+     * @param array $files
+     * @return array
+     */
+    protected function _collectRewriteEntities(array $files)
+    {
+        $rewrites = [];
+        foreach ($files as $fileName) {
+            $areaCode = 'global';
+            preg_match('/\/etc\/(.*)\/di.xml/', $fileName, $matches);
+            if (isset($matches[1])) {
+                $areaCode = $matches[1];
+            }
+            $dom = new \DOMDocument();
+            $dom->loadXML(file_get_contents($fileName));
+            $xpath = new \DOMXPath($dom);
+            /** @var $node \DOMNode */
+            foreach ($xpath->query('//preference') as $node) {
+                $originalClass = $node->getAttribute('for');
+                $rewriteClass = $node->getAttribute('type');
+
+                $rewrites[$originalClass][$areaCode][] = $rewriteClass;
+            }
+        }
+
+        return $rewrites;
+    }
+}
diff --git a/app/code/WeltPixel/Backend/Observer/PredispatchAdminActionControllerObserver.php b/app/code/WeltPixel/Backend/Observer/PredispatchAdminActionControllerObserver.php
new file mode 100644
index 0000000000000000000000000000000000000000..eeb4a8d5b38d66ccf00feb473b49e374809161b9
--- /dev/null
+++ b/app/code/WeltPixel/Backend/Observer/PredispatchAdminActionControllerObserver.php
@@ -0,0 +1,49 @@
+<?php
+namespace WeltPixel\Backend\Observer;
+
+use Magento\Framework\Event\ObserverInterface;
+
+/**
+ * PredispatchAdminActionControllerObserver observer
+ *
+ */
+class PredispatchAdminActionControllerObserver implements ObserverInterface
+{
+    /**
+     * @var \WeltPixel\Backend\Model\FeedFactory
+     */
+    protected $_feedFactory;
+
+    /**
+     * @var \Magento\Backend\Model\Auth\Session
+     */
+    protected $_backendAuthSession;
+
+    /**
+     * @param \WeltPixel\Backend\Model\FeedFactory $feedFactory
+     * @param \Magento\Backend\Model\Auth\Session $backendAuthSession
+     */
+    public function __construct(
+        \WeltPixel\Backend\Model\FeedFactory $feedFactory,
+        \Magento\Backend\Model\Auth\Session $backendAuthSession
+    ) {
+        $this->_feedFactory = $feedFactory;
+        $this->_backendAuthSession = $backendAuthSession;
+    }
+
+    /**
+     * Predispath admin action controller
+     *
+     * @param \Magento\Framework\Event\Observer $observer
+     * @return void
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function execute(\Magento\Framework\Event\Observer $observer)
+    {
+        if ($this->_backendAuthSession->isLoggedIn()) {
+            $feedModel = $this->_feedFactory->create();
+            /* @var $feedModel \WeltPixel\Backend\Model\Feed */
+            $feedModel->checkUpdate();
+        }
+    }
+}
diff --git a/app/code/WeltPixel/Backend/README.md b/app/code/WeltPixel/Backend/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..123e31ae7e714e7346d1c80a7bb81c574c9d1815
--- /dev/null
+++ b/app/code/WeltPixel/Backend/README.md
@@ -0,0 +1,22 @@
+# m2-weltpixel-backend
+
+### Installation
+
+With composer:
+
+```sh
+$ composer config repositories.welpixel-m2-weltpixel-backend git git@github.com:rusdragos/m2-weltpixel-backend.git
+$ composer require weltpixel/m2-weltpixel-backend:dev-master
+```
+
+Manually:
+
+Copy the zip into app/code/WeltPixel/Backend directory
+
+
+#### After installation by either means, enable the extension by running following commands:
+
+```sh
+$ php bin/magento module:enable WeltPixel_Backend --clear-static-content
+$ php bin/magento setup:upgrade
+```
diff --git a/app/code/WeltPixel/Backend/composer.json b/app/code/WeltPixel/Backend/composer.json
new file mode 100644
index 0000000000000000000000000000000000000000..dcde33ae70603862382489480e9706afbf25c478
--- /dev/null
+++ b/app/code/WeltPixel/Backend/composer.json
@@ -0,0 +1,22 @@
+{
+    "name": "weltpixel/m2-weltpixel-backend",
+    "description": "WeltPixel Backend Module",
+    "require": {
+        "php": "~5.6.5|7.0.2|7.0.4|~7.0.6|~7.1.0",
+        "magento/module-admin-notification": "100.*|101.*"
+    },
+    "type": "magento2-module",
+    "version": "1.5.8",
+    "license": [
+        "OSL-3.0",
+        "AFL-3.0"
+    ],
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "WeltPixel\\Backend\\": ""
+        }
+    }
+}
diff --git a/app/code/WeltPixel/Backend/etc/acl.xml b/app/code/WeltPixel/Backend/etc/acl.xml
new file mode 100644
index 0000000000000000000000000000000000000000..2eb0a5f2ae8ecbc11432fa7e87e22fbaced2f0db
--- /dev/null
+++ b/app/code/WeltPixel/Backend/etc/acl.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
+    <acl>
+        <resources>
+            <resource id="Magento_Backend::admin" >
+                <resource id="WeltPixel_Backend::WeltPixel" title="WeltPixel" sortOrder="200" >
+                    <resource id="WeltPixel_Backend::WeltPixel_Documentation" title="WeltPixel Documentation" sortOrder="0" />
+                    <resource id="WeltPixel_Backend::WeltPixel_HelpCenter" title="WeltPixel HelpCenter" sortOrder="2" />
+                    <resource id="WeltPixel_Backend::WeltPixel_Debugger" title="WeltPixel Debugger" sortOrder="3" >
+                        <resource id="WeltPixel_Backend::WeltPixel_Debugger_Rewrites" title="Rewrites" sortOrder="1" />
+                        <resource id="WeltPixel_Backend::WeltPixel_Debugger_Modules" title="Extensions Version" sortOrder="5" />
+                    </resource>
+                    <resource id="WeltPixel_Backend::Pearl_Theme_Options" title="Pearl Theme Options" sortOrder="5" />
+                </resource>
+                <resource id="Magento_Backend::stores">
+                    <resource id="Magento_Backend::stores_settings">
+                        <resource id="Magento_Config::config">
+                            <resource id="WeltPixel_Backend::DocumentationSettings" title="WeltPixel DocumentationSettings" sortOrder="0" />
+                        </resource>
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>
\ No newline at end of file
diff --git a/app/code/WeltPixel/Backend/etc/adminhtml/events.xml b/app/code/WeltPixel/Backend/etc/adminhtml/events.xml
new file mode 100644
index 0000000000000000000000000000000000000000..955a48e97d6f7113bfce37ac37106a0f2562785d
--- /dev/null
+++ b/app/code/WeltPixel/Backend/etc/adminhtml/events.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
+    <event name="controller_action_predispatch">
+        <observer name="weltpixel_backend" instance="WeltPixel\Backend\Observer\PredispatchAdminActionControllerObserver" />
+    </event>
+</config>
diff --git a/app/code/WeltPixel/Backend/etc/adminhtml/menu.xml b/app/code/WeltPixel/Backend/etc/adminhtml/menu.xml
new file mode 100644
index 0000000000000000000000000000000000000000..fb0108a5c5f6ec1fa12d03dee3545cf04e581fbf
--- /dev/null
+++ b/app/code/WeltPixel/Backend/etc/adminhtml/menu.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
+    <menu>
+        <add id="WeltPixel_Backend::WeltPixel" title="WeltPixel" module="WeltPixel_Backend" sortOrder="200" resource="WeltPixel_Backend::WeltPixel"/>
+        <add
+                id="WeltPixel_Backend::WeltPixel_Documentation"
+                title="WeltPixel Documentation"
+                module="WeltPixel_Backend"
+                action="adminhtml/system_config/edit/section/weltpixel_backend_config/"
+                sortOrder="0"
+                parent="WeltPixel_Backend::WeltPixel"
+                resource="WeltPixel_Backend::WeltPixel_Documentation"
+        />
+        <add
+                id="WeltPixel_Backend::WeltPixel_HelpCenter"
+                title="WeltPixel Help Center"
+                module="WeltPixel_Backend"
+                action="adminhtml/system_config/edit/section/weltpixel_backend_config/"
+                sortOrder="1"
+                parent="WeltPixel_Backend::WeltPixel"
+                resource="WeltPixel_Backend::WeltPixel_HelpCenter"
+        />
+        <add
+                id="WeltPixel_Backend::WeltPixel_Debugger"
+                title="WeltPixel Debugger"
+                module="WeltPixel_Backend"
+                sortOrder="2"
+                parent="WeltPixel_Backend::WeltPixel"
+                resource="WeltPixel_Backend::WeltPixel_Debugger"
+        />
+        <add
+                id="WeltPixel_Backend::WeltPixel_Debugger_Rewrites"
+                title="Rewrites"
+                module="WeltPixel_Backend"
+                action="weltpixel_backend/debugger/rewrites"
+                sortOrder="2"
+                parent="WeltPixel_Backend::WeltPixel_Debugger"
+                resource="WeltPixel_Backend::WeltPixel_Debugger_Rewrites"
+        />
+        <add
+                id="WeltPixel_Backend::WeltPixel_Debugger_Modules"
+                title="Extensions Version"
+                module="WeltPixel_Backend"
+                action="weltpixel_backend/debugger/modules"
+                sortOrder="5"
+                parent="WeltPixel_Backend::WeltPixel_Debugger"
+                resource="WeltPixel_Backend::WeltPixel_Debugger_Modules"
+        />
+        <add
+                id="WeltPixel_Backend::Pearl_Theme_Options"
+                title="Pearl Theme Options"
+                module="WeltPixel_Backend"
+                sortOrder="3"
+                parent="WeltPixel_Backend::WeltPixel"
+                resource="WeltPixel_Backend::Pearl_Theme_Options"
+        />
+    </menu>
+</config>
diff --git a/app/code/WeltPixel/Backend/etc/adminhtml/routes.xml b/app/code/WeltPixel/Backend/etc/adminhtml/routes.xml
new file mode 100644
index 0000000000000000000000000000000000000000..989b7b1c56ce46e09e8be94a57992b1cfe3c7d7b
--- /dev/null
+++ b/app/code/WeltPixel/Backend/etc/adminhtml/routes.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="admin">
+        <route id="weltpixel_backend" frontName="weltpixel_backend">
+            <module name="WeltPixel_Backend" />
+        </route>
+    </router>
+</config>
diff --git a/app/code/WeltPixel/Backend/etc/adminhtml/system.xml b/app/code/WeltPixel/Backend/etc/adminhtml/system.xml
new file mode 100644
index 0000000000000000000000000000000000000000..a9ed2e77810805cf3ddcf14bf2ee4c86ab6d6eba
--- /dev/null
+++ b/app/code/WeltPixel/Backend/etc/adminhtml/system.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
+    <system>
+        <tab id="weltpixel" translate="label" sortOrder="2000" class="weltpixel-tab">
+            <label>WeltPixel</label>
+        </tab>
+        <section id="weltpixel_backend_config" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>WeltPixel Documentation</label>
+            <tab>weltpixel</tab>
+            <class>item-weltpixel-documentation</class>
+            <resource>WeltPixel_Backend::DocumentationSettings</resource>
+            <group id="recommended_solutions" translate="label" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Recommended Solutions:</label>
+                <frontend_model>WeltPixel\Backend\Block\Adminhtml\System\Config\Extensions</frontend_model>
+            </group>
+        </section>
+    </system>
+</config>
diff --git a/app/code/WeltPixel/Backend/etc/di.xml b/app/code/WeltPixel/Backend/etc/di.xml
new file mode 100644
index 0000000000000000000000000000000000000000..9785d17d6cfe954e9860e9f30e67223ef6c96736
--- /dev/null
+++ b/app/code/WeltPixel/Backend/etc/di.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <type name="WeltPixel\Backend\Model\ResourceModel\Debugger\Grid\Collection">
+        <arguments>
+            <argument name="mainTable" xsi:type="string">weltpixel_debugger</argument>
+            <argument name="eventPrefix" xsi:type="string">weltpixel_debugger_grid_collection</argument>
+            <argument name="eventObject" xsi:type="string">weltpixel_debugger_grid_collection</argument>
+            <argument name="resourceModel" xsi:type="string">Magento\Framework\DataObject </argument>
+        </arguments>
+    </type>
+</config>
diff --git a/app/code/WeltPixel/Backend/etc/module.xml b/app/code/WeltPixel/Backend/etc/module.xml
new file mode 100644
index 0000000000000000000000000000000000000000..7cdea3a17040967c83cf2541359696bf9bbbeb7c
--- /dev/null
+++ b/app/code/WeltPixel/Backend/etc/module.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="WeltPixel_Backend" setup_version="1.0.3">
+        <sequence>
+            <module name="Magento_AdminNotification"/>
+        </sequence>
+    </module>
+</config>
diff --git a/app/code/WeltPixel/Backend/i18n/en_US.csv b/app/code/WeltPixel/Backend/i18n/en_US.csv
new file mode 100644
index 0000000000000000000000000000000000000000..44d6911f39953efd9da5c489be6d4af3ca95c0a9
--- /dev/null
+++ b/app/code/WeltPixel/Backend/i18n/en_US.csv
@@ -0,0 +1,22 @@
+"Only Custom Modules","Only Custom Modules"
+"All Magento Modules","All Magento Modules"
+OK,OK
+"CHECK REWRITE","CHECK REWRITE"
+N/A,N/A
+"Up to Date","Up to Date"
+"Update needed","Update needed"
+Modules,Modules
+"Check Rewrites / Preferences","Check Rewrites / Preferences"
+Name,Name
+Enabled,Enabled
+"Current Version","Current Version"
+"Latest Version","Latest Version"
+"Theme module","Theme module"
+Themes,Themes
+WeltPixel,WeltPixel
+"WeltPixel Documentation","WeltPixel Documentation"
+"Recommended Solutions:","Recommended Solutions:"
+Area,Area
+"Original Class","Original Class"
+"Rewrite Class","Rewrite Class"
+Status,Status
diff --git a/app/code/WeltPixel/Backend/registration.php b/app/code/WeltPixel/Backend/registration.php
new file mode 100644
index 0000000000000000000000000000000000000000..dc7d59ef4297e19d36a4e5a90a0fd4a9fe02e474
--- /dev/null
+++ b/app/code/WeltPixel/Backend/registration.php
@@ -0,0 +1,7 @@
+<?php
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'WeltPixel_Backend',
+    __DIR__
+);
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/layout/adminhtml_system_config_edit.xml b/app/code/WeltPixel/Backend/view/adminhtml/layout/adminhtml_system_config_edit.xml
new file mode 100644
index 0000000000000000000000000000000000000000..c2616afcd8947c647fe358834cb0cb7922868e75
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/layout/adminhtml_system_config_edit.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <link src="WeltPixel_Backend::jscolor/jscolor.js"/>
+    </head>
+</page>
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/layout/default.xml b/app/code/WeltPixel/Backend/view/adminhtml/layout/default.xml
new file mode 100644
index 0000000000000000000000000000000000000000..8897410c102681269876a4932d0e9407762a11e0
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/layout/default.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+<body>
+    <referenceContainer name="before.body.end">
+        <block class="Magento\Backend\Block\Template" template="WeltPixel_Backend::helpcenter/init.phtml"/>
+    </referenceContainer>
+</body>
+</page>
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/layout/weltpixel_backend_debugger_modules.xml b/app/code/WeltPixel/Backend/view/adminhtml/layout/weltpixel_backend_debugger_modules.xml
new file mode 100644
index 0000000000000000000000000000000000000000..4572f9d5289073d6009fd32e85a7c69d2bf091f6
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/layout/weltpixel_backend_debugger_modules.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="styles"/>
+    <body>
+        <referenceContainer name="content">
+            <block class="WeltPixel\Backend\Block\Adminhtml\ModulesVersion" name="weltpixel_rewrites_modulesversion" template="WeltPixel_Backend::modules.phtml" />
+        </referenceContainer>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/layout/weltpixel_backend_debugger_rewrites.xml b/app/code/WeltPixel/Backend/view/adminhtml/layout/weltpixel_backend_debugger_rewrites.xml
new file mode 100644
index 0000000000000000000000000000000000000000..6301aaccbbc37acae5751041f159ceefdb073f63
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/layout/weltpixel_backend_debugger_rewrites.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="styles"/>
+    <body>
+        <referenceContainer name="content">
+            <block class="WeltPixel\Backend\Block\Adminhtml\Debugger" name="weltpixel_rewrites_grid">
+                <block class="Magento\Backend\Block\Widget\Grid" name="weltpixel_rewrites_grid.grid" as="grid">
+                    <arguments>
+                        <argument name="dataSource" xsi:type="object">WeltPixel\Backend\Model\ResourceModel\Debugger\Grid\Collection</argument>
+                        <argument name="pager_visibility" xsi:type="string">0</argument>
+                    </arguments>
+                    <block class="Magento\Backend\Block\Widget\Grid\ColumnSet" name="weltpixel_rewrites_grid.grid.columnSet" as="grid.columnSet">
+                        <arguments>
+                            <argument name="filter_visibility" xsi:type="string">1</argument>
+                        </arguments>
+                        <block class="Magento\Backend\Block\Widget\Grid\Column" as="area">
+                            <arguments>
+                                <argument name="header" xsi:type="string" translate="true">Area</argument>
+                                <argument name="index" xsi:type="string">area</argument>
+                                <argument name="sortable" xsi:type="string">0</argument>
+                                <argument name="filter" xsi:type="string">0</argument>
+                            </arguments>
+                        </block>
+                        <block class="Magento\Backend\Block\Widget\Grid\Column" as="original_class">
+                            <arguments>
+                                <argument name="header" xsi:type="string" translate="true">Original Class</argument>
+                                <argument name="index" xsi:type="string">original_class</argument>
+                                <argument name="sortable" xsi:type="string">0</argument>
+                                <!--<argument name="filter" xsi:type="string">0</argument>-->
+                            </arguments>
+                        </block>
+                        <block class="Magento\Backend\Block\Widget\Grid\Column" as="rewrite_class">
+                            <arguments>
+                                <argument name="header" xsi:type="string" translate="true">Rewrite Class</argument>
+                                <argument name="index" xsi:type="string">rewrite_class</argument>
+                                <argument name="sortable" xsi:type="string">0</argument>
+                                <argument name="filter" xsi:type="string">0</argument>
+                            </arguments>
+                        </block>
+                        <block class="Magento\Backend\Block\Widget\Grid\Column" as="status">
+                            <arguments>
+                                <argument name="header" xsi:type="string" translate="true">Status</argument>
+                                <argument name="filter" xsi:type="string">0</argument>
+                                <argument name="sortable" xsi:type="string">0</argument>
+                                <argument name="renderer" xsi:type="string">WeltPixel\Backend\Block\Adminhtml\Grid\Renderer\RewriteStatus</argument>
+                                <argument name="header_css_class" xsi:type="string">col-rewrite-status</argument>
+                            </arguments>
+                        </block>
+                    </block>
+                </block>
+            </block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/templates/helpcenter/init.phtml b/app/code/WeltPixel/Backend/view/adminhtml/templates/helpcenter/init.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..a7bc5caadbcc7549c1588d8975b8b7c606c22fdd
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/templates/helpcenter/init.phtml
@@ -0,0 +1,17 @@
+<!-- Start of weltpixelhelp Zendesk Widget script -->
+<script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var e=this.createElement("script");n&&(this.domain=n),e.id="js-iframe-async",e.src="https://assets.zendesk.com/embeddable_framework/main.js",this.t=+new Date,this.zendeskHost="weltpixelhelp.zendesk.com",this.zEQueue=a,this.body.appendChild(e)},o.write('<body onload="document._l();">'),o.close()}();
+    /*]]>*/</script>
+<!-- End of weltpixelhelp Zendesk Widget script -->
+<script>
+    requirejs(['jquery' ],
+        function   ($) {
+            $(document).ready(function() {
+                $('.item-weltpixel-helpcenter a').bind('click', function() {
+                    $('iframe#launcher').contents().find('.src-component-Launcher-wrapper').trigger( "click" );
+                    $('iframe#launcher').show();
+                    $('.action-close').click();
+                    return false;
+                });
+            });
+        });
+</script>
\ No newline at end of file
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/templates/modules.phtml b/app/code/WeltPixel/Backend/view/adminhtml/templates/modules.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..f82addc55a468944accdf20734279daa856dfcb4
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/templates/modules.phtml
@@ -0,0 +1,66 @@
+<?php
+$modules = $this->getModuleVersions();
+$themes = $this->getThemeVersions();
+?>
+<div class="admin__page-section-item">
+    <div class="admin__page-section-item-content">
+        <table class="admin__table-secondary">
+            <thead>
+                <tr>
+                    <th><?php echo __('Name'); ?></th>
+                    <th><?php echo __('Enabled'); ?></th>
+                    <th><?php echo __('Current Version'); ?></th>
+                    <th><?php echo __('Latest Version'); ?></th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+            <?php foreach ($modules as $moduleName => $options) : ?>
+                <tr>
+                    <td>
+                        <span class="module-title"><?php echo $moduleName ?></span>
+                        <?php if ($options['theme_module']) : ?>
+                            <span class="module-theme-info">(<?php echo __('Theme module'); ?>)</span>
+                        <?php endif; ?>
+                    </td>
+                    <td><?php echo ($options['enabled']) ? 'Yes' : 'No' ?></td>
+                    <td><?php echo $options['version'] ?></td>
+                    <td><?php echo $options['latest_version'] ?></td>
+                    <td><span class="rewrite-status rewrite-status-<?php echo ($options['status']) ? 'ok' : 'nok'; ?>"><?php echo $options['status_message'] ?></span></td>
+                </tr>
+            <?php endforeach; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+<?php if (count($themes)) :  ?>
+<hr/><br/>
+<div class="admin__page-section-item">
+    <div class="admin__page-section-item-title">
+        <h1 class="page-title"><?php echo __('Themes'); ?></h1>
+    </div>
+    <div class="admin__page-section-item-content">
+        <table class="admin__table-secondary">
+            <thead>
+            <tr>
+                <th><?php echo __('Name'); ?></th>
+                <th><?php echo __('Current Version'); ?></th>
+                <th><?php echo __('Latest Version'); ?></th>
+                <th></th>
+            </tr>
+            </thead>
+            <tbody>
+            <?php foreach ($themes as $themeName => $options) : ?>
+                <tr>
+                    <td><span class="module-title"><?php echo $themeName ?></span></td>
+                    <td><?php echo $options['version'] ?></td>
+                    <td><?php echo $options['latest_version'] ?></td>
+                    <td><span class="rewrite-status rewrite-status-<?php echo ($options['status']) ? 'ok' : 'nok'; ?>"><?php echo $options['status_message'] ?></span></td>
+
+                </tr>
+            <?php endforeach; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+<?php endif; ?>
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/templates/system/config/notification.phtml b/app/code/WeltPixel/Backend/view/adminhtml/templates/system/config/notification.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..44103766ed1a16e3814d34622b12825ad1116d30
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/templates/system/config/notification.phtml
@@ -0,0 +1,4 @@
+<div>
+    <p>1. After changing theme settings make sure to clear related caches: Regenerate Pearl Theme CSS, Flush Magento Cache, Clear Browser Cache (if necessary also Flush JS/CSS Cache, Flush Catalog Images Files, Flush Cache Storage)</p>
+    <p>2. Make sure you are changing the settings on the right store view, settings may be different in default config vs. storeview</p>
+</div>
\ No newline at end of file
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/css/source/_module.less b/app/code/WeltPixel/Backend/view/adminhtml/web/css/source/_module.less
new file mode 100644
index 0000000000000000000000000000000000000000..62675b1d380cadc9c01b8c41eb10d00601bfe327
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/web/css/source/_module.less
@@ -0,0 +1,152 @@
+@weltpixel_store_color: #FFF;
+
+#nav {
+    li.item-weltpixel {
+        > a {
+            &:before {
+                content: '';
+                background-image: url("../WeltPixel_Backend/images/WeltPixel_logo.svg");
+                background-repeat: no-repeat;
+                background-size: 70px;
+                background-position: center;
+                height: 50px;
+            }
+            > span {
+                font-size: 0px;
+            }
+        }
+        .submenu {
+            .submenu-title {
+                background-image: url("../WeltPixel_Backend/images/WeltPixel_logo.svg");
+                background-repeat: no-repeat;
+                padding-left: 80px;
+                height: 80px;
+                font-size: 0px;
+                margin-bottom: 15px;
+                background-size: 120px;
+            }
+            .item-weltpixel-documentation {
+                a {
+                    &:after {
+                        content: '\e60d';
+                        font-family: 'Admin Icons';
+                        margin-left: 10px;
+                    }
+                }
+            }
+            .item-weltpixel-helpcenter {
+                a {
+                    &:after {
+                        content: '\e633';
+                        font-family: 'Admin Icons';
+                        margin-left: 10px;
+                    }
+                }
+            }
+            .item-weltpixel-debugger {
+                .submenu-group-title {
+                    &:after {
+                        content: '\e613';
+                        font-family: 'Admin Icons';
+                        margin-left: 10px;
+                        color: #FFF;
+                    }
+                }
+            }
+            .item-pearl-theme-options {
+                display: none;
+                &.parent {
+                    display: block
+                }
+            }
+        }
+    }
+}
+
+.config-nav {
+    .item-weltpixel-documentation {
+        a {
+            &:after {
+                content: '\e60d';
+                font-family: 'Admin Icons';
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .weltpixel-tab {
+        .admin__page-nav-title {
+            strong {margin-left: 50px;}
+            &:before {
+                content: '';
+                background-image: url("../WeltPixel_Backend/images/WeltPixel_logo_dark.svg");
+                background-repeat: no-repeat;
+                background-size: 40px;
+                background-position: 0px 0px;
+                height: 30px;
+                position: absolute;
+                width: 50px;
+                top: 14px;
+            }
+        }
+    }
+}
+
+#weltpixel_store {
+    border: none;
+    height: 1500px;
+}
+
+.section-config {
+    &.weltpixel-recommended-header {
+        .admin__collapsible-block {
+            display: block !important;
+            a {
+                font-weight: normal;
+                text-transform: uppercase;
+                &:before {
+                    content: '' !important;
+                }
+            }
+            table {
+                td.label {
+                    display: none;
+                }
+                td.value {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+
+iframe#launcher {
+    display: none !important;
+}
+
+.col-rewrite-status {width: 160px;}
+.rewrite-status {
+    width: 100%;
+    display: block;
+    text-align: center;
+    padding: 5px;
+    font-weight: bold;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    color: #FFF;
+}
+.rewrite-status-nok {
+    background-color: #ff0000;
+}
+.rewrite-status-ok {
+    background-color: #00aa00;
+}
+.module-title {
+    font-size: 16px;
+}
+.module-theme-info {
+    font-size: 12px;
+    font-style: italic;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/images/WeltPixel_logo.svg b/app/code/WeltPixel/Backend/view/adminhtml/web/images/WeltPixel_logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4d2109732c37fd71aeaf20d6cee845cd682cf4a2
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/web/images/WeltPixel_logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="69px" height="42px" viewBox="0 0 69 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
+    <title>logo_white</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="weltpixel_homepage-2" transform="translate(-80.000000, -14.000000)" fill="#FFFFFF">
+            <g id="1_header">
+                <g id="menu">
+                    <g id="logo_white" transform="translate(80.000000, 14.000000)">
+                        <path d="M68.3067033,29.10096 C67.5730033,29.2078691 66.9842033,29.2613236 66.5334033,29.2613236 C65.9369367,29.2613236 65.47847,29.1628145 65.1580033,28.9719055 C64.83677,28.7741236 64.6083033,28.5144873 64.4626367,28.1876509 C64.3254033,27.8608145 64.2564033,27.1300145 64.2564033,25.9807418 L64.2564033,12.1337236 L68.3067033,12.1337236 L68.3067033,9.01274182 L64.2564033,9.01274182 L64.2564033,0.737978182 L60.2429033,3.14419636 L60.2429033,9.01274182 L57.2866367,9.01274182 L57.2866367,12.1337236 L60.2429033,12.1337236 L60.2429033,25.7592873 C60.2429033,28.1647418 60.4123367,29.74776 60.74047,30.4945964 C61.06937,31.2483055 61.63517,31.8569236 62.4371033,32.3135782 C63.2467033,32.7786327 64.3783033,33.0061964 65.8449367,33.0061964 C66.7396367,33.0061964 67.7562367,32.8847782 68.88707,32.6480509 L68.3067033,29.10096 Z M53.2923033,32.6946327 L57.3196033,32.6946327 L57.3196033,0.000305454545 L53.2923033,0.000305454545 L53.2923033,32.6946327 Z M34.9835367,18.5734691 C35.1215367,16.5108873 35.81767,14.8591418 37.0788367,13.6251055 C38.3392367,12.3925964 39.89787,11.7763418 41.74707,11.7763418 C43.7879367,11.7763418 45.4531367,12.5521964 46.73807,14.09856 C47.57067,15.0867055 48.0828033,16.5872509 48.2591367,18.5734691 L34.9835367,18.5734691 Z M48.2131367,25.0666691 C47.6013367,26.7642327 46.7764033,27.9975055 45.7299033,28.7664873 C44.6826367,29.5431055 43.4207033,29.9310327 41.9464033,29.9310327 C39.9584367,29.9310327 38.30857,29.2384145 36.97917,27.8531782 C35.6482367,26.4755782 34.9076367,24.48096 34.7627367,21.8777236 L52.49267,21.8777236 C52.5080033,21.4050327 52.5149033,21.0476509 52.5149033,20.8040509 C52.5149033,16.8988145 51.5067367,13.8618327 49.4896367,11.7076145 C47.4794367,9.55339636 44.87967,8.47285091 41.7018367,8.47285091 C38.4159033,8.47285091 35.74867,9.57630545 33.6848033,11.7763418 C31.6286033,13.9756145 30.5974367,17.0660509 30.5974367,21.0552873 C30.5974367,24.9070691 31.61327,27.8989964 33.65337,30.0295418 C35.68657,32.1616145 38.44657,33.2268873 41.9234033,33.2268873 C44.6826367,33.2268873 46.9512033,32.5571782 48.73217,31.2253964 C50.50547,29.8852145 51.71987,28.0043782 52.3784367,25.5767782 L48.2131367,25.0666691 Z M7.27543667,32.6946327 L-0.00023,9.01274182 L4.16583667,9.01274182 L7.94780333,22.6848873 L9.35463667,27.7691782 C9.41597,27.5103055 9.82843667,25.8814691 10.58437,22.8819055 L14.36787,9.01274182 L18.51017,9.01274182 L22.07057,22.7452145 L23.2627367,27.2743418 L24.62357,22.6993964 L28.69687,9.01274182 L32.6176033,9.01274182 L25.1817033,32.6946327 L21.00107,32.6946327 L17.2183367,18.5123782 L16.29297,14.4704509 L11.4867367,32.6946327 L7.27543667,32.6946327 Z" id="Fill-1"></path>
+                        <path d="M8.43854667,39.2631273 C8.55431333,39.2852727 8.65704667,39.3013091 8.74674667,39.312 C8.83721333,39.3234545 8.91311333,39.3288 8.97674667,39.3288 C9.20444667,39.3288 9.40071333,39.2409818 9.56631333,39.0661091 C9.73114667,38.8904727 9.81241333,38.6636727 9.81241333,38.3849455 C9.81241333,38.1925091 9.77408,38.0145818 9.69511333,37.8504 C9.61614667,37.6854545 9.50421333,37.5625091 9.36008,37.4808 C9.21594667,37.3990909 9.05188,37.3578545 8.86864667,37.3578545 C8.75671333,37.3578545 8.61334667,37.3792364 8.43854667,37.4204727 L8.43854667,39.2631273 Z M8.43854667,39.4494545 L8.43854667,40.7407636 C8.43854667,41.0187273 8.46921333,41.1920727 8.52978,41.2600364 C8.61334667,41.3554909 8.73984667,41.4036 8.90774667,41.4036 L9.07794667,41.4036 L9.07794667,41.5242545 L7.17201333,41.5242545 L7.17201333,41.4036 L7.33991333,41.4036 C7.52774667,41.4036 7.66191333,41.3425091 7.74241333,41.2203273 C7.78688,41.1531273 7.80911333,40.9935273 7.80911333,40.7407636 L7.80911333,37.8778909 C7.80911333,37.5991636 7.77921333,37.4258182 7.72018,37.3578545 C7.63508,37.2624 7.50781333,37.2142909 7.33991333,37.2142909 L7.17201333,37.2142909 L7.17201333,37.0936364 L8.80348,37.0936364 C9.20061333,37.0936364 9.51418,37.1341091 9.74418,37.2158182 C9.97418,37.2982909 10.16738,37.4349818 10.3253133,37.6297091 C10.48248,37.8236727 10.5614467,38.0527636 10.5614467,38.3192727 C10.5614467,38.6797091 10.4418467,38.9744727 10.20188,39.2012727 C9.96268,39.4280727 9.62381333,39.5410909 9.18681333,39.5410909 C9.08024667,39.5410909 8.96371333,39.5334545 8.83798,39.5181818 C8.71378,39.5029091 8.58114667,39.48 8.43854667,39.4494545 L8.43854667,39.4494545 Z" id="Fill-4"></path>
+                        <path d="M23.4870633,41.4034473 L23.4870633,41.5241018 L21.58113,41.5241018 L21.58113,41.4034473 L21.73753,41.4034473 C21.92153,41.4034473 22.0556967,41.3499927 22.1392633,41.2438473 C22.19063,41.1735927 22.2166967,41.0063564 22.2166967,40.7406109 L22.2166967,37.8777382 C22.2166967,37.6539927 22.2036633,37.5058473 22.17453,37.4333018 C22.1522967,37.3790836 22.10783,37.3317382 22.0395967,37.2927927 C21.9437633,37.2408655 21.84333,37.2149018 21.73753,37.2149018 L21.58113,37.2149018 L21.58113,37.0934836 L23.4870633,37.0934836 L23.4870633,37.2149018 L23.3260633,37.2149018 C23.14513,37.2149018 23.0124967,37.2675927 22.92893,37.3745018 C22.8744967,37.4439927 22.8468967,37.6119927 22.8468967,37.8777382 L22.8468967,40.7406109 C22.8468967,40.96512 22.8614633,41.1125018 22.88983,41.1850473 C22.9112967,41.2392655 22.9580633,41.2858473 23.02783,41.3255564 C23.1213633,41.3782473 23.22103,41.4034473 23.3260633,41.4034473 L23.4870633,41.4034473 Z" id="Fill-6"></path>
+                        <path d="M37.0096067,39.0707673 L37.9648733,40.48884 C38.2286067,40.8805855 38.42564,41.1287673 38.5536733,41.2318582 C38.6817067,41.3364764 38.84424,41.3929855 39.0412733,41.4036764 L39.0412733,41.5243309 L37.13074,41.5243309 L37.13074,41.4036764 C37.2580067,41.4021491 37.35154,41.3884036 37.4128733,41.3647309 C37.45964,41.34564 37.49644,41.3150945 37.52634,41.2753855 C37.5554733,41.2349127 37.5715733,41.1929127 37.5715733,41.1516764 C37.5715733,41.10204 37.56084,41.0524036 37.5409067,41.0020036 C37.5255733,40.9645855 37.4657733,40.8691309 37.36074,40.7141127 L36.60634,39.5762945 L35.6740733,40.7668036 C35.57594,40.8935673 35.5176733,40.9775673 35.4969733,41.0203309 C35.47704,41.0615673 35.46784,41.1066218 35.46784,41.1516764 C35.46784,41.2211673 35.4969733,41.2799673 35.5567733,41.3257855 C35.61504,41.37084 35.72774,41.3975673 35.8948733,41.4036764 L35.8948733,41.5243309 L34.3163067,41.5243309 L34.3163067,41.4036764 C34.4274733,41.3929855 34.5233067,41.37084 34.6045733,41.3349491 C34.74104,41.27844 34.86984,41.2020764 34.99174,41.1066218 C35.1144067,41.0104036 35.25394,40.8637855 35.4118733,40.66524 L36.46144,39.3449127 L35.5866733,38.0673491 C35.3474733,37.7206582 35.1450733,37.4946218 34.9794733,37.3861855 C34.81234,37.2777491 34.6206733,37.22124 34.40524,37.2143673 L34.40524,37.0937127 L36.46144,37.0937127 L36.46144,37.2143673 C36.28664,37.22124 36.1662733,37.2494945 36.10264,37.2991309 C36.03824,37.3495309 36.0068067,37.4052764 36.0068067,37.4656036 C36.0068067,37.5465491 36.0581733,37.6641491 36.1632067,37.8191673 L36.8447733,38.8348036 L37.6359733,37.8390218 C37.7279733,37.7206582 37.7847067,37.6404764 37.80464,37.5969491 C37.8261067,37.5534218 37.83684,37.5083673 37.83684,37.4633127 C37.83684,37.4167309 37.8238067,37.3762582 37.7969733,37.3418945 C37.7640067,37.2960764 37.7226067,37.2640036 37.6727733,37.2456764 C37.6221733,37.2265855 37.5186733,37.2166582 37.36074,37.2143673 L37.36074,37.0937127 L38.9393067,37.0937127 L38.9393067,37.2143673 C38.81434,37.22124 38.7123733,37.2410945 38.6334067,37.2731673 C38.51534,37.3235673 38.40724,37.3907673 38.30834,37.4762945 C38.2109733,37.5610582 38.0722067,37.7183673 37.89204,37.9459309 L37.0096067,39.0707673 Z" id="Fill-8"></path>
+                        <path d="M51.1390433,37.3354036 L51.1390433,39.0871855 L52.1165433,39.0871855 C52.3710767,39.0871855 52.5397433,39.04824 52.62561,38.97264 C52.7390767,38.8726036 52.80271,38.6962036 52.8157433,38.4426764 L52.9368767,38.4426764 L52.9368767,39.9852218 L52.8157433,39.9852218 C52.78431,39.7698764 52.75441,39.6316582 52.7237433,39.5705673 C52.68541,39.4942036 52.6194767,39.43464 52.53131,39.3903491 C52.4408433,39.3475855 52.3028433,39.32544 52.1165433,39.32544 L51.1390433,39.32544 L51.1390433,40.7862764 C51.1390433,40.9817673 51.1482433,41.1024218 51.16511,41.1436582 C51.1827433,41.1871855 51.21341,41.2207855 51.2563433,41.2452218 C51.3015767,41.2704218 51.38361,41.28264 51.5070433,41.28264 L52.2614433,41.28264 C52.5121433,41.28264 52.6953767,41.2650764 52.80961,41.2307127 C52.92231,41.1963491 53.03271,41.1276218 53.1377433,41.0245309 C53.2726767,40.8886036 53.4114433,40.68624 53.5540433,40.4128582 L53.6851433,40.4128582 L53.3002767,41.5239491 L49.87251,41.5239491 L49.87251,41.4032945 L50.0304433,41.4032945 C50.1354767,41.4032945 50.2343767,41.3788582 50.3286767,41.3284582 C50.3984433,41.2940945 50.4467433,41.24064 50.4712767,41.1719127 C50.4965767,41.1024218 50.50961,40.9588582 50.50961,40.7435127 L50.50961,37.86384 C50.50961,37.5835855 50.4812433,37.41024 50.4237433,37.3453309 C50.3455433,37.2575127 50.2136767,37.2147491 50.0304433,37.2147491 L49.87251,37.2147491 L49.87251,37.0933309 L53.3002767,37.0933309 L53.3508767,38.0639127 L53.2228433,38.0639127 C53.1760767,37.8310036 53.1254767,37.6698764 53.06951,37.5835855 C53.0135433,37.4965309 52.93151,37.4300945 52.82111,37.3842764 C52.7344767,37.35144 52.5803767,37.3354036 52.3603433,37.3354036 L51.1390433,37.3354036 Z" id="Fill-11"></path>
+                        <path d="M68.3067033,40.2997636 L68.4148033,40.3219091 L68.0345367,41.5246364 L64.5891367,41.5246364 L64.5891367,41.4032182 L64.75627,41.4032182 C64.9441033,41.4032182 65.0798033,41.3421273 65.1603033,41.2207091 C65.2063033,41.1512182 65.2293033,40.9893273 65.2293033,40.7365636 L65.2293033,37.8775091 C65.2293033,37.6010727 65.1986367,37.4284909 65.1373033,37.3582364 C65.0522033,37.2620182 64.9257033,37.2146727 64.75627,37.2146727 L64.5891367,37.2146727 L64.5891367,37.0932545 L66.60317,37.0932545 L66.60317,37.2146727 C66.3678033,37.2116182 66.2022033,37.2337636 66.10637,37.2795818 C66.0113033,37.3254 65.9469033,37.3834364 65.9116367,37.4529273 C65.87637,37.5224182 65.8595033,37.6896545 65.8595033,37.9538727 L65.8595033,40.7365636 C65.8595033,40.9175455 65.87637,41.0427818 65.9116367,41.1099818 C65.9377033,41.1558 65.9791033,41.1886364 66.03277,41.2107818 C66.0872033,41.2329273 66.25817,41.2436182 66.5449033,41.2436182 L66.8692033,41.2436182 C67.21037,41.2436182 67.4503367,41.2184182 67.5883367,41.1687818 C67.72557,41.1183818 67.85207,41.0298 67.9655367,40.9022727 C68.0790033,40.7755091 68.1932367,40.5731455 68.3067033,40.2997636" id="Fill-13"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/images/WeltPixel_logo_dark.svg b/app/code/WeltPixel/Backend/view/adminhtml/web/images/WeltPixel_logo_dark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..40698fd1799543720b4ec74d891b35a23a50a79f
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/web/images/WeltPixel_logo_dark.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="69px" height="42px" viewBox="0 0 69 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
+    <title>logo_white</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="weltpixel_homepage-2" transform="translate(-80.000000, -14.000000)" fill="#000000">
+            <g id="1_header">
+                <g id="menu">
+                    <g id="logo_white" transform="translate(80.000000, 14.000000)">
+                        <path d="M68.3067033,29.10096 C67.5730033,29.2078691 66.9842033,29.2613236 66.5334033,29.2613236 C65.9369367,29.2613236 65.47847,29.1628145 65.1580033,28.9719055 C64.83677,28.7741236 64.6083033,28.5144873 64.4626367,28.1876509 C64.3254033,27.8608145 64.2564033,27.1300145 64.2564033,25.9807418 L64.2564033,12.1337236 L68.3067033,12.1337236 L68.3067033,9.01274182 L64.2564033,9.01274182 L64.2564033,0.737978182 L60.2429033,3.14419636 L60.2429033,9.01274182 L57.2866367,9.01274182 L57.2866367,12.1337236 L60.2429033,12.1337236 L60.2429033,25.7592873 C60.2429033,28.1647418 60.4123367,29.74776 60.74047,30.4945964 C61.06937,31.2483055 61.63517,31.8569236 62.4371033,32.3135782 C63.2467033,32.7786327 64.3783033,33.0061964 65.8449367,33.0061964 C66.7396367,33.0061964 67.7562367,32.8847782 68.88707,32.6480509 L68.3067033,29.10096 Z M53.2923033,32.6946327 L57.3196033,32.6946327 L57.3196033,0.000305454545 L53.2923033,0.000305454545 L53.2923033,32.6946327 Z M34.9835367,18.5734691 C35.1215367,16.5108873 35.81767,14.8591418 37.0788367,13.6251055 C38.3392367,12.3925964 39.89787,11.7763418 41.74707,11.7763418 C43.7879367,11.7763418 45.4531367,12.5521964 46.73807,14.09856 C47.57067,15.0867055 48.0828033,16.5872509 48.2591367,18.5734691 L34.9835367,18.5734691 Z M48.2131367,25.0666691 C47.6013367,26.7642327 46.7764033,27.9975055 45.7299033,28.7664873 C44.6826367,29.5431055 43.4207033,29.9310327 41.9464033,29.9310327 C39.9584367,29.9310327 38.30857,29.2384145 36.97917,27.8531782 C35.6482367,26.4755782 34.9076367,24.48096 34.7627367,21.8777236 L52.49267,21.8777236 C52.5080033,21.4050327 52.5149033,21.0476509 52.5149033,20.8040509 C52.5149033,16.8988145 51.5067367,13.8618327 49.4896367,11.7076145 C47.4794367,9.55339636 44.87967,8.47285091 41.7018367,8.47285091 C38.4159033,8.47285091 35.74867,9.57630545 33.6848033,11.7763418 C31.6286033,13.9756145 30.5974367,17.0660509 30.5974367,21.0552873 C30.5974367,24.9070691 31.61327,27.8989964 33.65337,30.0295418 C35.68657,32.1616145 38.44657,33.2268873 41.9234033,33.2268873 C44.6826367,33.2268873 46.9512033,32.5571782 48.73217,31.2253964 C50.50547,29.8852145 51.71987,28.0043782 52.3784367,25.5767782 L48.2131367,25.0666691 Z M7.27543667,32.6946327 L-0.00023,9.01274182 L4.16583667,9.01274182 L7.94780333,22.6848873 L9.35463667,27.7691782 C9.41597,27.5103055 9.82843667,25.8814691 10.58437,22.8819055 L14.36787,9.01274182 L18.51017,9.01274182 L22.07057,22.7452145 L23.2627367,27.2743418 L24.62357,22.6993964 L28.69687,9.01274182 L32.6176033,9.01274182 L25.1817033,32.6946327 L21.00107,32.6946327 L17.2183367,18.5123782 L16.29297,14.4704509 L11.4867367,32.6946327 L7.27543667,32.6946327 Z" id="Fill-1"></path>
+                        <path d="M8.43854667,39.2631273 C8.55431333,39.2852727 8.65704667,39.3013091 8.74674667,39.312 C8.83721333,39.3234545 8.91311333,39.3288 8.97674667,39.3288 C9.20444667,39.3288 9.40071333,39.2409818 9.56631333,39.0661091 C9.73114667,38.8904727 9.81241333,38.6636727 9.81241333,38.3849455 C9.81241333,38.1925091 9.77408,38.0145818 9.69511333,37.8504 C9.61614667,37.6854545 9.50421333,37.5625091 9.36008,37.4808 C9.21594667,37.3990909 9.05188,37.3578545 8.86864667,37.3578545 C8.75671333,37.3578545 8.61334667,37.3792364 8.43854667,37.4204727 L8.43854667,39.2631273 Z M8.43854667,39.4494545 L8.43854667,40.7407636 C8.43854667,41.0187273 8.46921333,41.1920727 8.52978,41.2600364 C8.61334667,41.3554909 8.73984667,41.4036 8.90774667,41.4036 L9.07794667,41.4036 L9.07794667,41.5242545 L7.17201333,41.5242545 L7.17201333,41.4036 L7.33991333,41.4036 C7.52774667,41.4036 7.66191333,41.3425091 7.74241333,41.2203273 C7.78688,41.1531273 7.80911333,40.9935273 7.80911333,40.7407636 L7.80911333,37.8778909 C7.80911333,37.5991636 7.77921333,37.4258182 7.72018,37.3578545 C7.63508,37.2624 7.50781333,37.2142909 7.33991333,37.2142909 L7.17201333,37.2142909 L7.17201333,37.0936364 L8.80348,37.0936364 C9.20061333,37.0936364 9.51418,37.1341091 9.74418,37.2158182 C9.97418,37.2982909 10.16738,37.4349818 10.3253133,37.6297091 C10.48248,37.8236727 10.5614467,38.0527636 10.5614467,38.3192727 C10.5614467,38.6797091 10.4418467,38.9744727 10.20188,39.2012727 C9.96268,39.4280727 9.62381333,39.5410909 9.18681333,39.5410909 C9.08024667,39.5410909 8.96371333,39.5334545 8.83798,39.5181818 C8.71378,39.5029091 8.58114667,39.48 8.43854667,39.4494545 L8.43854667,39.4494545 Z" id="Fill-4"></path>
+                        <path d="M23.4870633,41.4034473 L23.4870633,41.5241018 L21.58113,41.5241018 L21.58113,41.4034473 L21.73753,41.4034473 C21.92153,41.4034473 22.0556967,41.3499927 22.1392633,41.2438473 C22.19063,41.1735927 22.2166967,41.0063564 22.2166967,40.7406109 L22.2166967,37.8777382 C22.2166967,37.6539927 22.2036633,37.5058473 22.17453,37.4333018 C22.1522967,37.3790836 22.10783,37.3317382 22.0395967,37.2927927 C21.9437633,37.2408655 21.84333,37.2149018 21.73753,37.2149018 L21.58113,37.2149018 L21.58113,37.0934836 L23.4870633,37.0934836 L23.4870633,37.2149018 L23.3260633,37.2149018 C23.14513,37.2149018 23.0124967,37.2675927 22.92893,37.3745018 C22.8744967,37.4439927 22.8468967,37.6119927 22.8468967,37.8777382 L22.8468967,40.7406109 C22.8468967,40.96512 22.8614633,41.1125018 22.88983,41.1850473 C22.9112967,41.2392655 22.9580633,41.2858473 23.02783,41.3255564 C23.1213633,41.3782473 23.22103,41.4034473 23.3260633,41.4034473 L23.4870633,41.4034473 Z" id="Fill-6"></path>
+                        <path d="M37.0096067,39.0707673 L37.9648733,40.48884 C38.2286067,40.8805855 38.42564,41.1287673 38.5536733,41.2318582 C38.6817067,41.3364764 38.84424,41.3929855 39.0412733,41.4036764 L39.0412733,41.5243309 L37.13074,41.5243309 L37.13074,41.4036764 C37.2580067,41.4021491 37.35154,41.3884036 37.4128733,41.3647309 C37.45964,41.34564 37.49644,41.3150945 37.52634,41.2753855 C37.5554733,41.2349127 37.5715733,41.1929127 37.5715733,41.1516764 C37.5715733,41.10204 37.56084,41.0524036 37.5409067,41.0020036 C37.5255733,40.9645855 37.4657733,40.8691309 37.36074,40.7141127 L36.60634,39.5762945 L35.6740733,40.7668036 C35.57594,40.8935673 35.5176733,40.9775673 35.4969733,41.0203309 C35.47704,41.0615673 35.46784,41.1066218 35.46784,41.1516764 C35.46784,41.2211673 35.4969733,41.2799673 35.5567733,41.3257855 C35.61504,41.37084 35.72774,41.3975673 35.8948733,41.4036764 L35.8948733,41.5243309 L34.3163067,41.5243309 L34.3163067,41.4036764 C34.4274733,41.3929855 34.5233067,41.37084 34.6045733,41.3349491 C34.74104,41.27844 34.86984,41.2020764 34.99174,41.1066218 C35.1144067,41.0104036 35.25394,40.8637855 35.4118733,40.66524 L36.46144,39.3449127 L35.5866733,38.0673491 C35.3474733,37.7206582 35.1450733,37.4946218 34.9794733,37.3861855 C34.81234,37.2777491 34.6206733,37.22124 34.40524,37.2143673 L34.40524,37.0937127 L36.46144,37.0937127 L36.46144,37.2143673 C36.28664,37.22124 36.1662733,37.2494945 36.10264,37.2991309 C36.03824,37.3495309 36.0068067,37.4052764 36.0068067,37.4656036 C36.0068067,37.5465491 36.0581733,37.6641491 36.1632067,37.8191673 L36.8447733,38.8348036 L37.6359733,37.8390218 C37.7279733,37.7206582 37.7847067,37.6404764 37.80464,37.5969491 C37.8261067,37.5534218 37.83684,37.5083673 37.83684,37.4633127 C37.83684,37.4167309 37.8238067,37.3762582 37.7969733,37.3418945 C37.7640067,37.2960764 37.7226067,37.2640036 37.6727733,37.2456764 C37.6221733,37.2265855 37.5186733,37.2166582 37.36074,37.2143673 L37.36074,37.0937127 L38.9393067,37.0937127 L38.9393067,37.2143673 C38.81434,37.22124 38.7123733,37.2410945 38.6334067,37.2731673 C38.51534,37.3235673 38.40724,37.3907673 38.30834,37.4762945 C38.2109733,37.5610582 38.0722067,37.7183673 37.89204,37.9459309 L37.0096067,39.0707673 Z" id="Fill-8"></path>
+                        <path d="M51.1390433,37.3354036 L51.1390433,39.0871855 L52.1165433,39.0871855 C52.3710767,39.0871855 52.5397433,39.04824 52.62561,38.97264 C52.7390767,38.8726036 52.80271,38.6962036 52.8157433,38.4426764 L52.9368767,38.4426764 L52.9368767,39.9852218 L52.8157433,39.9852218 C52.78431,39.7698764 52.75441,39.6316582 52.7237433,39.5705673 C52.68541,39.4942036 52.6194767,39.43464 52.53131,39.3903491 C52.4408433,39.3475855 52.3028433,39.32544 52.1165433,39.32544 L51.1390433,39.32544 L51.1390433,40.7862764 C51.1390433,40.9817673 51.1482433,41.1024218 51.16511,41.1436582 C51.1827433,41.1871855 51.21341,41.2207855 51.2563433,41.2452218 C51.3015767,41.2704218 51.38361,41.28264 51.5070433,41.28264 L52.2614433,41.28264 C52.5121433,41.28264 52.6953767,41.2650764 52.80961,41.2307127 C52.92231,41.1963491 53.03271,41.1276218 53.1377433,41.0245309 C53.2726767,40.8886036 53.4114433,40.68624 53.5540433,40.4128582 L53.6851433,40.4128582 L53.3002767,41.5239491 L49.87251,41.5239491 L49.87251,41.4032945 L50.0304433,41.4032945 C50.1354767,41.4032945 50.2343767,41.3788582 50.3286767,41.3284582 C50.3984433,41.2940945 50.4467433,41.24064 50.4712767,41.1719127 C50.4965767,41.1024218 50.50961,40.9588582 50.50961,40.7435127 L50.50961,37.86384 C50.50961,37.5835855 50.4812433,37.41024 50.4237433,37.3453309 C50.3455433,37.2575127 50.2136767,37.2147491 50.0304433,37.2147491 L49.87251,37.2147491 L49.87251,37.0933309 L53.3002767,37.0933309 L53.3508767,38.0639127 L53.2228433,38.0639127 C53.1760767,37.8310036 53.1254767,37.6698764 53.06951,37.5835855 C53.0135433,37.4965309 52.93151,37.4300945 52.82111,37.3842764 C52.7344767,37.35144 52.5803767,37.3354036 52.3603433,37.3354036 L51.1390433,37.3354036 Z" id="Fill-11"></path>
+                        <path d="M68.3067033,40.2997636 L68.4148033,40.3219091 L68.0345367,41.5246364 L64.5891367,41.5246364 L64.5891367,41.4032182 L64.75627,41.4032182 C64.9441033,41.4032182 65.0798033,41.3421273 65.1603033,41.2207091 C65.2063033,41.1512182 65.2293033,40.9893273 65.2293033,40.7365636 L65.2293033,37.8775091 C65.2293033,37.6010727 65.1986367,37.4284909 65.1373033,37.3582364 C65.0522033,37.2620182 64.9257033,37.2146727 64.75627,37.2146727 L64.5891367,37.2146727 L64.5891367,37.0932545 L66.60317,37.0932545 L66.60317,37.2146727 C66.3678033,37.2116182 66.2022033,37.2337636 66.10637,37.2795818 C66.0113033,37.3254 65.9469033,37.3834364 65.9116367,37.4529273 C65.87637,37.5224182 65.8595033,37.6896545 65.8595033,37.9538727 L65.8595033,40.7365636 C65.8595033,40.9175455 65.87637,41.0427818 65.9116367,41.1099818 C65.9377033,41.1558 65.9791033,41.1886364 66.03277,41.2107818 C66.0872033,41.2329273 66.25817,41.2436182 66.5449033,41.2436182 L66.8692033,41.2436182 C67.21037,41.2436182 67.4503367,41.2184182 67.5883367,41.1687818 C67.72557,41.1183818 67.85207,41.0298 67.9655367,40.9022727 C68.0790033,40.7755091 68.1932367,40.5731455 68.3067033,40.2997636" id="Fill-13"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/arrow.gif b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/arrow.gif
new file mode 100644
index 0000000000000000000000000000000000000000..246478a864f812d93d4cd0e0d0ad1c8e2d09c825
Binary files /dev/null and b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/arrow.gif differ
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/cross.gif b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/cross.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0ee9c7ac517bee40b78aea03afa809631f0b69fa
Binary files /dev/null and b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/cross.gif differ
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/hs.png b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/hs.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d94486cedaf7111d010fdaf2cefad45fd1f878b
Binary files /dev/null and b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/hs.png differ
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/hv.png b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/hv.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c5e01f8bcecc4cf835e8eeeaa43ef2c06789022
Binary files /dev/null and b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/hv.png differ
diff --git a/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/jscolor.js b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/jscolor.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef3bce5898ae640d412a1afdcac56a86c298d2c9
--- /dev/null
+++ b/app/code/WeltPixel/Backend/view/adminhtml/web/jscolor/jscolor.js
@@ -0,0 +1,997 @@
+/**
+ * jscolor, JavaScript Color Picker
+ *
+ * @version 1.4.3
+ * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
+ * @author  Jan Odvarko, http://odvarko.cz
+ * @created 2008-06-15
+ * @updated 2014-07-16
+ * @link    http://jscolor.com
+ */
+
+
+var jscolor = {
+
+
+	dir : '', // location of jscolor directory (leave empty to autodetect)
+	bindClass : 'color', // class name
+	binding : true, // automatic binding via <input class="...">
+	preloading : true, // use image preloading?
+
+
+	install : function() {
+		jscolor.addEvent(window, 'load', jscolor.init);
+	},
+
+
+	init : function() {
+		if(jscolor.binding) {
+			jscolor.bind();
+		}
+		if(jscolor.preloading) {
+			jscolor.preload();
+		}
+	},
+
+
+	getDir : function() {
+		if(!jscolor.dir) {
+			var detected = jscolor.detectDir();
+			jscolor.dir = detected!==false ? detected : 'jscolor/';
+		}
+		return jscolor.dir;
+	},
+
+
+	detectDir : function() {
+		var base = location.href;
+
+		var e = document.getElementsByTagName('base');
+		for(var i=0; i<e.length; i+=1) {
+			if(e[i].href) { base = e[i].href; }
+		}
+
+		var e = document.getElementsByTagName('script');
+		for(var i=0; i<e.length; i+=1) {
+			if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
+				var src = new jscolor.URI(e[i].src);
+				var srcAbs = src.toAbsolute(base);
+				srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
+				srcAbs.query = null;
+				srcAbs.fragment = null;
+				return srcAbs.toString();
+			}
+		}
+		return false;
+	},
+
+
+	bind : function() {
+		var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
+		var e = document.getElementsByTagName('input');
+		for(var i=0; i<e.length; i+=1) {
+			var m;
+			if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
+				var prop = {};
+				if(m[4]) {
+					try {
+						prop = (new Function ('return (' + m[4] + ')'))();
+					} catch(eInvalidProp) {}
+				}
+				e[i].color = new jscolor.color(e[i], prop);
+			}
+		}
+	},
+
+
+	preload : function() {
+		for(var fn in jscolor.imgRequire) {
+			if(jscolor.imgRequire.hasOwnProperty(fn)) {
+				jscolor.loadImage(fn);
+			}
+		}
+	},
+
+
+	images : {
+		pad : [ 181, 101 ],
+		sld : [ 16, 101 ],
+		cross : [ 15, 15 ],
+		arrow : [ 7, 11 ]
+	},
+
+
+	imgRequire : {},
+	imgLoaded : {},
+
+
+	requireImage : function(filename) {
+		jscolor.imgRequire[filename] = true;
+	},
+
+
+	loadImage : function(filename) {
+		if(!jscolor.imgLoaded[filename]) {
+			jscolor.imgLoaded[filename] = new Image();
+			jscolor.imgLoaded[filename].src = jscolor.getDir()+filename;
+		}
+	},
+
+
+	fetchElement : function(mixed) {
+		return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
+	},
+
+
+	addEvent : function(el, evnt, func) {
+		if(el.addEventListener) {
+			el.addEventListener(evnt, func, false);
+		} else if(el.attachEvent) {
+			el.attachEvent('on'+evnt, func);
+		}
+	},
+
+
+	fireEvent : function(el, evnt) {
+		if(!el) {
+			return;
+		}
+		if(document.createEvent) {
+			var ev = document.createEvent('HTMLEvents');
+			ev.initEvent(evnt, true, true);
+			el.dispatchEvent(ev);
+		} else if(document.createEventObject) {
+			var ev = document.createEventObject();
+			el.fireEvent('on'+evnt, ev);
+		} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
+			el['on'+evnt]();
+		}
+	},
+
+
+	getElementPos : function(e) {
+		var e1=e, e2=e;
+		var x=0, y=0;
+		if(e1.offsetParent) {
+			do {
+				x += e1.offsetLeft;
+				y += e1.offsetTop;
+			} while(e1 = e1.offsetParent);
+		}
+		while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
+			x -= e2.scrollLeft;
+			y -= e2.scrollTop;
+		}
+		return [x, y];
+	},
+
+
+	getElementSize : function(e) {
+		return [e.offsetWidth, e.offsetHeight];
+	},
+
+
+	getRelMousePos : function(e) {
+		var x = 0, y = 0;
+		if (!e) { e = window.event; }
+		if (typeof e.offsetX === 'number') {
+			x = e.offsetX;
+			y = e.offsetY;
+		} else if (typeof e.layerX === 'number') {
+			x = e.layerX;
+			y = e.layerY;
+		}
+		return { x: x, y: y };
+	},
+
+
+	getViewPos : function() {
+		if(typeof window.pageYOffset === 'number') {
+			return [window.pageXOffset, window.pageYOffset];
+		} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
+			return [document.body.scrollLeft, document.body.scrollTop];
+		} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
+			return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
+		} else {
+			return [0, 0];
+		}
+	},
+
+
+	getViewSize : function() {
+		if(typeof window.innerWidth === 'number') {
+			return [window.innerWidth, window.innerHeight];
+		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
+			return [document.body.clientWidth, document.body.clientHeight];
+		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
+			return [document.documentElement.clientWidth, document.documentElement.clientHeight];
+		} else {
+			return [0, 0];
+		}
+	},
+
+
+	URI : function(uri) { // See RFC3986
+
+		this.scheme = null;
+		this.authority = null;
+		this.path = '';
+		this.query = null;
+		this.fragment = null;
+
+		this.parse = function(uri) {
+			var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
+			this.scheme = m[3] ? m[2] : null;
+			this.authority = m[5] ? m[6] : null;
+			this.path = m[7];
+			this.query = m[9] ? m[10] : null;
+			this.fragment = m[12] ? m[13] : null;
+			return this;
+		};
+
+		this.toString = function() {
+			var result = '';
+			if(this.scheme !== null) { result = result + this.scheme + ':'; }
+			if(this.authority !== null) { result = result + '//' + this.authority; }
+			if(this.path !== null) { result = result + this.path; }
+			if(this.query !== null) { result = result + '?' + this.query; }
+			if(this.fragment !== null) { result = result + '#' + this.fragment; }
+			return result;
+		};
+
+		this.toAbsolute = function(base) {
+			var base = new jscolor.URI(base);
+			var r = this;
+			var t = new jscolor.URI;
+
+			if(base.scheme === null) { return false; }
+
+			if(r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase()) {
+				r.scheme = null;
+			}
+
+			if(r.scheme !== null) {
+				t.scheme = r.scheme;
+				t.authority = r.authority;
+				t.path = removeDotSegments(r.path);
+				t.query = r.query;
+			} else {
+				if(r.authority !== null) {
+					t.authority = r.authority;
+					t.path = removeDotSegments(r.path);
+					t.query = r.query;
+				} else {
+					if(r.path === '') {
+						t.path = base.path;
+						if(r.query !== null) {
+							t.query = r.query;
+						} else {
+							t.query = base.query;
+						}
+					} else {
+						if(r.path.substr(0,1) === '/') {
+							t.path = removeDotSegments(r.path);
+						} else {
+							if(base.authority !== null && base.path === '') {
+								t.path = '/'+r.path;
+							} else {
+								t.path = base.path.replace(/[^\/]+$/,'')+r.path;
+							}
+							t.path = removeDotSegments(t.path);
+						}
+						t.query = r.query;
+					}
+					t.authority = base.authority;
+				}
+				t.scheme = base.scheme;
+			}
+			t.fragment = r.fragment;
+
+			return t;
+		};
+
+		function removeDotSegments(path) {
+			var out = '';
+			while(path) {
+				if(path.substr(0,3)==='../' || path.substr(0,2)==='./') {
+					path = path.replace(/^\.+/,'').substr(1);
+				} else if(path.substr(0,3)==='/./' || path==='/.') {
+					path = '/'+path.substr(3);
+				} else if(path.substr(0,4)==='/../' || path==='/..') {
+					path = '/'+path.substr(4);
+					out = out.replace(/\/?[^\/]*$/, '');
+				} else if(path==='.' || path==='..') {
+					path = '';
+				} else {
+					var rm = path.match(/^\/?[^\/]*/)[0];
+					path = path.substr(rm.length);
+					out = out + rm;
+				}
+			}
+			return out;
+		}
+
+		if(uri) {
+			this.parse(uri);
+		}
+
+	},
+
+
+	//
+	// Usage example:
+	// var myColor = new jscolor.color(myInputElement)
+	//
+
+	color : function(target, prop) {
+
+
+		this.required = true; // refuse empty values?
+		this.adjust = true; // adjust value to uniform notation?
+		this.hash = false; // prefix color with # symbol?
+		this.caps = true; // uppercase?
+		this.slider = true; // show the value/saturation slider?
+		this.valueElement = target; // value holder
+		this.styleElement = target; // where to reflect current color
+		this.onImmediateChange = null; // onchange callback (can be either string or function)
+		this.hsv = [0, 0, 1]; // read-only  0-6, 0-1, 0-1
+		this.rgb = [1, 1, 1]; // read-only  0-1, 0-1, 0-1
+		this.minH = 0; // read-only  0-6
+		this.maxH = 6; // read-only  0-6
+		this.minS = 0; // read-only  0-1
+		this.maxS = 1; // read-only  0-1
+		this.minV = 0; // read-only  0-1
+		this.maxV = 1; // read-only  0-1
+
+		this.pickerOnfocus = true; // display picker on focus?
+		this.pickerMode = 'HSV'; // HSV | HVS
+		this.pickerPosition = 'bottom'; // left | right | top | bottom
+		this.pickerSmartPosition = true; // automatically adjust picker position when necessary
+		this.pickerButtonHeight = 20; // px
+		this.pickerClosable = false;
+		this.pickerCloseText = 'Close';
+		this.pickerButtonColor = 'ButtonText'; // px
+		this.pickerFace = 10; // px
+		this.pickerFaceColor = 'ThreeDFace'; // CSS color
+		this.pickerBorder = 1; // px
+		this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
+		this.pickerInset = 1; // px
+		this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
+		this.pickerZIndex = 10000;
+
+
+		for(var p in prop) {
+			if(prop.hasOwnProperty(p)) {
+				this[p] = prop[p];
+			}
+		}
+
+
+		this.hidePicker = function() {
+			if(isPickerOwner()) {
+				removePicker();
+			}
+		};
+
+
+		this.showPicker = function() {
+			if(!isPickerOwner()) {
+				var tp = jscolor.getElementPos(target); // target pos
+				var ts = jscolor.getElementSize(target); // target size
+				var vp = jscolor.getViewPos(); // view pos
+				var vs = jscolor.getViewSize(); // view size
+				var ps = getPickerDims(this); // picker size
+				var a, b, c;
+				switch(this.pickerPosition.toLowerCase()) {
+					case 'left': a=1; b=0; c=-1; break;
+					case 'right':a=1; b=0; c=1; break;
+					case 'top':  a=0; b=1; c=-1; break;
+					default:     a=0; b=1; c=1; break;
+				}
+				var l = (ts[b]+ps[b])/2;
+
+				// picker pos
+				if (!this.pickerSmartPosition) {
+					var pp = [
+						tp[a],
+						tp[b]+ts[b]-l+l*c
+					];
+				} else {
+					var pp = [
+						-vp[a]+tp[a]+ps[a] > vs[a] ?
+							(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
+							tp[a],
+						-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
+							(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
+							(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
+					];
+				}
+				drawPicker(pp[a], pp[b]);
+			}
+		};
+
+
+		this.importColor = function() {
+			if(!valueElement) {
+				this.exportColor();
+			} else {
+				if(!this.adjust) {
+					if(!this.fromString(valueElement.value, leaveValue)) {
+						styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+						styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+						styleElement.style.color = styleElement.jscStyle.color;
+						this.exportColor(leaveValue | leaveStyle);
+					}
+				} else if(!this.required && /^\s*$/.test(valueElement.value)) {
+					valueElement.value = '';
+					styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+					styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+					styleElement.style.color = styleElement.jscStyle.color;
+					this.exportColor(leaveValue | leaveStyle);
+
+				} else if(this.fromString(valueElement.value)) {
+					// OK
+				} else {
+					this.exportColor();
+				}
+			}
+		};
+
+
+		this.exportColor = function(flags) {
+			if(!(flags & leaveValue) && valueElement) {
+				var value = this.toString();
+				if(this.caps) { value = value.toUpperCase(); }
+				if(this.hash) { value = '#'+value; }
+				valueElement.value = value;
+			}
+			if(!(flags & leaveStyle) && styleElement) {
+				styleElement.style.backgroundImage = "none";
+				styleElement.style.backgroundColor =
+					'#'+this.toString();
+				styleElement.style.color =
+					0.213 * this.rgb[0] +
+					0.715 * this.rgb[1] +
+					0.072 * this.rgb[2]
+					< 0.5 ? '#FFF' : '#000';
+			}
+			if(!(flags & leavePad) && isPickerOwner()) {
+				redrawPad();
+			}
+			if(!(flags & leaveSld) && isPickerOwner()) {
+				redrawSld();
+			}
+		};
+
+
+		this.fromHSV = function(h, s, v, flags) { // null = don't change
+			if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
+			if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
+			if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
+
+			this.rgb = HSV_RGB(
+				h===null ? this.hsv[0] : (this.hsv[0]=h),
+				s===null ? this.hsv[1] : (this.hsv[1]=s),
+				v===null ? this.hsv[2] : (this.hsv[2]=v)
+			);
+
+			this.exportColor(flags);
+		};
+
+
+		this.fromRGB = function(r, g, b, flags) { // null = don't change
+			if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
+			if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
+			if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
+
+			var hsv = RGB_HSV(
+				r===null ? this.rgb[0] : r,
+				g===null ? this.rgb[1] : g,
+				b===null ? this.rgb[2] : b
+			);
+			if(hsv[0] !== null) {
+				this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
+			}
+			if(hsv[2] !== 0) {
+				this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
+			}
+			this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
+
+			// update RGB according to final HSV, as some values might be trimmed
+			var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
+			this.rgb[0] = rgb[0];
+			this.rgb[1] = rgb[1];
+			this.rgb[2] = rgb[2];
+
+			this.exportColor(flags);
+		};
+
+
+		this.fromString = function(hex, flags) {
+			var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
+			if(!m) {
+				return false;
+			} else {
+				if(m[1].length === 6) { // 6-char notation
+					this.fromRGB(
+						parseInt(m[1].substr(0,2),16) / 255,
+						parseInt(m[1].substr(2,2),16) / 255,
+						parseInt(m[1].substr(4,2),16) / 255,
+						flags
+					);
+				} else { // 3-char notation
+					this.fromRGB(
+						parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
+						parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
+						parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
+						flags
+					);
+				}
+				return true;
+			}
+		};
+
+
+		this.toString = function() {
+			return (
+				(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
+				(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
+				(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
+			);
+		};
+
+
+		function RGB_HSV(r, g, b) {
+			var n = Math.min(Math.min(r,g),b);
+			var v = Math.max(Math.max(r,g),b);
+			var m = v - n;
+			if(m === 0) { return [ null, 0, v ]; }
+			var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
+			return [ h===6?0:h, m/v, v ];
+		}
+
+
+		function HSV_RGB(h, s, v) {
+			if(h === null) { return [ v, v, v ]; }
+			var i = Math.floor(h);
+			var f = i%2 ? h-i : 1-(h-i);
+			var m = v * (1 - s);
+			var n = v * (1 - s*f);
+			switch(i) {
+				case 6:
+				case 0: return [v,n,m];
+				case 1: return [n,v,m];
+				case 2: return [m,v,n];
+				case 3: return [m,n,v];
+				case 4: return [n,m,v];
+				case 5: return [v,m,n];
+			}
+		}
+
+
+		function removePicker() {
+			delete jscolor.picker.owner;
+			document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
+		}
+
+
+		function drawPicker(x, y) {
+			if(!jscolor.picker) {
+				jscolor.picker = {
+					box : document.createElement('div'),
+					boxB : document.createElement('div'),
+					pad : document.createElement('div'),
+					padB : document.createElement('div'),
+					padM : document.createElement('div'),
+					sld : document.createElement('div'),
+					sldB : document.createElement('div'),
+					sldM : document.createElement('div'),
+					btn : document.createElement('div'),
+					btnS : document.createElement('span'),
+					btnT : document.createTextNode(THIS.pickerCloseText)
+				};
+				for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
+					var seg = document.createElement('div');
+					seg.style.height = segSize+'px';
+					seg.style.fontSize = '1px';
+					seg.style.lineHeight = '0';
+					jscolor.picker.sld.appendChild(seg);
+				}
+				jscolor.picker.sldB.appendChild(jscolor.picker.sld);
+				jscolor.picker.box.appendChild(jscolor.picker.sldB);
+				jscolor.picker.box.appendChild(jscolor.picker.sldM);
+				jscolor.picker.padB.appendChild(jscolor.picker.pad);
+				jscolor.picker.box.appendChild(jscolor.picker.padB);
+				jscolor.picker.box.appendChild(jscolor.picker.padM);
+				jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
+				jscolor.picker.btn.appendChild(jscolor.picker.btnS);
+				jscolor.picker.box.appendChild(jscolor.picker.btn);
+				jscolor.picker.boxB.appendChild(jscolor.picker.box);
+			}
+
+			var p = jscolor.picker;
+
+			// controls interaction
+			p.box.onmouseup =
+			p.box.onmouseout = function() { target.focus(); };
+			p.box.onmousedown = function() { abortBlur=true; };
+			p.box.onmousemove = function(e) {
+				if (holdPad || holdSld) {
+					holdPad && setPad(e);
+					holdSld && setSld(e);
+					if (document.selection) {
+						document.selection.empty();
+					} else if (window.getSelection) {
+						window.getSelection().removeAllRanges();
+					}
+					dispatchImmediateChange();
+				}
+			};
+			if('ontouchstart' in window) { // if touch device
+				var handle_touchmove = function(e) {
+					var event={
+						'offsetX': e.touches[0].pageX-touchOffset.X,
+						'offsetY': e.touches[0].pageY-touchOffset.Y
+					};
+					if (holdPad || holdSld) {
+						holdPad && setPad(event);
+						holdSld && setSld(event);
+						dispatchImmediateChange();
+					}
+					e.stopPropagation(); // prevent move "view" on broswer
+					e.preventDefault(); // prevent Default - Android Fix (else android generated only 1-2 touchmove events)
+				};
+				p.box.removeEventListener('touchmove', handle_touchmove, false)
+				p.box.addEventListener('touchmove', handle_touchmove, false)
+			}
+			p.padM.onmouseup =
+			p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
+			p.padM.onmousedown = function(e) {
+				// if the slider is at the bottom, move it up
+				switch(modeID) {
+					case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
+					case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
+				}
+				holdSld=false;
+				holdPad=true;
+				setPad(e);
+				dispatchImmediateChange();
+			};
+			if('ontouchstart' in window) {
+				p.padM.addEventListener('touchstart', function(e) {
+					touchOffset={
+						'X': e.target.offsetParent.offsetLeft,
+						'Y': e.target.offsetParent.offsetTop
+					};
+					this.onmousedown({
+						'offsetX':e.touches[0].pageX-touchOffset.X,
+						'offsetY':e.touches[0].pageY-touchOffset.Y
+					});
+				});
+			}
+			p.sldM.onmouseup =
+			p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
+			p.sldM.onmousedown = function(e) {
+				holdPad=false;
+				holdSld=true;
+				setSld(e);
+				dispatchImmediateChange();
+			};
+			if('ontouchstart' in window) {
+				p.sldM.addEventListener('touchstart', function(e) {
+					touchOffset={
+						'X': e.target.offsetParent.offsetLeft,
+						'Y': e.target.offsetParent.offsetTop
+					};
+					this.onmousedown({
+						'offsetX':e.touches[0].pageX-touchOffset.X,
+						'offsetY':e.touches[0].pageY-touchOffset.Y
+					});
+				});
+			}
+
+			// picker
+			var dims = getPickerDims(THIS);
+			p.box.style.width = dims[0] + 'px';
+			p.box.style.height = dims[1] + 'px';
+
+			// picker border
+			p.boxB.style.position = 'absolute';
+			p.boxB.style.clear = 'both';
+			p.boxB.style.left = x+'px';
+			p.boxB.style.top = y+'px';
+			p.boxB.style.zIndex = THIS.pickerZIndex;
+			p.boxB.style.border = THIS.pickerBorder+'px solid';
+			p.boxB.style.borderColor = THIS.pickerBorderColor;
+			p.boxB.style.background = THIS.pickerFaceColor;
+
+			// pad image
+			p.pad.style.width = jscolor.images.pad[0]+'px';
+			p.pad.style.height = jscolor.images.pad[1]+'px';
+
+			// pad border
+			p.padB.style.position = 'absolute';
+			p.padB.style.left = THIS.pickerFace+'px';
+			p.padB.style.top = THIS.pickerFace+'px';
+			p.padB.style.border = THIS.pickerInset+'px solid';
+			p.padB.style.borderColor = THIS.pickerInsetColor;
+
+			// pad mouse area
+			p.padM.style.position = 'absolute';
+			p.padM.style.left = '0';
+			p.padM.style.top = '0';
+			p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
+			p.padM.style.height = p.box.style.height;
+			p.padM.style.cursor = 'crosshair';
+
+			// slider image
+			p.sld.style.overflow = 'hidden';
+			p.sld.style.width = jscolor.images.sld[0]+'px';
+			p.sld.style.height = jscolor.images.sld[1]+'px';
+
+			// slider border
+			p.sldB.style.display = THIS.slider ? 'block' : 'none';
+			p.sldB.style.position = 'absolute';
+			p.sldB.style.right = THIS.pickerFace+'px';
+			p.sldB.style.top = THIS.pickerFace+'px';
+			p.sldB.style.border = THIS.pickerInset+'px solid';
+			p.sldB.style.borderColor = THIS.pickerInsetColor;
+
+			// slider mouse area
+			p.sldM.style.display = THIS.slider ? 'block' : 'none';
+			p.sldM.style.position = 'absolute';
+			p.sldM.style.right = '0';
+			p.sldM.style.top = '0';
+			p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
+			p.sldM.style.height = p.box.style.height;
+			try {
+				p.sldM.style.cursor = 'pointer';
+			} catch(eOldIE) {
+				p.sldM.style.cursor = 'hand';
+			}
+
+			// "close" button
+			function setBtnBorder() {
+				var insetColors = THIS.pickerInsetColor.split(/\s+/);
+				var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
+				p.btn.style.borderColor = pickerOutsetColor;
+			}
+			p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
+			p.btn.style.position = 'absolute';
+			p.btn.style.left = THIS.pickerFace + 'px';
+			p.btn.style.bottom = THIS.pickerFace + 'px';
+			p.btn.style.padding = '0 15px';
+			p.btn.style.height = '18px';
+			p.btn.style.border = THIS.pickerInset + 'px solid';
+			setBtnBorder();
+			p.btn.style.color = THIS.pickerButtonColor;
+			p.btn.style.font = '12px sans-serif';
+			p.btn.style.textAlign = 'center';
+			try {
+				p.btn.style.cursor = 'pointer';
+			} catch(eOldIE) {
+				p.btn.style.cursor = 'hand';
+			}
+			p.btn.onmousedown = function () {
+				THIS.hidePicker();
+			};
+			p.btnS.style.lineHeight = p.btn.style.height;
+
+			// load images in optimal order
+			switch(modeID) {
+				case 0: var padImg = 'hs.png'; break;
+				case 1: var padImg = 'hv.png'; break;
+			}
+			p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
+			p.padM.style.backgroundRepeat = "no-repeat";
+			p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
+			p.sldM.style.backgroundRepeat = "no-repeat";
+			p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
+			p.pad.style.backgroundRepeat = "no-repeat";
+			p.pad.style.backgroundPosition = "0 0";
+
+			// place pointers
+			redrawPad();
+			redrawSld();
+
+			jscolor.picker.owner = THIS;
+			document.getElementsByTagName('body')[0].appendChild(p.boxB);
+		}
+
+
+		function getPickerDims(o) {
+			var dims = [
+				2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
+					(o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
+				o.pickerClosable ?
+					4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
+					2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
+			];
+			return dims;
+		}
+
+
+		function redrawPad() {
+			// redraw the pad pointer
+			switch(modeID) {
+				case 0: var yComponent = 1; break;
+				case 1: var yComponent = 2; break;
+			}
+			var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
+			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
+			jscolor.picker.padM.style.backgroundPosition =
+				(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
+				(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
+
+			// redraw the slider image
+			var seg = jscolor.picker.sld.childNodes;
+
+			switch(modeID) {
+				case 0:
+					var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
+					for(var i=0; i<seg.length; i+=1) {
+						seg[i].style.backgroundColor = 'rgb('+
+							(rgb[0]*(1-i/seg.length)*100)+'%,'+
+							(rgb[1]*(1-i/seg.length)*100)+'%,'+
+							(rgb[2]*(1-i/seg.length)*100)+'%)';
+					}
+					break;
+				case 1:
+					var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
+					var i = Math.floor(THIS.hsv[0]);
+					var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
+					switch(i) {
+						case 6:
+						case 0: rgb=[0,1,2]; break;
+						case 1: rgb=[1,0,2]; break;
+						case 2: rgb=[2,0,1]; break;
+						case 3: rgb=[2,1,0]; break;
+						case 4: rgb=[1,2,0]; break;
+						case 5: rgb=[0,2,1]; break;
+					}
+					for(var i=0; i<seg.length; i+=1) {
+						s = 1 - 1/(seg.length-1)*i;
+						c[1] = c[0] * (1 - s*f);
+						c[2] = c[0] * (1 - s);
+						seg[i].style.backgroundColor = 'rgb('+
+							(c[rgb[0]]*100)+'%,'+
+							(c[rgb[1]]*100)+'%,'+
+							(c[rgb[2]]*100)+'%)';
+					}
+					break;
+			}
+		}
+
+
+		function redrawSld() {
+			// redraw the slider pointer
+			switch(modeID) {
+				case 0: var yComponent = 2; break;
+				case 1: var yComponent = 1; break;
+			}
+			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
+			jscolor.picker.sldM.style.backgroundPosition =
+				'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
+		}
+
+
+		function isPickerOwner() {
+			return jscolor.picker && jscolor.picker.owner === THIS;
+		}
+
+
+		function blurTarget() {
+			if(valueElement === target) {
+				THIS.importColor();
+			}
+			if(THIS.pickerOnfocus) {
+				THIS.hidePicker();
+			}
+		}
+
+
+		function blurValue() {
+			if(valueElement !== target) {
+				THIS.importColor();
+			}
+		}
+
+
+		function setPad(e) {
+			var mpos = jscolor.getRelMousePos(e);
+			var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
+			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
+			switch(modeID) {
+				case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
+				case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
+			}
+		}
+
+
+		function setSld(e) {
+			var mpos = jscolor.getRelMousePos(e);
+			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
+			switch(modeID) {
+				case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
+				case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
+			}
+		}
+
+
+		function dispatchImmediateChange() {
+			if (THIS.onImmediateChange) {
+				var callback;
+				if (typeof THIS.onImmediateChange === 'string') {
+					callback = new Function (THIS.onImmediateChange);
+				} else {
+					callback = THIS.onImmediateChange;
+				}
+				callback.call(THIS);
+			}
+		}
+
+
+		var THIS = this;
+		var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
+		var abortBlur = false;
+		var
+			valueElement = jscolor.fetchElement(this.valueElement),
+			styleElement = jscolor.fetchElement(this.styleElement);
+		var
+			holdPad = false,
+			holdSld = false,
+			touchOffset = {};
+		var
+			leaveValue = 1<<0,
+			leaveStyle = 1<<1,
+			leavePad = 1<<2,
+			leaveSld = 1<<3;
+
+		// target
+		jscolor.addEvent(target, 'focus', function() {
+			if(THIS.pickerOnfocus) { THIS.showPicker(); }
+		});
+		jscolor.addEvent(target, 'blur', function() {
+			if(!abortBlur) {
+				window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
+			} else {
+				abortBlur = false;
+			}
+		});
+
+		// valueElement
+		if(valueElement) {
+			var updateField = function() {
+				THIS.fromString(valueElement.value, leaveValue);
+				dispatchImmediateChange();
+			};
+			jscolor.addEvent(valueElement, 'keyup', updateField);
+			jscolor.addEvent(valueElement, 'input', updateField);
+			jscolor.addEvent(valueElement, 'blur', blurValue);
+			valueElement.setAttribute('autocomplete', 'off');
+		}
+
+		// styleElement
+		if(styleElement) {
+			styleElement.jscStyle = {
+				backgroundImage : styleElement.style.backgroundImage,
+				backgroundColor : styleElement.style.backgroundColor,
+				color : styleElement.style.color
+			};
+		}
+
+		// require images
+		switch(modeID) {
+			case 0: jscolor.requireImage('hs.png'); break;
+			case 1: jscolor.requireImage('hv.png'); break;
+		}
+		jscolor.requireImage('cross.gif');
+		jscolor.requireImage('arrow.gif');
+
+		this.importColor();
+	}
+
+};
+
+
+jscolor.install();
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner.php
new file mode 100644
index 0000000000000000000000000000000000000000..4b4c79961a2af338e80b86b46b13f82a00068e0e
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml;
+
+/**
+ * Banner grid container
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Banner extends \Magento\Backend\Block\Widget\Grid\Container
+{
+    /**
+     * Internal constructor, that is called from real constructor
+     * @return void
+     */
+    protected function _construct()
+    {
+        $this->_controller = 'adminhtml_banner';
+        $this->_blockGroup = 'WeltPixel_OwlCarouselSlider';
+        $this->_headerText = __('Banners');
+        $this->_addButtonLabel = __('Add New Banner');
+
+        parent::_construct();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit.php
new file mode 100644
index 0000000000000000000000000000000000000000..e1168a409a5e917e37b3a08a725148c2ebcf91f0
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner;
+
+/**
+ * Banner block edit form container.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Edit extends \Magento\Backend\Block\Widget\Form\Container
+{
+    /**
+     * _construct
+     * @return void
+     */
+    protected function _construct()
+    {
+        parent::_construct();
+
+        $this->_objectId   = 'id';
+        $this->_blockGroup = 'WeltPixel_OwlCarouselSlider';
+        $this->_controller = 'adminhtml_banner';
+
+        $this->buttonList->update('save', 'label', __('Save Banner'));
+
+        if ($this->getRequest()->getParam('loaded_slider_id')) {
+            $this->buttonList->remove('back');
+            $this->buttonList->remove('save');
+            $this->buttonList->remove('delete');
+            $this->buttonList->add(
+                'close_window',
+                [
+                    'label'   => __('Close Window'),
+                    'onclick' => 'window.close();',
+                ],
+                10
+            );
+
+            $this->buttonList->add(
+                'save_and_continue',
+                [
+                    'label'   => __('Save and Continue Edit'),
+                    'class'   => 'save',
+                    'onclick' => 'winSaveAndContinueEdit()',
+                ],
+                10
+            );
+
+            $this->buttonList->add(
+                'save_and_close',
+                [
+                    'label'   => __('Save and Close'),
+                    'class'   => 'save_and_close',
+                    'onclick' => 'winSaveAndCloseWindow()',
+                ],
+                10
+            );
+
+            $this->_formScripts[] = "
+				require(['jquery'], function($){
+					$(document).ready(function(){
+						var input = $('<input class=\"custom-button-submit\" type=\"submit\" hidden=\"true\" />');
+						$(edit_form).append(input);
+
+						window.winSaveAndContinueEdit = function (){
+							edit_form.action = '" . $this->getWinSaveAndContinueUrl() . "';
+							$('.custom-button-submit').trigger('click');
+				        }
+			    		window.winSaveAndCloseWindow = function (){
+			    			edit_form.action = '" . $this->getWinSaveAndCloseWindowUrl() . "';
+							$('.custom-button-submit').trigger('click');
+			            }
+					});
+				});
+			";
+
+            $bannerId = $this->getRequest()->getParam('id');
+
+            if ($bannerId) {
+                $this->_formScripts[] = 'window.id = ' . $bannerId . ';';
+            }
+
+        } else {
+            $this->buttonList->add(
+                'save_and_continue',
+                [
+                    'label' => __('Save and Continue Edit'),
+                    'class' => 'save',
+                    'data_attribute' => [
+                        'mage-init'  => ['button' => ['event' => 'saveAndContinueEdit', 'target' => '#edit_form']]
+                    ],
+                ],
+                10
+            );
+        }
+
+        if ($this->getRequest()->getParam('saveandclose')) {
+            $this->_formScripts[] = 'window.close();';
+        }
+    }
+
+    /**
+     * Get save and continue edit url.
+     *
+     * @return string
+     */
+    protected function getWinSaveAndContinueUrl()
+    {
+        return $this->getUrl(
+            '*/*/save',
+            [
+                '_current' => true,
+                'back'     => 'edit',
+                'tab'      => '{{tab_id}}',
+                'id'       => $this->getRequest()->getParam('id'),
+                'loaded_slider_id' => $this->getRequest()->getParam('loaded_slider_id'),
+            ]
+        );
+    }
+
+    /**
+     * Get save and close window Url.
+     *
+     * @return string
+     */
+    protected function getWinSaveAndCloseWindowUrl()
+    {
+        return $this->getUrl(
+            '*/*/save',
+            [
+                '_current' => true,
+                'back'     => 'edit',
+                'tab'      => '{{tab_id}}',
+                'id'       => $this->getRequest()->getParam('id'),
+                'loaded_slider_id' => $this->getRequest()->getParam('loaded_slider_id'),
+                'saveandclose'     => 1,
+            ]
+        );
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Form.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Form.php
new file mode 100644
index 0000000000000000000000000000000000000000..5023357227d4c9f270b78a6b7efa5f32c48520b5
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Form.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Edit;
+
+/**
+ * Adminhtml locator edit form block.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Form extends \Magento\Backend\Block\Widget\Form\Generic
+{
+    protected function _prepareForm()
+    {
+        /** @var \Magento\Framework\Data\Form $form */
+        $form = $this->_formFactory->create(
+            [
+                'data' => [
+                    'id'      => 'edit_form',
+                    'action'  => $this->getUrl('*/*/save'),
+                    'method'  => 'post',
+                    'enctype' => 'multipart/form-data',
+                ],
+            ]
+        );
+        $form->setUseContainer(true);
+        $this->setForm($form);
+
+        return parent::_prepareForm();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Tab/Banner.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Tab/Banner.php
new file mode 100644
index 0000000000000000000000000000000000000000..3b65afc82b53fded7b1ac2b5da4b2c192b7295b7
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Tab/Banner.php
@@ -0,0 +1,611 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Edit\Tab;
+
+use WeltPixel\OwlCarouselSlider\Model\Status;
+
+/**
+ * Banner Edit tab.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Banner extends \Magento\Backend\Block\Widget\Form\Generic
+    implements \Magento\Backend\Block\Widget\Tab\TabInterface
+{
+    /**
+     * @var \Magento\Framework\DataObjectFactory
+     */
+    protected $_objectFactory;
+
+    /**
+     * slider factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\SliderFactory
+     */
+    protected $_sliderFactory;
+
+    /**
+     * @var \WeltPixel\OwlCarouselSlider\Model\Banner
+     */
+    protected $_bannerModel;
+
+    /**
+     * available status.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\Status
+     */
+    private $_status;
+
+    /**
+     * constructor.
+     *
+     * @param \Magento\Backend\Block\Template\Context                                  $context
+     * @param \Magento\Framework\Registry                                              $registry
+     * @param \Magento\Framework\Data\FormFactory                                      $formFactory
+     * @param \Magento\Framework\DataObjectFactory                                     $objectFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\Banner                                $banner
+     * @param \WeltPixel\OwlCarouselSlider\Model\SliderFactory                         $sliderFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\Status                                $status
+     * @param array                                                                    $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        \Magento\Framework\Registry $registry,
+        \Magento\Framework\Data\FormFactory $formFactory,
+        \Magento\Framework\DataObjectFactory $objectFactory,
+        \WeltPixel\OwlCarouselSlider\Model\Banner $bannerModel,
+        \WeltPixel\OwlCarouselSlider\Model\SliderFactory $sliderFactory,
+        \WeltPixel\OwlCarouselSlider\Model\Status $status,
+        array $data = []
+    ) {
+        parent::__construct($context, $registry, $formFactory, $data);
+
+        $this->_objectFactory = $objectFactory;
+        $this->_bannerModel   = $bannerModel;
+        $this->_sliderFactory = $sliderFactory;
+        $this->_status        = $status;
+    }
+
+    /**
+     * prepare layout.
+     *
+     * @return $this
+     */
+    protected function _prepareLayout()
+    {
+        $pageTitle = $this->getPageTitle();
+
+        $this->getLayout()->getBlock('page.title')->setPageTitle($pageTitle);
+
+        \Magento\Framework\Data\Form::setFieldsetElementRenderer(
+            $this->getLayout()->createBlock(
+                'WeltPixel\OwlCarouselSlider\Block\Adminhtml\Form\Renderer\Fieldset\Element', $this->getNameInLayout()
+                .'_fieldset_element'
+            )
+        );
+
+        return $this;
+    }
+
+    /**
+     * Prepare form.
+     *
+     * @return $this
+     */
+    protected function _prepareForm()
+    {
+        $dataObj = $this->_objectFactory->create();
+
+        /**
+         * @var \WeltPixel\OwlCarouselSlider\Model\Banner $bannerModel
+         */
+        $bannerModel = $this->_coreRegistry->registry('banner');
+
+        if ($sliderId = $this->getRequest()->getParam('loaded_slider_id')) {
+            $bannerModel->setSliderId($sliderId);
+        }
+
+        $dataObj->addData($bannerModel->getData());
+
+        /** @var \Magento\Framework\Data\Form $form */
+        $form = $this->_formFactory->create();
+
+        $form->setHtmlIdPrefix($this->_bannerModel->getFormFieldHtmlIdPrefix());
+
+        $htmlIdPrefix = $form->getHtmlIdPrefix();
+
+        $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Banner Details')]);
+        
+        if ($bannerModel->getId()) {
+            $fieldset->addField('id', 'hidden', ['name' => 'id']);
+        }
+
+        $elements = [];
+
+        $elements['title'] = $fieldset->addField(
+            'title',
+            'text',
+            [
+                'name'     => 'title',
+                'label'    => __('Title'),
+                'title'    => __('Title'),
+                'required' => true,
+            ]
+        );
+
+        $elements['show_title'] = $fieldset->addField(
+            'show_title',
+            'select',
+            [
+                'name'     => 'show_title',
+                'label'    => __('Show Title'),
+                'title'    => __('Show Title'),
+                'required' => false,
+                'options'  => [
+                    1 => __('Yes'),
+                    0 => __('No'),
+                ]
+            ]
+        );
+
+        $elements['description'] = $fieldset->addField(
+            'description',
+            'text',
+            [
+                'name'     => 'description',
+                'label'    => __('Description'),
+                'title'    => __('Description'),
+                'required' => false,
+            ]
+        );
+
+        $elements['show_description'] = $fieldset->addField(
+            'show_description',
+            'select',
+            [
+                'name'     => 'show_description',
+                'label'    => __('Show Description'),
+                'title'    => __('Show Description'),
+                'required' => false,
+                'options'  => [
+                    1 => __('Yes'),
+                    0 => __('No'),
+                ]
+            ]
+        );
+
+        $elements['status'] = $fieldset->addField(
+            'status',
+            'select',
+            [
+                'label'    => __('Status'),
+                'title'    => __('Banner Status'),
+                'name'     => 'status',
+                'required' => false,
+                'options'  => $this->_status->getAllAvailableStatuses(),
+            ]
+        );
+
+        $slider = $this->_sliderFactory->create()->load($sliderId);
+
+        if ($slider->getId()) {
+            $elements['slider_id'] = $fieldset->addField(
+                'slider_id',
+                'select',
+                [
+                    'label'    => __('Slider'),
+                    'name'     => 'slider_id',
+                    'required' => false,
+                    'values'   => [
+                        [
+                            'value' => $slider->getId(),
+                            'label' => $slider->getTitle(),
+                        ],
+                    ],
+                    'note'    => 'Select to which Slider you wish to assign current banner. The assignments of banner can be done also later from Sliders Manager > Edit or Add New 
+                    Slider > Slider Banners grid.',
+                ]
+            );
+        } else {
+            $elements['slider_id'] = $fieldset->addField(
+                'slider_id',
+                'select',
+                [
+                    'label'    => __('Slider'),
+                    'name'     => 'slider_id',
+                    'required' => false,
+                    'values'   => $bannerModel->getAvailableSliders(),
+                    'note'    => 'Select to which Slider you wish to assign current banner. The assignments of banner can be done also later from Sliders Manager > Edit or Add New 
+                    Slider > Slider Banners grid.',
+                ]
+            );
+        }
+
+        $elements['url'] = $fieldset->addField(
+            'url',
+            'text',
+            [
+                'title'    => __('URL'),
+                'label'    => __('URL'),
+                'name'     => 'url',
+                'required' => false,
+                'note'    => 'Set the URL where the banner/button should link when clicked on. URL Note 1: set the URL without your store base url, ex. /women.html; URL Note 2: if 
+                "Text Button" option is filled, URL will be linked to the button instead of banner.',
+            ]
+        );
+
+        if($this->showGaFields()){
+            $elements['ga_promo_id'] = $fieldset->addField(
+                'ga_promo_id',
+                'text',
+                [
+                    'title'    => __('GA Promo ID'),
+                    'label'    => __('GA Promo ID'),
+                    'name'     => 'ga_promo_id',
+                    'required' => false
+                ]
+            );
+            $elements['ga_promo_name'] = $fieldset->addField(
+                'ga_promo_name',
+                'text',
+                [
+                    'title'    => __('GA Promo Name'),
+                    'label'    => __('GA Promo Name'),
+                    'name'     => 'ga_promo_name',
+                    'required' => false
+                ]
+            );
+            $elements['ga_promo_creative'] = $fieldset->addField(
+                'ga_promo_creative',
+                'text',
+                [
+                    'title'    => __('GA Promo Creative'),
+                    'label'    => __('GA Promo Creative'),
+                    'name'     => 'ga_promo_creative',
+                    'required' => false
+                ]
+            );
+            $elements['ga_promo_position'] = $fieldset->addField(
+                'ga_promo_position',
+                'text',
+                [
+                    'title'    => __('GA Promo Position'),
+                    'label'    => __('GA Promo Position'),
+                    'name'     => 'ga_promo_position',
+                    'required' => false
+                ]
+            );
+        }
+
+
+
+        $elements['target'] = $fieldset->addField(
+            'target',
+            'select',
+            [
+                'label'  => __('Target'),
+                'name'   => 'target',
+                'values' => [
+                    [
+                        'value' => '_self',
+                        'label' => __('Same Window'),
+                    ],
+                    [
+                        'value' => '_blank',
+                        'label' => __('New Window Tab'),
+                    ],
+                ],
+                'required' => false,
+                'note'    => 'Choose how the URL should be opened: same window or in a new tab.',
+            ]
+        );
+
+        $elements['button_text'] = $fieldset->addField(
+            'button_text',
+            'text',
+            [
+                'title'    => __('Button Text'),
+                'label'    => __('Button Text'),
+                'name'     => 'button_text',
+                'required' => false,
+                'note'     => __('Insert the text which is displayed on the button. To display the button make sure you fill the URL filed also.')
+            ]
+        );
+
+        $elements['banner_type'] = $fieldset->addField(
+            'banner_type',
+            'select',
+            [
+                'label'    => __('Banner Type'),
+                'name'     => 'banner_type',
+                'values'   => $bannerModel->getAvailableBannerType(),
+                'required' => false,
+                'note'     => 'Choose banner type: Image, Video or Custom. In Custom you can insert HTML content.',
+            ]
+        );
+
+        $elements['video'] = $fieldset->addField(
+            'video',
+            'textarea',
+            [
+                'title'    => __('Video'),
+                'label'    => __('Video'),
+                'name'     => 'video',
+                'required' => false,
+            ]
+        );
+
+        $elements['image'] = $fieldset->addField(
+            'image',
+            'image',
+            [
+                'title'    => __('Image'),
+                'label'    => __('Image'),
+                'name'     => 'image',
+                'note'     => 'Accepted images: jpg, jpeg, gif, png',
+                'required' => false,
+            ]
+        );
+
+
+        $elements['mobile_image'] = $fieldset->addField(
+            'mobile_image',
+            'label',
+            [
+                'title'    => __('Mobile Image'),
+                'label'    => __('Mobile Image'),
+                'name'     => 'mobile_image',
+                'required' => false,
+                'after_element_html' => '<b style="font-size: 16px"><a style="font-size: 16px" target="_blank" href="https://www.weltpixel.com/owl-carousel-and-slider.html">Upgrade to Pro version</a> to enable this functionality.</b>'
+            ]
+        );
+
+
+        $elements['custom'] = $fieldset->addField(
+            'custom',
+            'textarea',
+            [
+                'title'    => __('Create Custom Banner here'),
+                'label'    => __('Create Custom Banner here'),
+                'name'     => 'custom',
+                'required' => false,
+            ]
+        );
+
+        $elements['alt_text'] = $fieldset->addField(
+            'alt_text',
+            'text',
+            [
+                'title'    => __('Alt Text'),
+                'label'    => __('Alt Text'),
+                'name'     => 'alt_text',
+                'required' => false,
+                'note'     => 'Specify an alternate text for image in case the image cannot be displayed.',
+            ]
+        );
+
+        if ($bannerModel->getId()) {
+            $elements['bannerclass'] = $fieldset->addField(
+                'bannerclass',
+                'label',
+                [
+                    'title' => __('Banner Class'),
+                    'label' => __('Banner Class'),
+                    'name' => 'banner_class',
+                    'value' => 'banner-' . $bannerModel->getId(),
+                    'note' => __('Wrapper class name of the current banner. It can be used in Custom CSS field to style each banner from the slider. This is displayed only after you 
+                    saved the banner.')
+                ]
+            );
+        }
+
+        $elements['custom_content'] = $fieldset->addField(
+            'custom_content',
+            'textarea',
+            [
+                'title'    => __('Custom HTML Content'),
+                'label'    => __('Custom HTML Content'),
+                'name'     => 'custom_content',
+                'required' => false,
+            ]
+        );
+    
+        $elements['custom_css'] = $fieldset->addField(
+            'custom_css',
+            'textarea',
+            [
+                'title'    => __('Custom CSS'),
+                'label'    => __('Custom CSS'),
+                'name'     => 'custom_css',
+                'required' => false,
+                'note'     => 'Insert your custom CSS style.',
+            ]
+        );
+        
+        $dateFormat = $this->_localeDate->getDateFormatWithLongYear();
+        $timeFormat = $this->_localeDate->getTimeFormat();
+        
+        if ($dataObj->hasData('valid_from')) {
+            $datetime = new \DateTime($dataObj->getData('valid_from'));
+            $dataObj->setData('valid_from',
+                $datetime->setTimezone(new \DateTimeZone($this->_localeDate->getConfigTimezone())));
+        }
+
+        if ($dataObj->hasData('valid_to')) {
+            $datetime = new \DateTime($dataObj->getData('valid_to'));
+            $dataObj->setData('valid_to',
+                $datetime->setTimezone(new \DateTimeZone($this->_localeDate->getConfigTimezone())));
+        }
+
+        $style = 'color: #000;background-color: #fff; font-weight: bold; font-size: 13px;';
+        $elements['valid_from'] = $fieldset->addField(
+            'valid_from',
+            'date',
+            [
+                'name'        => 'valid_from',
+                'label'       => __('Banner Valid From'),
+                'title'       => __('Valid From'),
+                'required'    => true,
+                'readonly'    => true,
+                'style'       => $style,
+                'class'       => 'required-entry',
+                'date_format' => $dateFormat,
+                'time_format' => $timeFormat,
+                'note'        => implode(' ', [$dateFormat, $timeFormat]) . '<br/>The banner is displayed from selected date and time.',
+            ]
+        );
+
+        $elements['valid_to'] = $fieldset->addField(
+            'valid_to',
+            'date',
+            [
+                'name'        => 'valid_to',
+                'label'       => __('Banner Valid To'),
+                'title'       => __('Valid To'),
+                'required'    => true,
+                'readonly'    => true,
+                'style'       => $style,
+                'class'       => 'required-entry',
+                'date_format' => $dateFormat,
+                'time_format' => $timeFormat,
+                'note'        => implode(' ', [$dateFormat, $timeFormat]) . '<br/>The Banner is displayed until selected date and time.',
+            ]
+        );
+
+        $form->addValues($dataObj->getData());
+
+        $this->setChild(
+            'form_after',
+            $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Form\Element\Dependence')
+                ->addFieldMap(
+                    "{$htmlIdPrefix}banner_type",
+                    'banner_type'
+                )
+                ->addFieldMap(
+                    "{$htmlIdPrefix}video",
+                    'video'
+                )
+                ->addFieldMap(
+                    "{$htmlIdPrefix}image",
+                    'image'
+                )
+                ->addFieldMap(
+                    "{$htmlIdPrefix}mobile_image",
+                    'mobile_image'
+                )
+                ->addFieldMap(
+                    "{$htmlIdPrefix}custom",
+                    'custom'
+                )
+                ->addFieldMap(
+                    "{$htmlIdPrefix}alt_text",
+                    'alt_text'
+                )
+                ->addFieldDependence(
+                    'image',
+                    'banner_type',
+                    '1'
+                )
+                ->addFieldDependence(
+                    'mobile_image',
+                    'banner_type',
+                    '1'
+                )
+                ->addFieldDependence(
+                    'alt_text',
+                    'banner_type',
+                    '1'
+                )
+                ->addFieldDependence(
+                    'video',
+                    'banner_type',
+                    '2'
+                )
+                ->addFieldDependence(
+                    'custom',
+                    'banner_type',
+                    '3'
+                )
+        );
+
+        $this->setForm($form);
+
+        return parent::_prepareForm();
+    }
+
+    /**
+     * Retrieve the banner model.
+     *
+     * @return \WeltPixel\OwlCarouselSlider\Model\Banner
+     */
+    public function getBanner()
+    {
+        return $this->_coreRegistry->registry('banner');
+    }
+
+    /**
+     * Return the page title.
+     *
+     * @return \Magento\Framework\Phrase
+     */
+    public function getPageTitle()
+    {
+        return $this->getBanner()->getId()
+            ? __("Edit Banner '%1'", $this->escapeHtml($this->getBanner()->getTitle())) : __('New Banner');
+    }
+
+    /**
+     * Prepare tab label.
+     *
+     * @return string
+     */
+    public function getTabLabel()
+    {
+        return __('Banner Details');
+    }
+
+    /**
+     * Prepare tab title.
+     *
+     * @return string
+     */
+    public function getTabTitle()
+    {
+        return __('Banner Details');
+    }
+
+    /**
+     * Can show tab in tabs.
+     *
+     * @return boolean
+     * @api
+     */
+    public function canShowTab()
+    {
+        return true;
+    }
+
+    /**
+     * Tab is hidden.
+     *
+     * @return boolean
+     * @api
+     */
+    public function isHidden()
+    {
+        return false;
+    }
+
+    /**
+     * Checks if Google Analytics Tracking for banners is enabled
+     *
+     * @return boolean
+     */
+    public function showGaFields()
+    {
+        $sysPath = 'weltpixel_owl_slider_config/general/enable_google_tracking';
+        return $this->_scopeConfig->getValue($sysPath, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Tabs.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Tabs.php
new file mode 100644
index 0000000000000000000000000000000000000000..83328ad5fd10a769c8a02db07d70aacea5d82b83
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Edit/Tabs.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Edit;
+
+/**
+ * banner Tabs.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Tabs extends \Magento\Backend\Block\Widget\Tabs
+{
+    /**
+     * construct.
+     */
+    protected function _construct()
+    {
+        parent::_construct();
+        
+        $this->setId('banner_tabs');
+        $this->setDestElementId('edit_form');
+        $this->setTitle(__('Banner Information'));
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Grid.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Grid.php
new file mode 100644
index 0000000000000000000000000000000000000000..da79e38f336a71116a3b4dfeeccf5e9bb8926bf8
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Grid.php
@@ -0,0 +1,277 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner;
+
+/**
+ * Banner grid.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
+{
+    /**
+     * banner collection factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory
+     */
+    protected $_bannerCollectionFactory;
+
+    /**
+     * slider collection factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory
+     */
+    protected $_sliderCollectionFactory;
+
+    /**
+     * available status.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\Status
+     */
+    private $_status;
+
+    /**
+     * construct.
+     *
+     * @param \Magento\Backend\Block\Template\Context                                   $context
+     * @param \Magento\Backend\Helper\Data                                              $backendHelper
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory $bannerCollectionFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\Status                                 $status
+     * @param array                                                                     $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        \Magento\Backend\Helper\Data $backendHelper,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory $bannerCollectionFactory,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory $sliderCollectionFactory,
+        \WeltPixel\OwlCarouselSlider\Model\Status $status,
+        array $data = []
+    ) {
+        $this->_bannerCollectionFactory = $bannerCollectionFactory;
+        $this->_sliderCollectionFactory = $sliderCollectionFactory;
+        $this->_status = $status;
+
+        parent::__construct($context, $backendHelper, $data);
+    }
+
+    protected function _construct()
+    {
+        parent::_construct();
+
+        $this->setId('bannerGrid');
+        $this->setDefaultSort('id');
+        $this->setDefaultDir('ASC');
+        $this->setSaveParametersInSession(true);
+        $this->setUseAjax(true);
+    }
+
+    protected function _prepareCollection()
+    {
+        /** @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\Collection $collection */
+        $collection = $this->_bannerCollectionFactory->create();
+
+        $this->setCollection($collection);
+
+        return parent::_prepareCollection();
+    }
+
+    /**
+     * @return $this
+     */
+    protected function _prepareColumns()
+    {
+        $this->addColumn(
+            'id',
+            [
+                'header' => __('Banner ID'),
+                'type'   => 'number',
+                'index'  => 'id',
+                'header_css_class' => 'col-id',
+                'column_css_class' => 'col-id',
+            ]
+        );
+        
+        $this->addColumn(
+            'slider_id',
+            [
+                'header' => __('Slider ID'),
+                'type'   => 'number',
+                'index'  => 'slider_id',
+                'header_css_class' => 'col-id',
+                'column_css_class' => 'col-id',
+            ]
+        );
+
+        $this->addColumn(
+            'status',
+            [
+                'header'  => __('Status'),
+                'index'   => 'status',
+                'type'    => 'options',
+                'options' => $this->_status->getAllAvailableStatuses(),
+            ]
+        );
+
+        $this->addColumn(
+            'title',
+            [
+                'header' => __('Title'),
+                'index'  => 'title',
+                'width'  => '50px',
+            ]
+        );
+
+        $this->addColumn(
+            'image',
+            [
+                'header'   => __('Image'),
+                'width'    => '50px',
+                'filter'   => false,
+                'renderer' => 'WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Helper\Renderer\Image',
+            ]
+        );
+
+        $this->addColumn(
+            'mobile_image',
+            [
+                'header'   => __('Mobile Image'),
+                'width'    => '50px',
+                'filter'   => false,
+                'renderer' => 'WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Helper\Renderer\MobileImage',
+            ]
+        );
+
+        $this->addColumn(
+            'valid_from',
+            [
+                'header'   => __('Valid From'),
+                'type'     => 'datetime',
+                'index'    => 'valid_from',
+                'width'    => '50px',
+                'timezone' => true,
+            ]
+        );
+
+        $this->addColumn(
+            'valid_to',
+            [
+                'header'   => __('Valid To'),
+                'type'     => 'datetime',
+                'index'    => 'valid_to',
+                'width'    => '50px',
+                'timezone' => true,
+            ]
+        );
+
+        $this->addColumn(
+            'edit',
+            [
+                'header'  => __('Edit'),
+                'type'    => 'action',
+                'getter'  => 'getId',
+                'actions' => [
+                    [
+                        'caption' => __('Edit'),
+                        'url'     => ['base' => '*/*/edit'],
+                        'field'   => 'id',
+                    ],
+                ],
+                'filter'   => false,
+                'sortable' => false,
+                'index'    => 'stores',
+                'header_css_class' => 'col-action',
+                'column_css_class' => 'col-action',
+            ]
+        );
+        $this->addExportType('*/*/exportCsv', __('CSV'));
+        $this->addExportType('*/*/exportXml', __('XML'));
+        $this->addExportType('*/*/exportExcel', __('Excel'));
+
+        return parent::_prepareColumns();
+    }
+
+    /**
+     * Get slider available option.
+     *
+     * @return array
+     */
+    public function getSliderAvailableOption()
+    {
+        $option = [];
+
+        $sliderCollection = $this->_sliderCollectionFactory->create()->addFieldToSelect(['title']);
+
+        if (count($sliderCollection)) {
+            foreach ($sliderCollection as $slider) {
+                $option[$slider->getId()] = $slider->getTitle();
+            }
+        }
+
+        return $option;
+    }
+
+    /**
+     * Prepare grid massaction actions
+     *
+     * @return $this
+     */
+    protected function _prepareMassaction()
+    {
+        $this->setMassactionIdField('entity_id');
+        
+        $this->getMassactionBlock()->setFormFieldName('banner');
+
+        $this->getMassactionBlock()->addItem(
+            'delete',
+            [
+                'label'   => __('Delete'),
+                'url'     => $this->getUrl('weltowlcarousel/*/massDelete'),
+                'confirm' => __('Are you sure?'),
+            ]
+        );
+
+        $status = $this->_status->getAllAvailableStatuses();
+        array_unshift($status, ['label' => '', 'value' => '']);
+        $this->getMassactionBlock()->addItem(
+            'status',
+            [
+                'label' => __('Change Status'),
+                'url'   => $this->getUrl('weltowlcarousel/*/massStatus', ['_current' => true]),
+                'additional' => [
+                    'visibility' => [
+                        'name'   => 'status',
+                        'type'   => 'select',
+                        'class'  => 'required-entry',
+                        'label'  => __('Status'),
+                        'values' => $status,
+                    ],
+                ],
+            ]
+        );
+
+        return $this;
+    }
+
+    /**
+     * Retrieve grid reload url
+     *
+     * @return string;
+     */
+    public function getGridUrl()
+    {
+        return $this->getUrl('*/*/grid', ['_current' => true]);
+    }
+
+    /**
+     * Return row url for js event handlers
+     *
+     * @param \Magento\Catalog\Model\Product|\Magento\Framework\DataObject $row
+     * @return string
+     */
+    public function getRowUrl($row)
+    {
+        return $this->getUrl('*/*/edit', ['id' => $row->getId()]);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Helper/Renderer/Image.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Helper/Renderer/Image.php
new file mode 100644
index 0000000000000000000000000000000000000000..3137d312c39e76ad9b47aaebef6ae3795b1efea8
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Helper/Renderer/Image.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Helper\Renderer;
+
+/**
+ * Image renderer.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Image extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
+{
+    /**
+     * Store manager.
+     *
+     * @var \Magento\Store\Model\StoreManagerInterface
+     */
+    protected $_storeManager;
+
+    /**
+     * Banner factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\BannerFactory
+     */
+    protected $_bannerFactory;
+
+    /**
+     * [__construct description].
+     *
+     * @param \Magento\Backend\Block\Context                    $context
+     * @param \Magento\Store\Model\StoreManagerInterface        $storeManager
+     * @param \WeltPixel\OwlCarouselSlider\Model\BannerFactory  $bannerFactory
+     * @param array                                             $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Context $context,
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
+        \WeltPixel\OwlCarouselSlider\Model\BannerFactory $bannerFactory,
+        array $data = []
+    ) {
+        parent::__construct($context, $data);
+
+        $this->_storeManager  = $storeManager;
+        $this->_bannerFactory = $bannerFactory;
+    }
+
+    /**
+     * Render action.
+     *
+     * @param \Magento\Framework\DataObject $row
+     *
+     * @return string
+     */
+    public function render(\Magento\Framework\DataObject $row)
+    {
+        $banner = $this->_bannerFactory->create()->load($row->getId());
+
+        $imageSrc = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)
+            . $banner->getImage();
+
+        return '<image width="150" height="50" src ="' . $imageSrc . '" alt="' . $banner->getImage() . '" >';
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Helper/Renderer/MobileImage.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Helper/Renderer/MobileImage.php
new file mode 100644
index 0000000000000000000000000000000000000000..aa8612c487d7c1e572eafb47d9561c3405476461
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Banner/Helper/Renderer/MobileImage.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Helper\Renderer;
+
+/**
+ * Image renderer.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class MobileImage extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
+{
+    /**
+     * Render action.
+     *
+     * @param \Magento\Framework\DataObject $row
+     *
+     * @return string
+     */
+    public function render(\Magento\Framework\DataObject $row)
+    {
+        return '<b style="font-size: 16px"><a style="font-size: 16px" target="_blank" href="https://www.weltpixel.com/owl-carousel-and-slider.html">Upgrade to Pro version</a><br/>to enable this functionality.</b>';
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Form/Renderer/Fieldset/Element.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Form/Renderer/Fieldset/Element.php
new file mode 100644
index 0000000000000000000000000000000000000000..5f44d64b21e7f28c9965aa16e3918aa59c34eea9
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Form/Renderer/Fieldset/Element.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Form\Renderer\Fieldset;
+
+/**
+ * Fieldset element renderer.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Element extends \Magento\Backend\Block\Widget\Form\Renderer\Fieldset\Element
+{
+    /**
+     * Initialize block template.
+     */
+    protected $_template = 'WeltPixel_OwlCarouselSlider::form/renderer/fieldset/element.phtml';
+
+    /**
+     * Retrieve the element name.
+     *
+     * @return string
+     */
+    public function getElementName()
+    {
+        return $this->getElement()->getName();
+    }
+
+    /**
+     * Retrieve element label html.
+     *
+     * @return string
+     */
+    public function getElementLabelHtml()
+    {
+        $element = $this->getElement();
+        $label   = $element->getLabel();
+
+        if (!empty($label)) {
+            $element->setLabel(__($label));
+        }
+
+        return $element->getLabelHtml();
+    }
+
+    /**
+     * Retrieve the element html.
+     *
+     * @return string
+     */
+    public function getElementHtml()
+    {
+        return $this->getElement()->getElementHtml();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider.php
new file mode 100644
index 0000000000000000000000000000000000000000..ce1c34f1f8e852d59297bd6f84ea665fc241a52a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml;
+
+/**
+ * Slider grid container
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Slider extends \Magento\Backend\Block\Widget\Grid\Container
+{
+    /**
+     * Internal constructor, that is called from real constructor
+     * @return void
+     */
+    protected function _construct()
+    {
+        $this->_controller = 'adminhtml_slider';
+        $this->_blockGroup = 'WeltPixel_OwlCarouselSlider';
+        $this->_headerText = __('Sliders');
+        $this->_addButtonLabel = __('Add New Slider');
+        
+        parent::_construct();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit.php
new file mode 100644
index 0000000000000000000000000000000000000000..e6985162c31ca4213bd646b5d555996a6a016530
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit.php
@@ -0,0 +1,131 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider;
+
+/**
+ * Slider block edit form container.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Edit extends \Magento\Backend\Block\Widget\Form\Container
+{
+    /**
+     * Core registry.
+     *
+     * @var \Magento\Framework\Registry
+     */
+    protected $_coreRegistry;
+
+    /**
+     * @param Context $context
+     * @param array   $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Widget\Context $context,
+        \Magento\Framework\Registry $registry,
+        array $data = []
+    ) {
+        $this->_coreRegistry = $registry;
+        
+        parent::__construct($context, $data);
+    }
+    protected function _construct()
+    {
+        $this->_objectId   = 'id';
+        $this->_blockGroup = 'WeltPixel_OwlCarouselSlider';
+        $this->_controller = 'adminhtml_slider';
+
+        parent::_construct();
+
+        $this->buttonList->update('save', 'label', __('Save Slider'));
+        $this->buttonList->update('delete', 'label', __('Delete'));
+
+        if ($this->getSlider()->getId()) {
+            $this->buttonList->add(
+                'create_banner',
+                [
+                    'label'   => __('Create Banner'),
+                    'class'   => 'add',
+                    'onclick' => 'openBannerPopup(\''.$this->getCreateBannerUrl().'\')',
+                ],
+                1
+            );
+        }
+
+        $this->buttonList->add(
+            'save_and_continue',
+            [
+                'label' => __('Save and Continue Edit'),
+                'class' => 'save',
+                'data_attribute' => [
+                    'mage-init' => [
+                        'button' => [
+                            'event' => 'saveAndContinueEdit',
+                            'target' => '#edit_form'
+                        ],
+                    ],
+                ],
+            ],
+            10
+        );
+
+        $this->_formScripts[] = "
+			require(['jquery'], function($){
+				window.openBannerPopup = function (url) {
+				
+                    var left = ($(document).width()-1000)/2, height= $(document).height(),
+                        
+                        open_popup = window.open(url, '_blank','width=1000,resizable=1,scrollbars=1,toolbar=1,'+'left='
+                            +left+',height='+height),
+                        
+                        windowFocusHandle = function(){
+                            if (open_popup.closed) {
+                                if (typeof bannerGridJsObject !== 'undefined' && open_popup.id) {
+                                    bannerGridJsObject.reloadParams['banner[]'].push(open_popup.id + '');
+                                    $(edit_form.slider_banner).val($(edit_form.slider_banner).val() + '&' 
+                                    + open_popup.id + '=' + Base64.encode('sort_order =0'));
+                                    bannerGridJsObject.setPage(open_popup.id);
+                                }
+                                $(window).off('focus', windowFocusHandle);
+                            } else {
+                                $(open_popup).trigger('focus');
+                                open_popup.alert('" . __('You have to save the banner and close this window!') . "');
+                            }
+                        }
+                        
+                        $(window).focus(windowFocusHandle);
+                    }
+			});
+		";
+    }
+
+    public function getSlider()
+    {
+        return $this->_coreRegistry->registry('slider');
+    }
+
+    /**
+     * Retrieve the save and continue edit Url.
+     *
+     * @return string
+     */
+    protected function _getSaveAndContinueUrl()
+    {
+        return $this->getUrl(
+            '*/*/save',
+            ['_current' => true, 'back' => 'edit', 'tab' => '{{tab_id}}']
+        );
+    }
+
+    /**
+     * get create banner url.
+     *
+     * @return string
+     */
+    public function getCreateBannerUrl()
+    {
+        return $this->getUrl('*/banner/new', ['current_slider_id' => $this->getSlider()->getId()]);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Form.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Form.php
new file mode 100644
index 0000000000000000000000000000000000000000..e45207566e4b04999214961e44fe196bb7711758
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Form.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit;
+
+/**
+ * Adminhtml locator edit form block.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Form extends \Magento\Backend\Block\Widget\Form\Generic
+{
+    protected function _prepareForm()
+    {
+        /** @var \Magento\Framework\Data\Form $form */
+        $form = $this->_formFactory->create(
+            [
+                'data' => [
+                    'id'      => 'edit_form',
+                    'action'  => $this->getUrl('*/*/save'),
+                    'method'  => 'post',
+                    'enctype' => 'multipart/form-data',
+                ],
+            ]
+        );
+        $form->setUseContainer(true);
+        $this->setForm($form);
+
+        return parent::_prepareForm();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Banners.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Banners.php
new file mode 100644
index 0000000000000000000000000000000000000000..fa742239cbe070cbb550167598e81133d49b7669
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Banners.php
@@ -0,0 +1,317 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tab;
+
+use WeltPixel\OwlCarouselSlider\Model\Status;
+
+/**
+ * Banners tab.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Banners extends \Magento\Backend\Block\Widget\Grid\Extended
+{
+    /**
+     * banner factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory
+     */
+    protected $_bannerCollectionFactory;
+
+    /**
+     * available status.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\Status
+     */
+    private $_status;
+
+    /**
+     * [__construct description].
+     *
+     * @param \Magento\Backend\Block\Template\Context                                   $context
+     * @param \Magento\Backend\Helper\Data                                              $backendHelper
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory $bannerCollectionFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\Status                                 $status
+     * @param array                                                                     $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        \Magento\Backend\Helper\Data $backendHelper,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory $bannerCollectionFactory,
+        \WeltPixel\OwlCarouselSlider\Model\Status $status,
+        array $data = []
+    ) {
+        parent::__construct($context, $backendHelper, $data);
+
+        $this->_bannerCollectionFactory = $bannerCollectionFactory;
+        $this->_status = $status;
+    }
+
+    /**
+     * _construct
+     * @return void
+     */
+    protected function _construct()
+    {
+        parent::_construct();
+        $this->setId('bannerGrid');
+        $this->setDefaultSort('id');
+        $this->setDefaultDir('ASC');
+        $this->setSaveParametersInSession(true);
+        $this->setUseAjax(true);
+        if ($this->getRequest()->getParam('id')) {
+            $this->setDefaultFilter(['in_banner' => 1]);
+        }
+    }
+
+    /**
+     * add Column Filter To Collection
+     */
+    protected function _addColumnFilterToCollection($column)
+    {
+        if ($column->getId() == 'in_banner') {
+            $bannerIds = $this->_getSelectedBanners();
+
+            if (empty($bannerIds)) {
+                $bannerIds = 0;
+            }
+
+            if ($column->getFilter()->getValue()) {
+                $this->getCollection()->addFieldToFilter('id', ['in' => $bannerIds]);
+            } else {
+                if ($bannerIds) {
+                    $this->getCollection()->addFieldToFilter('id', ['nin' => $bannerIds]);
+                }
+            }
+        } else {
+            parent::_addColumnFilterToCollection($column);
+        }
+
+        return $this;
+    }
+
+    /**
+     * prepare collection
+     */
+    protected function _prepareCollection()
+    {
+        /** @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\Collection $collection */
+        $collection = $this->_bannerCollectionFactory->create();
+        $this->setCollection($collection);
+
+        return parent::_prepareCollection();
+    }
+
+    /**
+     * @return $this
+     */
+    protected function _prepareColumns()
+    {
+        $this->addColumn(
+            'in_banner',
+            [
+                'header_css_class' => 'a-center',
+                'type'   => 'checkbox',
+                'name'   => 'in_banner',
+                'align'  => 'center',
+                'index'  => 'id',
+                'values' => $this->_getSelectedBanners(),
+            ]
+        );
+
+        $this->addColumn(
+            'id',
+            [
+                'header' => __('Banner ID'),
+                'type'   => 'number',
+                'index'  => 'id',
+                'header_css_class' => 'col-id',
+                'column_css_class' => 'col-id',
+            ]
+        );
+        $this->addColumn(
+            'title',
+            [
+                'header' => __('Title'),
+                'index'  => 'title',
+                'class'  => 'xxx',
+                'width'  => '50px',
+            ]
+        );
+        $this->addColumn(
+            'image',
+            [
+                'header' => __('Image'),
+                'filter' => false,
+                'width'  => '50px',
+                'renderer' => 'WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Helper\Renderer\Image',
+            ]
+        );
+        $this->addColumn(
+            'mobile_image',
+            [
+                'header' => __('Mobile Image'),
+                'filter' => false,
+                'width'  => '50px',
+                'renderer' => 'WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Helper\Renderer\MobileImage',
+            ]
+        );
+        $this->addColumn(
+            'title',
+            [
+                'header' => __('Banner Title'),
+                'index'  => 'title',
+                'width'  => '50px',
+            ]
+        );
+        $this->addColumn(
+            'valid_from',
+            [
+                'header' => __('Valid From'),
+                'type'   => 'datetime',
+                'index'  => 'valid_from',
+                'width'  => '50px',
+                'timezone' => true,
+            ]
+        );
+
+        $this->addColumn(
+            'valid_to',
+            [
+                'header' => __('Valid To'),
+                'type'   => 'datetime',
+                'index'  => 'valid_to',
+                'width'  => '50px',
+                'timezone' => true,
+            ]
+        );
+
+        $this->addColumn(
+            'status',
+            [
+                'header' => __('Status'),
+                'index'  => 'status',
+                'type'   => 'options',
+                'filter_index' => 'main_table.status',
+                'options' => $this->_status->getAllAvailableStatuses(),
+            ]
+        );
+
+        $this->addColumn(
+            'edit',
+            [
+                'header'   => __('Edit'),
+                'filter'   => false,
+                'sortable' => false,
+                'index'    => 'stores',
+                'renderer' => 'WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tab\Helper\Renderer\EditBanner',
+                'header_css_class' => 'col-action',
+                'column_css_class' => 'col-action',
+            ]
+        );
+
+        $this->addColumn(
+            'sort_order',
+            [
+                'header' => __('Sort Order'),
+                'name'   => 'sort_order',
+                'index'  => 'sort_order',
+                'width'  => '50px',
+                'editable' => true,
+            ]
+        );
+
+        return parent::_prepareColumns();
+    }
+
+    /**
+     * @return string
+     */
+    public function getGridUrl()
+    {
+        return $this->getUrl('*/*/bannersgrid', ['_current' => true]);
+    }
+
+    /**
+     * Get row url
+     * @param  object $row
+     * @return string
+     */
+    public function getRowUrl($row)
+    {
+        return '';
+    }
+
+    /**
+     * Get selected slider banners
+     * @return array
+     */
+    public function getSelectedSliderBanners()
+    {
+        $sliderId = $this->getRequest()->getParam('id');
+        if (!isset($sliderId)) {
+            return [];
+        }
+        $bannerCollection = $this->_bannerCollectionFactory->create();
+        $bannerCollection->addFieldToFilter('slider_id', $sliderId);
+
+        $bannerIds = [];
+        foreach ($bannerCollection as $banner) {
+            $bannerIds[$banner->getId()] = ['sort_order' => $banner->getSortOrder()];
+        }
+
+        return $bannerIds;
+    }
+
+    /**
+     * Get selected banners
+     * @return array|mixed
+     */
+    protected function _getSelectedBanners()
+    {
+        $banners = $this->getRequest()->getParam('banner');
+        if (!is_array($banners)) {
+            $banners = array_keys($this->getSelectedSliderBanners());
+        }
+
+        return $banners;
+    }
+
+    /**
+     * Prepare label for tab.
+     *
+     * @return string
+     */
+    public function getTabLabel()
+    {
+        return __('Banners');
+    }
+
+    /**
+     * Prepare title for tab.
+     *
+     * @return string
+     */
+    public function getTabTitle()
+    {
+        return __('Banners');
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function canShowTab()
+    {
+        return true;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function isHidden()
+    {
+        return true;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Form.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Form.php
new file mode 100644
index 0000000000000000000000000000000000000000..daf1601a2fd1177b2874cee8c92bd8ef2174fdd0
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Form.php
@@ -0,0 +1,661 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tab;
+
+use WeltPixel\OwlCarouselSlider\Model\Status;
+use WeltPixel\OwlCarouselSlider\Model\Slider;
+
+
+use Magento\Backend\Block\Widget\Form\Generic;
+use Magento\Backend\Block\Widget\Tab\TabInterface;
+use Magento\Backend\Block\Template\Context;
+use Magento\Framework\Registry;
+use Magento\Framework\Data\FormFactory;
+use Magento\Cms\Model\Wysiwyg\Config;
+/**
+ * Slider Form.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Form extends \Magento\Backend\Block\Widget\Form\Generic implements \Magento\Backend\Block\Widget\Tab\TabInterface
+{
+    const FIELD_NAME = 'slider';
+
+    /**
+     * @var \Magento\Config\Model\Config\Structure\Element\Dependency\FieldFactory
+     */
+    protected $_fieldFactory;
+
+    /**
+     * [$_bannersliderHelper description].
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Helper\Data
+     */
+    protected $_bannersliderHelper;
+
+    /**
+     * available status.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\Status
+     */
+    private $_status;
+
+    /**
+     * [__construct description].
+     *
+     * @param \Magento\Backend\Block\Template\Context                                $context
+     * @param \WeltPixel\OwlCarouselSlider\Helper\Data                               $bannersliderHelper
+     * @param \Magento\Framework\Registry                                            $registry
+     * @param \Magento\Framework\Data\FormFactory                                    $formFactory
+     * @param \Magento\Store\Model\System\Store                                      $systemStore
+     * @param \Magento\Config\Model\Config\Structure\Element\Dependency\FieldFactory $fieldFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\Status                              $status
+     * @param array                                                                  $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        \Magento\Framework\Registry $registry,
+        \Magento\Framework\Data\FormFactory $formFactory,
+        \WeltPixel\OwlCarouselSlider\Helper\Data $bannersliderHelper,
+        \Magento\Config\Model\Config\Structure\Element\Dependency\FieldFactory $fieldFactory,
+        \WeltPixel\OwlCarouselSlider\Model\Status $status,
+        array $data = []
+    ) {
+        parent::__construct($context, $registry, $formFactory, $data);
+
+        $this->_bannersliderHelper = $bannersliderHelper;
+        $this->_fieldFactory       = $fieldFactory;
+        $this->_status       = $status;
+    }
+
+    protected function _prepareLayout()
+    {
+        $this->getLayout()->getBlock('page.title')->setPageTitle($this->getPageTitle());
+    }
+
+    /**
+     * Prepare form.
+     *
+     * @return $this
+     */
+    protected function _prepareForm()
+    {
+        $slider = $this->getSlider();
+        $isElementDisabled = true;
+        /** @var \Magento\Framework\Data\Form $form */
+        $form = $this->_formFactory->create();
+
+        /*
+         * declare dependence
+         */
+        $dependenceBlock = $this->getLayout()->createBlock(
+            'Magento\Backend\Block\Widget\Form\Element\Dependence'
+        );
+
+        // dependence field map array
+        $elements = [];
+
+        $form->setHtmlIdPrefix('page_');
+
+        $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Slider Details')]);
+
+        if ($slider->getId()) {
+            $fieldset->addField('id', 'hidden', ['name' => 'id']);
+        }
+
+        $fieldset->addField(
+            'title',
+            'text',
+            [
+                'name'     => 'title',
+                'label'    => __('Title'),
+                'title'    => __('Title'),
+                'required' => true,
+                'class'    => 'required-entry'
+            ]
+        );
+
+        $fieldset->addField(
+            'show_title',
+            'radios',
+            [
+                'name'     => 'show_title',
+                'label'    => __('Show Title'),
+                'title'    => __('Show Title'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('Yes')],
+                    ['value' => 0, 'label' => __('No')]
+                ],
+                'disabled' => $isElementDisabled
+            ]
+        );
+
+        $elements['status'] = $fieldset->addField(
+            'status',
+            'select',
+            [
+                'label'    => __('Slider Status'),
+                'title'    => __('Slider Status'),
+                'name'     => 'status',
+                'options'  => $this->_status->getAllAvailableStatuses(),
+                'disabled' => false,
+                'required' => false,
+                'note'     => 'If Enabled, the slider will be displayed. Make sure you inserted the Slider in the page. Insert the slider by following documentation.',
+            ]
+        );
+
+        ########### Slider General Configuration ###########
+
+        $elements['separator_one'] = $fieldset->addField(
+            'separator_one',
+            'note',
+            [
+                'text' => __('<strong>Slider General Configuration</strong>'),
+            ]
+        );
+
+        $elements['nav'] = $fieldset->addField(
+            'nav',
+            'select',
+            [
+                'name'     => 'nav',
+                'label'    => __('Next/Prev Buttons'),
+                'title'    => __('Next/Prev Buttons'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'    => 'If True, next/prev buttons are displayed. <br/>Slider Responsive Breakpoints options overwrites this option. Please check below Slider Responsive 
+                Breakpoints options.',
+            ]
+        );
+
+        $elements['dots'] = $fieldset->addField(
+            'dots',
+            'select',
+            [
+                'name'     => 'dots',
+                'label'    => __('Dots'),
+                'title'    => __('Dots'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'    => 'if True, dots navigation are displayed.',
+            ]
+        );
+
+        $elements['transition'] = $fieldset->addField(
+            'transition',
+            'select',
+            [
+                'name'     => 'transition',
+                'label'    => __('Banner Transition Effect'),
+                'title'    => __('Banner Transition Effect'),
+                'required' => false,
+                'values'   => Slider::getAvailableTransition(),
+                'note'     => 'Effect of transition between slides.'
+            ]
+        );
+
+        $elements['center'] = $fieldset->addField(
+            'center',
+            'select',
+            [
+                'name'     => 'center',
+                'label'    => __('Center Item'),
+                'title'    => __('Center Item'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'     => 'Center item. Works well with even an odd number of items.'
+            ]
+        );
+
+        $elements['stagePadding'] = $fieldset->addField(
+            'stagePadding',
+            'text',
+            [
+                'name'     => 'stagePadding',
+                'label'    => __('StagePadding'),
+                'title'    => __('StagePadding'),
+                'required' => false,
+                'note'     => 'Padding left and right on stage (can see neighbours).'
+            ]
+        );
+
+        $elements['margin'] = $fieldset->addField(
+            'margin',
+            'text',
+            [
+                'name'     => 'margin',
+                'label'    => __('Margin'),
+                'title'    => __('Margin'),
+                'required' => false,
+                'note'     => 'Set right margin for each item in carousel.',
+            ]
+        );
+
+        $elements['items'] =$fieldset->addField(
+            'items',
+            'text',
+            [
+                'name'     => 'items',
+                'label'    => __('Items'),
+                'title'    => __('Items'),
+                'required' => true,
+                'class'    => 'validate-greater-than-zero',
+                'note'     => 'The number of items you want to see on the screen. <br/>Slider Responsive Breakpoints options overwrites this option. Please check below Slider 
+                Responsive Breakpoints options.'
+            ]
+        );
+
+        $elements['loop'] = $fieldset->addField(
+            'loop',
+            'select',
+            [
+                'name'     => 'loop',
+                'label'    => __('Loop'),
+                'title'    => __('Loop'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'     => 'Infinite loop. Duplicate last and first items to get loop illusion.'
+            ]
+        );
+
+        $elements['lazyLoad'] = $fieldset->addField(
+            'lazyLoad',
+            'select',
+            [
+                'name'     => 'lazyLoad',
+                'label'    => __('LazyLoad'),
+                'title'    => __('LazyLoad'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'      => 'Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.'
+            ]
+        );
+
+        $elements['autoplay'] = $fieldset->addField(
+            'autoplay',
+            'select',
+            [
+                'name'     => 'autoplay',
+                'label'    => __('Autoplay'),
+                'title'    => __('Autoplay'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+            ]
+        );
+
+        $elements['autoplayTimeout'] = $fieldset->addField(
+            'autoplayTimeout',
+            'text',
+            [
+                'name'     => 'autoplayTimeout',
+                'label'    => __('AutoplayTimeout'),
+                'title'    => __('AutoplayTimeout'),
+                'required' => false,
+                'note'     => 'Autoplay interval timeout. Insert value in ms. Write “4000” for a 4 seconds timeout'
+            ]
+        );
+
+        $elements['autoplayHoverPause'] = $fieldset->addField(
+            'autoplayHoverPause',
+            'select',
+            [
+                'name'     => 'autoplayHoverPause',
+                'label'    => __('AutoplayHoverPause'),
+                'title'    => __('AutoplayHoverPause'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'     => 'Pause on mouse hover.'
+            ]
+        );
+
+        $elements['autoHeight'] = $fieldset->addField(
+            'autoHeight',
+            'select',
+            [
+                'name'     => 'autoHeight',
+                'label'    => __('Auto Height'),
+                'title'    => __('Auto Height'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'    => 'If True, each banner will adjust height.',
+            ]
+        );
+
+        ########### Slider Responsive Breakpoint ###########
+
+        $elements['separator_two'] = $fieldset->addField(
+            'separator_two',
+            'note',
+            [
+               'text' => __('<strong>Slider Responsive Breakpoints.<br/>This configuration will overwrite the main slider options.</strong>'),
+            ]
+        );
+
+        // Breakpoint 1
+        $elements['s1'] = $fieldset->addField(
+            's1',
+            'note',
+            [
+                'text' => __('Breakpoint 1'),
+            ]
+        );
+
+        $elements['nav_brk1'] = $fieldset->addField(
+            'nav_brk1',
+            'select',
+            [
+                'name'     => 'nav_brk1',
+                'label'    => __('Next/Prev Buttons'),
+                'title'    => __('Next/Prev Buttons'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'    => 'If True, next/prev buttons are displayed.',
+            ]
+        );
+
+        $elements['items_brk1'] = $fieldset->addField(
+            'items_brk1',
+            'text',
+            [
+                'name'     => 'items_brk1',
+                'label'    => __('Items'),
+                'title'    => __('Items'),
+                'required' => true,
+                'class'    => 'validate-greater-than-zero',
+                'note'     => 'The number of items you want to see at this breakpoint and higher.'
+            ]
+        );
+
+        // Breakpoint 2
+
+        $elements['s2'] = $fieldset->addField(
+            's2',
+            'note',
+            [
+                'text' => __('Breakpoint 2'),
+            ]
+        );
+
+        $elements['nav_brk2'] = $fieldset->addField(
+            'nav_brk2',
+            'select',
+            [
+                'name'     => 'nav_brk2',
+                'label'    => __('Next/Prev Buttons'),
+                'title'    => __('Next/Prev Buttons'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'    => 'If True, next/prev buttons are displayed.',
+            ]
+        );
+
+        $elements['items_brk2'] = $fieldset->addField(
+            'items_brk2',
+            'text',
+            [
+                'name'     => 'items_brk2',
+                'label'    => __('Items'),
+                'title'    => __('Items'),
+                'required' => true,
+                'class'    => 'validate-greater-than-zero',
+                'note'     => 'The number of items you want to see at this breakpoint and higher.'
+            ]
+        );
+
+        // Breakpoint 3
+
+        $elements['s3'] = $fieldset->addField(
+            's3',
+            'note',
+            [
+                'text' => __('Breakpoint 3'),
+            ]
+        );
+
+        $elements['nav_brk3'] = $fieldset->addField(
+            'nav_brk3',
+            'select',
+            [
+                'name'     => 'nav_brk3',
+                'label'    => __('Next/Prev Buttons'),
+                'title'    => __('Next/Prev Buttons'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'    => 'If True, next/prev buttons are displayed.',
+            ]
+        );
+
+        $elements['items_brk3'] = $fieldset->addField(
+            'items_brk3',
+            'text',
+            [
+                'name'     => 'items_brk3',
+                'label'    => __('Items'),
+                'title'    => __('Items'),
+                'required' => true,
+                'class'    => 'validate-greater-than-zero',
+                'note'     => 'The number of items you want to see at this breakpoint and higher.'
+            ]
+        );
+
+        // Breakpoint 4
+
+        $elements['s4'] = $fieldset->addField(
+            's4',
+            'note',
+            [
+                'text' => __('Breakpoint 4'),
+            ]
+        );
+
+        $elements['nav_brk4'] = $fieldset->addField(
+            'nav_brk4',
+            'select',
+            [
+                'name'     => 'nav_brk4',
+                'label'    => __('Next/Prev Buttons'),
+                'title'    => __('Next/Prev Buttons'),
+                'required' => false,
+                'values'   => [
+                    ['value' => 1, 'label' => __('True')],
+                    ['value' => 0, 'label' => __('False')]
+                ],
+                'note'    => 'If True, next/prev buttons are displayed.',
+            ]
+        );
+
+        $elements['items_brk4'] = $fieldset->addField(
+            'items_brk4',
+            'text',
+            [
+                'name'     => 'items_brk4',
+                'label'    => __('Items'),
+                'title'    => __('Items'),
+                'required' => true,
+                'class'    => 'validate-greater-than-zero',
+                'note'     => 'The number of items you want to see at this breakpoint and higher.'
+            ]
+        );
+
+        /*
+          * Add field map
+          */
+        foreach ($elements as $fieldMap) {
+            $dependenceBlock->addFieldMap($fieldMap->getHtmlId(), $fieldMap->getName());
+        }
+
+        $mappingFieldDependence = $this->getMappingFieldDependence();
+        /*
+         * Add field dependence
+         */
+        foreach ($mappingFieldDependence as $dependence) {
+            $negative = isset($dependence['negative']) && $dependence['negative'];
+            if (is_array($dependence['fieldName'])) {
+                foreach ($dependence['fieldName'] as $fieldName) {
+                    $dependenceBlock->addFieldDependence(
+                        $elements[$fieldName]->getName(),
+                        $elements[$dependence['fieldNameFrom']]->getName(),
+                        $this->getDependencyField($dependence['refField'], $negative)
+                    );
+                }
+            } else {
+                $dependenceBlock->addFieldDependence(
+                    $elements[$dependence['fieldName']]->getName(),
+                    $elements[$dependence['fieldNameFrom']]->getName(),
+                    $this->getDependencyField($dependence['refField'], $negative)
+                );
+            }
+        }
+
+        /*
+         * add child block dependence
+         */
+        $this->setChild('form_after', $dependenceBlock);
+
+        if (!$slider->getId()) {
+            $slider->setStatus($isElementDisabled ? Status::STATUS_ENABLED : Status::STATUS_DISABLED);
+        }
+
+        $form->setValues($slider->getData());
+        $form->addFieldNameSuffix(self::FIELD_NAME);
+        $this->setForm($form);
+
+        return parent::_prepareForm();
+    }
+    /**
+     * get dependency field.
+     *
+     * @return Magento\Config\Model\Config\Structure\Element\Dependency\Field [description]
+     */
+    public function getDependencyField($refField, $negative = false, $separator = ',', $fieldPrefix = '')
+    {
+        return $this->_fieldFactory->create(
+            ['fieldData' => [
+                'value' => (string)$refField,
+                'negative' => $negative,
+                'separator' => $separator],
+                'fieldPrefix' => $fieldPrefix
+            ]
+        );
+    }
+
+    public function getMappingFieldDependence()
+    {
+        return [
+            [
+                'fieldName'     => 'center',
+                'fieldNameFrom' => 'transition',
+                'refField'      => 'fadeOut',
+                'negative'      => true,
+            ],
+            [
+                'fieldName'     => 'margin',
+                'fieldNameFrom' => 'transition',
+                'refField'      => 'fadeOut',
+                'negative'      => true,
+            ],
+            [
+                'fieldName'     => 'stagePadding',
+                'fieldNameFrom' => 'transition',
+                'refField'      => 'fadeOut',
+                'negative'      => true,
+            ],
+            [
+                'fieldName'     => 'stagePadding',
+                'fieldNameFrom' => 'center',
+                'refField'      => '1',
+                'negative'      => true,
+            ],
+        ];
+    }
+
+    public function getSlider()
+    {
+        return $this->_coreRegistry->registry('slider');
+    }
+
+    public function getPageTitle()
+    {
+        return $this->getSlider()->getId()
+            ? __("Edit Slider '%1'", $this->escapeHtml($this->getSlider()->getTitle()))
+            : __('New Slider');
+    }
+
+    /**
+     * Prepare label for tab.
+     *
+     * @return string
+     */
+    public function getTabLabel()
+    {
+        return __('Slider Details');
+    }
+
+    /**
+     * Prepare title for tab.
+     *
+     * @return string
+     */
+    public function getTabTitle()
+    {
+        return __('Slider Details');
+    }
+
+    /**
+     * Can show tab in tabs
+     *
+     * @return boolean
+     * @api
+     */
+    public function canShowTab()
+    {
+        return true;
+    }
+
+    /**
+     * Tab is hidden
+     *
+     * @return boolean
+     * @api
+     */
+    public function isHidden()
+    {
+        return false;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Helper/Renderer/EditBanner.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Helper/Renderer/EditBanner.php
new file mode 100644
index 0000000000000000000000000000000000000000..dc8d6e38376e3283b1b5eaa75a0bbc3f6f00e648
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tab/Helper/Renderer/EditBanner.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tab\Helper\Renderer;
+
+/**
+ * Edit banner form
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class EditBanner extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
+{
+    /**
+     * Store manager.
+     *
+     * @var \Magento\Store\Model\StoreManagerInterface
+     */
+    protected $_storeManager;
+
+    /**
+     * banner factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\BannerFactory
+     */
+    protected $_bannerFactory;
+
+    /**
+     * [__construct description].
+     *
+     * @param \Magento\Backend\Block\Context                   $context
+     * @param \Magento\Store\Model\StoreManagerInterface       $storeManager
+     * @param \WeltPixel\OwlCarouselSlider\Model\BannerFactory $bannerFactory
+     * @param array                                            $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Context $context,
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
+        \WeltPixel\OwlCarouselSlider\Model\BannerFactory $bannerFactory,
+        array $data = []
+    ) {
+        parent::__construct($context, $data);
+        $this->_storeManager = $storeManager;
+        $this->_bannerFactory = $bannerFactory;
+    }
+
+    /**
+     * Render action.
+     *
+     * @param \Magento\Framework\DataObject $row
+     *
+     * @return string
+     */
+    public function render(\Magento\Framework\DataObject $row)
+    {
+        return '<a href="' . $this->getUrl('*/banner/edit', ['_current' => false, 'id' => $row->getId()])
+            . '" target="_blank">Edit</a> ';
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tabs.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tabs.php
new file mode 100644
index 0000000000000000000000000000000000000000..493901e39bb1d69aebaaebb9d4e339dca7010927
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Edit/Tabs.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit;
+
+/**
+ * Admin Locator left menu.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Tabs extends \Magento\Backend\Block\Widget\Tabs
+{
+    protected function _construct()
+    {
+        parent::_construct();
+        
+        $this->setId('slider_tabs');
+        $this->setDestElementId('edit_form');
+        $this->setTitle(__('Slider Information'));
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Grid.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Grid.php
new file mode 100644
index 0000000000000000000000000000000000000000..aa25e35ebcc9b080e3e12fdf8843b02a3f983117
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Slider/Grid.php
@@ -0,0 +1,212 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider;
+
+/**
+ * Slider grid.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
+{
+    /**
+     * Slider collection factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory
+     */
+    protected $_sliderCollectionFactory;
+
+    /**
+     * Helper.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Helper\Data
+     */
+    protected $_bannersliderHelper;
+
+    /**
+     * Available status.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\Status
+     */
+    private $_status;
+
+    /**
+     * [__construct description].
+     *
+     * @param \Magento\Backend\Block\Template\Context                                   $context
+     * @param \Magento\Backend\Helper\Data                                              $backendHelper
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory $sliderCollectionFactory
+     * @param \WeltPixel\OwlCarouselSlider\Helper\Data                                  $bannersliderHelper
+     * @param \WeltPixel\OwlCarouselSlider\Model\Status                                 $status
+     * @param array                                                                     $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        \Magento\Backend\Helper\Data $backendHelper,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory $sliderCollectionFactory,
+        \WeltPixel\OwlCarouselSlider\Helper\Data $bannersliderHelper,
+        \WeltPixel\OwlCarouselSlider\Model\Status $status,
+        array $data = []
+    ) {
+        parent::__construct($context, $backendHelper, $data);
+
+        $this->_sliderCollectionFactory = $sliderCollectionFactory;
+        $this->_bannersliderHelper = $bannersliderHelper;
+        $this->_status = $status;
+    }
+
+    /**
+     * Internal constructor, that is called from real constructor
+     * @return void
+     */
+    protected function _construct()
+    {
+        parent::_construct();
+
+        $this->setId('sliderGrid');
+        $this->setDefaultSort('id');
+        $this->setDefaultDir('ASC');
+        $this->setSaveParametersInSession(true);
+        $this->setUseAjax(true);
+    }
+
+    /**
+     * Prepare collection.
+     *
+     * @return [type] [description]
+     */
+    protected function _prepareCollection()
+    {
+        $collection = $this->_sliderCollectionFactory->create();
+        $this->setCollection($collection);
+
+        return parent::_prepareCollection();
+    }
+
+    /**
+     * @return $this
+     */
+    protected function _prepareColumns()
+    {
+        $this->addColumn(
+            'id',
+            [
+                'header' => __('Slider ID'),
+                'type'   => 'number',
+                'index'  => 'id',
+                'header_css_class' => 'col-id',
+                'column_css_class' => 'col-id',
+            ]
+        );
+
+        $this->addColumn(
+            'status',
+            [
+                'header'  => __('Status'),
+                'index'   => 'status',
+                'type'    => 'options',
+                'options' => $this->_status->getAllAvailableStatuses(),
+            ]
+        );
+
+        $this->addColumn(
+            'title',
+            [
+                'header' => __('Title'),
+                'index'  => 'title',
+                'class'  => 'xxx',
+                'width'  => '50px',
+            ]
+        );
+
+        $this->addColumn(
+            'edit',
+            [
+                'header'  => __('Edit'),
+                'type'    => 'action',
+                'getter'  => 'getId',
+                'actions' => [
+                    [
+                        'caption' => __('Edit'),
+                        'url' => [
+                            'base' => '*/*/edit',
+                        ],
+                        'field' => 'id',
+                    ],
+                ],
+                'filter'   => false,
+                'sortable' => false,
+                'index'    => 'stores',
+                'header_css_class' => 'col-action',
+                'column_css_class' => 'col-action',
+            ]
+        );
+        $this->addExportType('*/*/exportCsv', __('CSV'));
+        $this->addExportType('*/*/exportXml', __('XML'));
+        $this->addExportType('*/*/exportExcel', __('Excel'));
+
+        return parent::_prepareColumns();
+    }
+
+    /**
+     * @return $this
+     */
+    protected function _prepareMassaction()
+    {
+        $this->setMassactionIdField('entity_id');
+        $this->getMassactionBlock()->setFormFieldName('slider');
+
+        $this->getMassactionBlock()->addItem(
+            'delete',
+            [
+                'label' => __('Delete'),
+                'url' => $this->getUrl('weltowlcarousel/*/massDelete'),
+                'confirm' => __('Are you sure?'),
+            ]
+        );
+
+        $status = $this->_status->getAllAvailableStatuses();
+        array_unshift($status, ['label' => '', 'value' => '']);
+        $this->getMassactionBlock()->addItem(
+            'status',
+            [
+                'label' => __('Change status'),
+                'url' => $this->getUrl('weltowlcarousel/*/massStatus', ['_current' => true]),
+                'additional' => [
+                    'visibility' => [
+                        'name'   => 'status',
+                        'type'   => 'select',
+                        'class'  => 'required-entry',
+                        'label'  => __('Status'),
+                        'values' => $status,
+                    ],
+                ],
+            ]
+        );
+
+        return $this;
+    }
+
+    /**
+     * @return string
+     */
+    public function getGridUrl()
+    {
+        return $this->getUrl('*/*/grid', ['_current' => true]);
+    }
+
+    /**
+     * get row url
+     * @param  object $row
+     * @return string
+     */
+    public function getRowUrl($row)
+    {
+        return $this->getUrl(
+            '*/*/edit',
+            ['id' => $row->getId()]
+        );
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/SeparatorGeneralCarousel.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/SeparatorGeneralCarousel.php
new file mode 100644
index 0000000000000000000000000000000000000000..09c5ca7c019719caa25dbe721e4eb32a20ffde5f
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/SeparatorGeneralCarousel.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config;
+
+/**
+ * Class SeparatorGeneralCarousel
+ * @package WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config
+ */
+class SeparatorGeneralCarousel extends \Magento\Config\Block\System\Config\Form\Field
+{
+    /**
+     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
+     * @return string
+     */
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $html = '
+            <div class="message" style="text-align: center; margin-top: 20px;">
+                <strong>' . __('General Carousel Settings') . '</strong><br />
+            </div>
+        ';
+
+        return $html;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/SeparatorGeneralSlider.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/SeparatorGeneralSlider.php
new file mode 100644
index 0000000000000000000000000000000000000000..f7f121ce928feef9898874db6f6703288dc3df25
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/SeparatorGeneralSlider.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config;
+
+/**
+ * Class SeparatorGeneralSlider
+ * @package WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config
+ */
+class SeparatorGeneralSlider extends \Magento\Config\Block\System\Config\Form\Field
+{
+    /**
+     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
+     * @return string
+     */
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $html = '
+            <div class="message" style="text-align: center; margin-top: 20px;">
+                <strong>' . __('General Slider Settings') . '</strong><br />
+            </div>
+        ';
+
+        return $html;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/Separatorbreakpoint.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/Separatorbreakpoint.php
new file mode 100644
index 0000000000000000000000000000000000000000..aedc5421633c4e440d05b81c4347279c66d0d2ca
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/Separatorbreakpoint.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config;
+
+/**
+ * Implement
+ * @category WeltPixel_OwlCarouselSlider
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel_OwlCarouselSlider Developer
+ */
+class Separatorbreakpoint extends \Magento\Config\Block\System\Config\Form\Field
+{
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $number = (int)substr($element->getId(), -1);
+
+        if($number > 0) {
+            $html = '
+                <p style="text-align: center;"><strong >' . __('Breakpoint ') . $number . '</strong></p>
+            ';
+        } else {
+            $html = '
+            <div class="message" style="text-align: center; margin-top: 20px;">
+                <p><strong>' . __('Breakpoint Carousel Options') . '</strong></p>
+                <p><strong>' . __('This configuration will overwrite the General Carousel Options.') . '</strong></p>
+            </div>
+        ';
+        }
+
+        return $html;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/Separatorslide.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/Separatorslide.php
new file mode 100644
index 0000000000000000000000000000000000000000..64ab34da920f7d00e343005697b5b7f178ebf7e0
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/System/Config/Separatorslide.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config;
+
+/**
+ * Implement
+ * @category WeltPixel_OwlCarouselSlider
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel_OwlCarouselSlider Developer
+ */
+class Separatorslide extends \Magento\Config\Block\System\Config\Form\Field
+{
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $html = '
+            <div class="message" style="text-align: center; margin-top: 20px;">
+                <strong>' . __('General Carousel Options') . '</strong><br />
+            </div>
+        ';
+
+        return $html;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Widget/UpgradeToPro.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Widget/UpgradeToPro.php
new file mode 100644
index 0000000000000000000000000000000000000000..98741cfd2ae36cd9b4ac4c0bbc9b6f7b2e5a5d22
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Adminhtml/Widget/UpgradeToPro.php
@@ -0,0 +1,22 @@
+<?php
+namespace WeltPixel\OwlCarouselSlider\Block\Adminhtml\Widget;
+
+/**
+ * Class UpgradeToPro
+ * @package WeltPixel\OwlCarouselSlider\Block\Adminhtml\Widget
+ */
+class UpgradeToPro extends \Magento\Backend\Block\Widget\Grid\Extended
+{
+    /**
+     * Prepare chooser element HTML
+     *
+     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
+     * @return \Magento\Framework\Data\Form\Element\AbstractElement
+     */
+    public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $upgradeText = __('<b style="font-size: 16px"><a style="font-size: 16px" target="_blank" href="https://www.weltpixel.com/owl-carousel-and-slider.html">Upgrade to Pro version</a> to enable this functionality.</b>');
+        $element->setData('after_element_html', $upgradeText);
+        return $element;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Product/ImageBuilder.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Product/ImageBuilder.php
new file mode 100644
index 0000000000000000000000000000000000000000..d4e37e87c92ba70a50ff326f86767524c263b4cd
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Product/ImageBuilder.php
@@ -0,0 +1,100 @@
+<?php
+namespace WeltPixel\OwlCarouselSlider\Block\Product;
+
+use Magento\Catalog\Helper\ImageFactory as HelperFactory;
+
+class ImageBuilder extends \Magento\Catalog\Block\Product\ImageBuilder
+{
+    /**
+     * @var \WeltPixel\OwlCarouselSlider\Helper\Custom
+     */
+    protected $_helperCustom;
+
+    /**
+     * @param HelperFactory $helperFactory
+     * @param \Magento\Catalog\Block\Product\ImageFactory $imageFactory
+     * @param \WeltPixel\OwlCarouselSlider\Helper\Custom $_helperCustom
+     */
+    public function __construct(
+        HelperFactory $helperFactory,
+        \Magento\Catalog\Block\Product\ImageFactory $imageFactory,
+        \WeltPixel\OwlCarouselSlider\Helper\Custom $_helperCustom
+    ) {
+        $this->_helperCustom = $_helperCustom;
+        parent::__construct($helperFactory, $imageFactory);
+    }
+
+
+
+    /**
+     * Create image block
+     *
+     * @return \Magento\Catalog\Block\Product\Image
+     */
+    public function create()
+    {
+        /** Check if module is enabled */
+        if (!$this->isLazyLoadEnabled()) {
+            return parent::create();
+        }
+
+        /** @var \Magento\Catalog\Helper\Image $helper */
+        $helper = $this->helperFactory->create()
+            ->init($this->product, $this->imageId);
+
+        $template = $helper->getFrame()
+            ? 'WeltPixel_OwlCarouselSlider::product/image.phtml'
+            : 'WeltPixel_OwlCarouselSlider::product/image_with_borders.phtml';
+
+        $data['data']['template'] = $template;
+
+        $imagesize = $helper->getResizedImageInfo();
+
+        $data = [
+            'data' => [
+                'template' => $template,
+                'image_url' => $helper->getUrl(),
+                'width' => $helper->getWidth(),
+                'height' => $helper->getHeight(),
+                'label' => $helper->getLabel(),
+                'ratio' =>  $this->getRatio($helper),
+                'custom_attributes' => $this->getCustomAttributes(),
+                'resized_image_width' => !empty($imagesize[0]) ? $imagesize[0] : $helper->getWidth(),
+                'resized_image_height' => !empty($imagesize[1]) ? $imagesize[1] : $helper->getHeight(),
+            ],
+        ];
+
+        $data['data']['lazy_load'] = true;
+
+        return $this->imageFactory->create($data);
+    }
+
+    /**
+     * @return bool
+     */
+    protected function isLazyLoadEnabled() {
+        foreach ($this->attributes as $name => $value) {
+            if ($name == 'weltpixel_lazyLoad') {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Retrieve image custom attributes for HTML element
+     *
+     * @return string
+     */
+    protected function getCustomAttributes()
+    {
+        $result = [];
+        foreach ($this->attributes as $name => $value) {
+            if ($name == 'weltpixel_lazyLoad') continue;
+            $result[] = $name . '="' . $value . '"';
+        }
+        return !empty($result) ? implode(' ', $result) : '';
+    }
+
+}
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Slider/Custom.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Slider/Custom.php
new file mode 100644
index 0000000000000000000000000000000000000000..6be790362aff07238cefce7bd0ca10afdce11372
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Slider/Custom.php
@@ -0,0 +1,64 @@
+<?php
+namespace WeltPixel\OwlCarouselSlider\Block\Slider;
+
+class Custom extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface
+{
+    protected $_sliderId;
+    protected $_sliderConfiguration;
+    protected $_helperCustom;
+
+    /**
+     * Internal constructor, that is called from real constructor
+     *
+     * @param \Magento\Framework\View\Element\Template\Context  $context
+     * @param \Magento\Framework\Registry $registry
+     * @param \WeltPixel\OwlCarouselSlider\Helper\Custom        $helperCustom
+     */
+
+    public function __construct(
+        \Magento\Framework\View\Element\Template\Context $context,
+        \Magento\Framework\Registry $registry,
+        \WeltPixel\OwlCarouselSlider\Helper\Custom $helperCustom,
+
+        array $data = []
+    )
+    {
+        $this->_coreRegistry = $registry;
+        $this->_helperCustom = $helperCustom;
+
+        $this->setTemplate('sliders/custom.phtml');
+
+        parent::__construct($context, $data);
+    }
+
+    public function getSliderConfiguration()
+    {
+        $sliderId = $this->getData('slider_id');
+
+        if ($this->_sliderId != $sliderId) {
+            $this->_sliderId = $sliderId;
+        }
+
+        if (is_null($this->_sliderConfiguration)) {
+
+            $this->_sliderConfiguration = $this->_helperCustom->getSliderConfigOptions($this->_sliderId);
+        }
+
+        return $this->_sliderConfiguration;
+    }
+
+    public function getBreakpointConfiguration()
+    {
+        return $this->_helperCustom->getBreakpointConfiguration();
+    }
+
+    public function getMediaUrl()
+    {
+        return $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
+    }
+
+    public function isGatEnabled()
+    {
+        return $this->_helperCustom->isGatEnabled();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Block/Slider/Products.php b/app/code/WeltPixel/OwlCarouselSlider/Block/Slider/Products.php
new file mode 100644
index 0000000000000000000000000000000000000000..a335665fc516d2cce78ef7c911abf394c3d109a3
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Block/Slider/Products.php
@@ -0,0 +1,510 @@
+<?php
+namespace WeltPixel\OwlCarouselSlider\Block\Slider;
+
+class Products extends \Magento\Catalog\Block\Product\AbstractProduct implements \Magento\Widget\Block\BlockInterface
+{
+    /**
+     * Core registry.
+     *
+     * @var \Magento\Framework\Registry
+     */
+    protected $_coreRegistry;
+    protected $_helperProducts;
+    protected $_helperCustom;
+    protected $_productType;
+    protected $_sliderConfiguration;
+
+    protected $_currentProduct;
+    /**
+     * Products visibility
+     * @var \Magento\Reports\Model\Event\TypeFactory
+     */
+    protected $_catalogProductVisibility;
+
+    protected $_productCollectionFactory;
+    protected $_reportsCollectionFactory;
+    protected $_viewProductsBlock;
+
+    /**
+     * Internal constructor, that is called from real constructor
+     *
+     * @param \Magento\Catalog\Block\Product\Context                                $context
+     * @param \WeltPixel\OwlCarouselSlider\Helper\Products                          $helperProducts
+     * @param \WeltPixel\OwlCarouselSlider\Helper\Custom                            $helperCustom
+     * @param \Magento\Catalog\Model\Product\Visibility                             $catalogProductVisibility
+     * @param \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory        $productsCollectionFactory
+     * @param \Magento\Reports\Model\ResourceModel\Product\CollectionFactory        $reportsCollectionFactory
+     * @param \Magento\Reports\Block\Product\Widget\Viewed\Proxy                    $viewedProductsBlock
+     */
+
+    public function __construct(
+        \Magento\Catalog\Block\Product\Context $context,
+        \WeltPixel\OwlCarouselSlider\Helper\Products $helperProducts,
+        \WeltPixel\OwlCarouselSlider\Helper\Custom $helperCustom,
+        \Magento\Catalog\Model\Product\Visibility $catalogProductVisibility,
+        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productsCollectionFactory,
+        \Magento\Reports\Model\ResourceModel\Product\CollectionFactory $reportsCollectionFactory,
+        \Magento\Reports\Block\Product\Widget\Viewed\Proxy $viewedProductsBlock,
+        array $data = []
+    )
+    {
+        $this->_coreRegistry              = $context->getRegistry();
+        $this->_helperCustom              = $helperCustom;
+        $this->_helperProducts            = $helperProducts;
+        $this->_catalogProductVisibility  = $catalogProductVisibility;
+        $this->_productCollectionFactory  = $productsCollectionFactory;
+        $this->_reportsCollectionFactory  = $reportsCollectionFactory;
+        $this->_viewProductsBlock         = $viewedProductsBlock;
+
+        $this->setTemplate('sliders/products.phtml');
+
+        if (is_null($this->_currentProduct)) {
+            $this->_currentProduct = $this->_coreRegistry->registry('current_product');
+        }
+
+        parent::__construct($context, $data);
+        $this->_isScopePrivate = false;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    protected function _construct()
+    {
+        parent::_construct();
+
+        $this->addData([
+            'cache_lifetime' => 86400,
+            'cache_tags' => [\Magento\Catalog\Model\Product::CACHE_TAG,
+            ], ]);
+    }
+
+    /**
+     * Get key pieces for caching block content
+     *
+     * @return array
+     */
+    public function getCacheKeyInfo()
+    {
+        return [
+            'WELTPIXEL_PRODUCTS_LIST_WIDGET',
+            $this->_storeManager->getStore()->getId(),
+            $this->_design->getDesignTheme()->getId(),
+            $this->getData('products_type')
+        ];
+    }
+
+
+    /**
+     * Retrieve the product collection based on product type.
+     *
+     * @return array|\Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    public function getProductCollection()
+    {
+        $productsType = $this->getData('products_type');
+
+        switch ($productsType) {
+            case 'new_products':
+                $productCollection =  $this->_getNewProductCollection($this->_productCollectionFactory->create());
+                break;
+            case 'bestsell_products':
+                $productCollection = $this->_getBestsellProductCollection($this->_productCollectionFactory->create());
+                break;
+            case 'sell_products':
+                $productCollection =  $this->_getSellProductCollection($this->_productCollectionFactory->create());
+                break;
+            case 'recently_viewed':
+                $productCollection =  $this->_getRecentlyViewedCollection($this->_productCollectionFactory->create());
+                break;
+            case 'related_products':
+                $productCollection = $this->getProductCollectionRelated();
+                break;
+            case 'upsell_products':
+                $productCollection = $this->getProductCollectionUpSell();
+                break;
+            case 'crosssell_products':
+                $productCollection = $this->getProductCollectionCrossSell();
+                break;
+            default:
+                $productCollection = [];
+        }
+
+        return $productCollection;
+    }
+
+    /**
+     * Retrieve the Slider settings.
+     *
+     * @return array
+     */
+    public function getSliderConfiguration()
+    {
+        $productsType = $this->getData('products_type');
+
+        if (is_null($this->_sliderConfiguration) && $this->_productType != $productsType) {
+            $this->_productType = $productsType;
+            $this->_sliderConfiguration = $this->_helperProducts->getSliderConfigOptions($productsType);
+        }
+
+        return $this->_sliderConfiguration;
+    }
+
+    /**
+     * Retrieve the Slider Breakpoint settings.
+     *
+     * @return array
+     */
+    public function getBreakpointConfiguration()
+    {
+        return $this->_helperCustom->getBreakpointConfiguration();
+    }
+
+    /**
+     * Get new slider products.
+     *
+     * @param \Magento\Catalog\Model\ResourceModel\Product\Collection $_collection
+     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    protected function _getNewProductCollection($_collection)
+    {
+        $limit  = $this->_getProductLimit('new_products');
+        $random = $this->_getRandomSort('new_products');
+
+        if (!$limit || $limit == 0) {
+            return [];
+        }
+
+        $_collection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());
+
+        if ($random) {
+            $allIds = $_collection->getAllIds();
+            $randomIds = [];
+            $maxKey = count($allIds) - 1;
+            while (count($randomIds) <= count($allIds) - 1) {
+                $randomKey = mt_rand(0, $maxKey);
+                $randomIds[$randomKey] = $allIds[$randomKey];
+            }
+
+            $_collection->addIdFilter($randomIds);
+        };
+
+        $_collection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());
+
+        $_collection = $this->_addProductAttributesAndPrices($_collection)
+            ->addAttributeToFilter(
+                'news_from_date',
+                ['date' => true, 'to' => $this->getEndOfDayDate()],
+                'left')
+            ->addAttributeToFilter(
+                'news_to_date',
+                [
+                    'or' => [
+                        0 => ['date' => true, 'from' => $this->getStartOfDayDate()],
+                        1 => ['is' => new \Zend_Db_Expr('null')],
+                    ]
+                ],
+                'left')
+            ->addAttributeToSort(
+                'news_from_date',
+                'desc')
+            ->addStoreFilter($this->getStoreId())->setCurPage(1);
+
+        if ($limit && $limit > 0 ) {
+            $_collection->setPageSize($limit);
+        };
+
+        return $_collection;
+    }
+
+    /**
+     * Get best-sell slider products.
+     *
+     * @param \Magento\Catalog\Model\ResourceModel\Product\Collection $_collection
+     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    protected function _getBestsellProductCollection($_collection)
+    {
+        $limit  = $this->_getProductLimit('bestsell_products');
+        $random = $this->_getRandomSort('bestsell_products');
+
+        if (!$limit || $limit == 0) {
+            return [];
+        };
+
+        $_collection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());
+
+        if ($random) {
+            $allIds = $_collection->getAllIds();
+            $candidateIds = $_collection->getAllIds();
+            $randomIds = [];
+            $maxKey = count($candidateIds) - 1;
+            while (count($randomIds) <= count($allIds) - 1) {
+                $randomKey = mt_rand(0, $maxKey);
+                $randomIds[$randomKey] = $candidateIds[$randomKey];
+            }
+
+            $_collection->addIdFilter($randomIds);
+        };
+
+        $_collection = $this->_addProductAttributesAndPrices($_collection);
+        $_collection->getSelect()
+            ->join(['bestsellers' => $_collection->getTable('sales_bestsellers_aggregated_yearly')],
+                'e.entity_id = bestsellers.product_id AND bestsellers.store_id = '.$this->getStoreId(),
+                ['qty_ordered','rating_pos'])
+            ->order('rating_pos');
+
+        $_collection->addStoreFilter($this->getStoreId())->setCurPage(1);
+
+        if ($limit && $limit > 0 ) {
+            $_collection->setPageSize($limit);
+        };
+
+        return $_collection;
+    }
+
+    /**
+     * Get sell slider products.
+     *
+     * @param \Magento\Catalog\Model\ResourceModel\Product\Collection $_collection
+     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    protected function _getSellProductCollection($_collection)
+    {
+        $limit  = $this->_getProductLimit('sell_products');
+        $random = $this->_getRandomSort('sell_products');
+
+        if(!$limit || $limit == 0) {
+            return [];
+        };
+
+        $_collection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());
+
+        if ($random) {
+            $allIds = $_collection->getAllIds();
+            $candidateIds = $_collection->getAllIds();
+            $randomIds = [];
+            $maxKey = count($candidateIds) - 1;
+            while (count($randomIds) <= count($allIds) - 1) {
+                $randomKey = mt_rand(0, $maxKey);
+                $randomIds[$randomKey] = $candidateIds[$randomKey];
+            }
+
+            $_collection->addIdFilter($randomIds);
+        };
+
+        $_collection = $this->_addProductAttributesAndPrices($_collection)
+            ->addAttributeToFilter(
+                'special_from_date',
+                ['date' => true, 'to' => $this->getEndOfDayDate()],
+                'left')
+            ->addAttributeToFilter(
+                'special_to_date',
+                [
+                    'or' => [
+                        0 => ['date' => true, 'from' => $this->getStartOfDayDate()],
+                        1 => ['is' => new \Zend_Db_Expr('null')],
+                    ]
+                ],
+                'left')
+            ->addAttributeToSort(
+                'news_from_date',
+                'desc')
+            ->addStoreFilter($this->getStoreId())
+            ->setCurPage(1);
+
+        if($limit && $limit > 0 ) {
+            $_collection->setPageSize($limit);
+        };
+
+        return $_collection;
+    }
+
+    /**
+     * Get recently viewed slider products.
+     *
+     * @param \Magento\Catalog\Model\ResourceModel\Product\Collection $_collection
+     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    protected function _getRecentlyViewedCollection($_collection)
+    {
+        $limit  = $this->_getProductLimit('recently_viewed');
+        $random = $this->_getRandomSort('recently_viewed');
+
+        if($limit == 0) {
+            return [];
+        };
+
+        $_collection = $this->_viewProductsBlock->getItemsCollection();
+
+        if ($random) {
+            $allIds = $_collection->getAllIds();
+            $candidateIds = $_collection->getAllIds();
+            $randomIds = [];
+            $maxKey = count($candidateIds) - 1;
+            while (count($randomIds) <= count($allIds) - 1) {
+                $randomKey = mt_rand(0, $maxKey);
+                $randomIds[$randomKey] = $candidateIds[$randomKey];
+            }
+
+            $_collection->addIdFilter($randomIds);
+        };
+
+        if ($limit && $limit > 0 ) {
+            $_collection->setPageSize($limit);
+        };
+
+        return $_collection;
+    }
+
+    /**
+     * Get related slider products.
+     *
+     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    public function getProductCollectionRelated()
+    {
+        if (!$this->_currentProduct) {
+            return [];
+        }
+
+        return $this->getRelatedProducts($this->_currentProduct);
+    }
+
+    /**
+     * Retrieve array of related products.
+     *
+     * @return array
+     */
+    public function getRelatedProducts($currentProduct)
+    {
+        if (!$currentProduct->hasRelatedProducts()) {
+            $products = [];
+            $_collection = $currentProduct->getRelatedProductCollection();
+            $_collection->addAttributeToSelect('*');
+            foreach ($_collection as $product) {
+                $products[] = $product;
+            }
+            $currentProduct->setRelatedProducts($products);
+        }
+
+        return $currentProduct->getData('related_products');
+    }
+
+    /**
+     * Get up-sell slider products.
+     *
+     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    public function getProductCollectionUpSell()
+    {
+        if(!$this->_currentProduct) {
+            return [];
+        }
+        return $this->getUpSellProducts($this->_currentProduct);
+    }
+
+    /**
+     * Retrieve array of up sell products.
+     *
+     * @return array
+     */
+    public function getUpSellProducts($currentProduct)
+    {
+        if (!$currentProduct->hasUpSellProducts()) {
+            $products = [];
+            $_collection = $currentProduct->getUpSellProductCollection();
+            $_collection->addAttributeToSelect('*');
+            foreach ($_collection as $product) {
+                $products[] = $product;
+            }
+            $currentProduct->setUpSellProducts($products);
+        }
+
+        return $currentProduct->getData('up_sell_products');
+    }
+
+    /**
+     * Get cross-sell slider products.
+     *
+     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    public function getProductCollectionCrossSell()
+    {
+        if(!$this->_currentProduct) {
+            return [];
+        }
+
+        return $this->getCrossSellProducts($this->_currentProduct);
+    }
+
+    /**
+     * Retrieve array of cross sell products
+     *
+     * @return array
+     */
+    public function getCrossSellProducts($currentProduct)
+    {
+        if (!$currentProduct->hasCrossSellProducts()) {
+            $products = [];
+            $_collection = $currentProduct->getCrossSellProductCollection();
+            $_collection->addAttributeToSelect('*');
+            foreach ($_collection as $product) {
+                $products[] = $product;
+            }
+            $currentProduct->setCrossSellProducts($products);
+        }
+
+        return $currentProduct->getData('cross_sell_products');
+    }
+
+    /**
+     * Retrieve the products limit based on type.
+     *
+     * @param $type
+     * @return int
+     */
+    protected function _getProductLimit($type)
+    {
+        return $this->_helperProducts->getProductLimit($type);
+    }
+
+    /**
+     * Retrieve the products random sort flag based on type.
+     *
+     * @param $type
+     * @return mixed
+     */
+    protected function _getRandomSort($type)
+    {
+        return $this->_helperProducts->getRandomSort($type);
+    }
+
+    /**
+     * Get start of day date.
+     * @return string
+     */
+    public function getStartOfDayDate()
+    {
+        return $this->_localeDate->date()->setTime(0, 0, 0)->format('Y-m-d H:i:s');
+    }
+
+    /**
+     * Get end of day date.
+     * @return string
+     */
+    public function getEndOfDayDate()
+    {
+        return $this->_localeDate->date()->setTime(23, 59, 59)->format('Y-m-d H:i:s');
+    }
+
+    /**
+     * Retrieve the current store id.
+     * 
+     * @return int
+     */
+    public function getStoreId()
+    {
+        return $this->_storeManager->getStore()->getId();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/AbstractAction.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/AbstractAction.php
new file mode 100644
index 0000000000000000000000000000000000000000..655dfdd121f84abc2e34c12f80a1397ab4404341
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/AbstractAction.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml;
+
+/**
+ * Abstract Action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+abstract class AbstractAction extends \Magento\Backend\App\Action
+{
+    const PARAM_ID = 'id';
+
+    /**
+     * @var \Magento\Backend\Helper\Js
+     */
+    protected $_jsHelper;
+
+    /**
+     * @var \Magento\Backend\Model\View\Result\ForwardFactory
+     */
+    protected $_resultForwardFactory;
+
+    /**
+     * @var \Magento\Framework\View\Result\LayoutFactory
+     */
+    protected $_resultLayoutFactory;
+
+    /**
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    protected $_resultPageFactory;
+
+    /**
+     * Banner factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\BannerFactory
+     */
+    protected $_bannerFactory;
+
+    /**
+     * Slider factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\SliderFactory
+     */
+    protected $_sliderFactory;
+
+    /**
+     * Banner Collection Factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory
+     */
+    protected $_bannerCollectionFactory;
+
+    /**
+     * Slider Collection Factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory
+     */
+    protected $_sliderCollectionFactory;
+
+    /**
+     * Registry object.
+     *
+     * @var \Magento\Framework\Registry
+     */
+    protected $_coreRegistry;
+
+    /**
+     * File Factory.
+     *
+     * @var \Magento\Framework\App\Response\Http\FileFactory
+     */
+    protected $_fileFactory;
+
+    /**
+     * @param \Magento\Backend\App\Action\Context                                        $context
+     * @param \Magento\Framework\Registry                                                $coreRegistry
+     * @param \Magento\Framework\App\Response\Http\FileFactory                           $fileFactory
+     * @param \Magento\Framework\View\Result\PageFactory                                 $resultPageFactory
+     * @param \Magento\Framework\View\Result\LayoutFactory                               $resultLayoutFactory
+     * @param \Magento\Backend\Model\View\Result\ForwardFactory                          $resultForwardFactory
+     * @param \Magento\Backend\Helper\Js                                                 $jsHelper
+     * @param \WeltPixel\OwlCarouselSlider\Model\BannerFactory                           $bannerFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\SliderFactory                           $sliderFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory  $bannerCollectionFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory  $sliderCollectionFactory
+     */
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Framework\Registry $coreRegistry,
+        \Magento\Framework\App\Response\Http\FileFactory $fileFactory,
+        \Magento\Framework\View\Result\PageFactory $resultPageFactory,
+        \Magento\Framework\View\Result\LayoutFactory $resultLayoutFactory,
+        \Magento\Backend\Model\View\Result\ForwardFactory $resultForwardFactory,
+        \Magento\Backend\Helper\Js $jsHelper,
+        \WeltPixel\OwlCarouselSlider\Model\BannerFactory $bannerFactory,
+        \WeltPixel\OwlCarouselSlider\Model\SliderFactory $sliderFactory,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory $bannerCollectionFactory,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory $sliderCollectionFactory
+    ) {
+        parent::__construct($context);
+
+        $this->_coreRegistry = $coreRegistry;
+        $this->_fileFactory = $fileFactory;
+        $this->_resultPageFactory = $resultPageFactory;
+        $this->_resultLayoutFactory = $resultLayoutFactory;
+        $this->_resultForwardFactory = $resultForwardFactory;
+        $this->_jsHelper = $jsHelper;
+        $this->_bannerFactory = $bannerFactory;
+        $this->_sliderFactory = $sliderFactory;
+        $this->_bannerCollectionFactory = $bannerCollectionFactory;
+        $this->_sliderCollectionFactory = $sliderCollectionFactory;
+    }
+
+    /**
+     * Get result redirect after add/edit action
+     *
+     * @param \Magento\Framework\Controller\Result\Redirect $resultRedirect
+     * @param null                                          $paramCrudId
+     * @return \Magento\Framework\Controller\Result\Redirect
+     */
+    protected function _getResultRedirect(\Magento\Framework\Controller\Result\Redirect $resultRedirect, $paramId = null)
+    {
+        $back = $this->getRequest()->getParam('back');
+
+        switch ($back) {
+            case 'new':
+                $resultRedirect->setPath('*/*/new', ['_current' => true]);
+                break;
+            case 'edit':
+                $resultRedirect->setPath('*/*/edit', ['id' => $paramId, '_current' => true]);
+                break;
+            default:
+                $resultRedirect->setPath('*/*/');
+        }
+
+        return $resultRedirect;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner.php
new file mode 100644
index 0000000000000000000000000000000000000000..fffeb23101fabc386a62fc1cfb3dd6ee39ddbba2
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml;
+
+/**
+ * Banner Abstract Action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+abstract class Banner extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\AbstractAction
+{
+    const PARAM_ID = 'id';
+
+    /**
+     * Check if admin has permissions to visit banner pages.
+     *
+     * @return bool
+     */
+    protected function _isAllowed()
+    {
+        return $this->_authorization->isAllowed('WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_banners');
+    }
+
+    /**
+     * Get result redirect after add/edit action
+     *
+     * @param \Magento\Framework\Controller\Result\Redirect $resultRedirect
+     * @param null                                          $paramCrudId
+     * @return \Magento\Framework\Controller\Result\Redirect
+     */
+    protected function _getResultRedirect(\Magento\Framework\Controller\Result\Redirect $resultRedirect, $paramId = null)
+    {
+        switch ($this->getRequest()->getParam('back')) {
+            case 'new':
+                $resultRedirect->setPath('*/*/new', ['_current' => true]);
+                break;
+            case 'edit':
+                $resultRedirect->setPath(
+                    '*/*/edit',
+                    [
+                        static::PARAM_ID   => $paramId,
+                        '_current'         => true,
+                        'loaded_slider_id' => $this->getRequest()->getParam('loaded_slider_id'),
+                        'saveandclose'     => $this->getRequest()->getParam('saveandclose'),
+                    ]
+                );
+                break;
+            default:
+                $resultRedirect->setPath('*/*/');
+        }
+
+        return $resultRedirect;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Delete.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Delete.php
new file mode 100644
index 0000000000000000000000000000000000000000..5667a5039642d6fd99d023e2ecfd65b996f35fe7
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Delete.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+/**
+ * Delete Banner action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Delete extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        $bannerId = $this->getRequest()->getParam(static::PARAM_ID);
+
+        try {
+            $banner = $this->_bannerFactory->create()->setId($bannerId);
+            $banner->delete();
+            $this->messageManager->addSuccess(__('Delete successfully!'));
+        } catch (\Exception $e) {
+            $this->messageManager->addError($e->getMessage());
+        }
+        $resultRedirect = $this->resultRedirectFactory->create();
+
+        return $resultRedirect->setPath('*/*/');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Edit.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Edit.php
new file mode 100644
index 0000000000000000000000000000000000000000..5a316f07696ac2f7652beb5d1d9aa20881bedcdf
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Edit.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+/**
+ * Edit Banner action.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Edit extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $bannerId = $this->getRequest()->getParam('id');
+
+        $bannerModel = $this->_bannerFactory->create();
+
+        if ($bannerId) {
+            $bannerModel->load($bannerId);
+
+            if (!$bannerModel->getId()) {
+                /** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
+                $resultRedirect = $this->resultRedirectFactory->create();
+
+                return $resultRedirect->setPath('*/*/');
+            }
+        }
+
+        $formData = $this->_getSession()->getFormData(true);
+        if (!empty($formData)) {
+            $bannerModel->setData($formData);
+        }
+      
+        $this->_coreRegistry->register('banner', $bannerModel);
+
+        $this->_eventManager->dispatch(
+            'owlcarouselslider_edit_banner',
+            ['controller' => $this]
+        );
+
+        /** @var \Magento\Framework\View\Result\PageFactory $resultPage */
+        $resultPage = $this->_resultPageFactory->create();
+
+        return $resultPage;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportCsv.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportCsv.php
new file mode 100644
index 0000000000000000000000000000000000000000..8e75aa7c26dfc1e7a0d347ce607edf17faa8ca90
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportCsv.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+/**
+ * ExportCsv action.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class ExportCsv extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $fileName = 'owlcarousel_banners.csv';
+
+        /** @var \\Magento\Framework\View\Result\Page $resultPage */
+        $resultPage = $this->_resultPageFactory->create();
+        $content = $resultPage->getLayout()
+            ->createBlock('WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Grid')->getCsv();
+
+        return $this->_fileFactory->create($fileName, $content, DirectoryList::VAR_DIR);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportExcel.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportExcel.php
new file mode 100644
index 0000000000000000000000000000000000000000..de0f1021292ae3c84de5098885aa897a8d9a5f3a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportExcel.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+/**
+ * ExportExcel action.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class ExportExcel extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $fileName = 'owlcarousel_banners.xls';
+
+        /** @var \\Magento\Framework\View\Result\Page $resultPage */
+        $resultPage = $this->_resultPageFactory->create();
+        $content = $resultPage->getLayout()
+            ->createBlock('WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Grid')->getExcel();
+
+        return $this->_fileFactory->create($fileName, $content, DirectoryList::VAR_DIR);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportXml.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportXml.php
new file mode 100644
index 0000000000000000000000000000000000000000..02fab0c1639b33f658f066818e627856bda9dbfa
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/ExportXml.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+/**
+ * ExportXml action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class ExportXml extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $fileName = 'owlcarousel_banners.xml';
+
+        /** @var \\Magento\Framework\View\Result\Page $resultPage */
+        $resultPage = $this->_resultPageFactory->create();
+        $content = $resultPage->getLayout()
+            ->createBlock('WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Grid')->getXml();
+
+        return $this->_fileFactory->create($fileName, $content, DirectoryList::VAR_DIR);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Grid.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Grid.php
new file mode 100644
index 0000000000000000000000000000000000000000..72307c9c8f7f94dbb002980fb39b9ae543341389
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Grid.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+/**
+ * Banner grid action.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Grid extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        return $this->_resultLayoutFactory->create();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Index.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Index.php
new file mode 100644
index 0000000000000000000000000000000000000000..432c167528c70879f4163e98fe65e4f86ef2be0a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Index.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+/**
+ * Banner Index action.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Index extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        if ($this->getRequest()->getQuery('ajax')) {
+            $resultForward = $this->_resultForwardFactory->create();
+            $resultForward->forward('grid');
+
+            return $resultForward;
+        }
+
+        $resultPage = $this->_resultPageFactory->create();
+
+        return $resultPage;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/MassDelete.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/MassDelete.php
new file mode 100644
index 0000000000000000000000000000000000000000..4de58032c2b83e42556c92806325c2b02d41dfdf
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/MassDelete.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+/**
+ * MassDelete action.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class MassDelete extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     * 
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        $bannerIds = $this->getRequest()->getParam('banner');
+        if (!is_array($bannerIds) || empty($bannerIds)) {
+            $this->messageManager->addError(__('Please select banner(s).'));
+        } else {
+            $bannerCollection = $this->_bannerCollectionFactory->create()
+                ->addFieldToFilter('id', ['in' => $bannerIds]);
+            try {
+                foreach ($bannerCollection as $banner) {
+                    $banner->delete();
+                }
+                $this->messageManager->addSuccess(
+                    __('A total of %1 banner(s) have been deleted.', count($bannerIds))
+                );
+            } catch (\Exception $e) {
+                $this->messageManager->addError($e->getMessage());
+            }
+        }
+        $resultRedirect = $this->resultRedirectFactory->create();
+
+        return $resultRedirect->setPath('*/*/');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/MassStatus.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/MassStatus.php
new file mode 100644
index 0000000000000000000000000000000000000000..3dfe8d70396db6734cb341491b0073954c77c5cc
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/MassStatus.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+/**
+ * MassStatus action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class MassStatus extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        $bannerIds = $this->getRequest()->getParam('banner');
+        $status = $this->getRequest()->getParam('status');
+
+        if (!is_array($bannerIds) || empty($bannerIds)) {
+            $this->messageManager->addError(__('Please select banner(s).'));
+        } else {
+            $bannerCollection = $this->_bannerCollectionFactory->create()
+                ->addFieldToFilter('id', ['in' => $bannerIds]);
+            try {
+                foreach ($bannerCollection as $banner) {
+                    $banner->setStatus($status)
+                        ->setIsMassupdate(true)
+                        ->save();
+                }
+                $this->messageManager->addSuccess(
+                    __('A total of %1 banner(s) status have been changed.', count($bannerIds))
+                );
+            } catch (\Exception $e) {
+                $this->messageManager->addError($e->getMessage());
+            }
+        }
+        $resultRedirect = $this->resultRedirectFactory->create();
+
+        return $resultRedirect->setPath('*/*/', ['store' => $this->getRequest()->getParam('store')]);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/NewAction.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/NewAction.php
new file mode 100644
index 0000000000000000000000000000000000000000..0da8b354f34b24c2e6095b7817545f2bec179bc0
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/NewAction.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+/**
+ * NewAction
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class NewAction extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $resultForward = $this->_resultForwardFactory->create();
+
+        return $resultForward->forward('edit');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Save.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Save.php
new file mode 100644
index 0000000000000000000000000000000000000000..520c43685911e8af785a01bf557800f9a2b76c2d
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Banner/Save.php
@@ -0,0 +1,120 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+/**
+ * Save Banner action.
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Save extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Banner
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        /** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
+        $resultRedirect = $this->resultRedirectFactory->create();
+
+        $data = $this->getRequest()->getPostValue();
+
+        if ($data) {
+            $bannerModel = $this->_bannerFactory->create();
+
+            $bannerId = $this->getRequest()->getParam(static::PARAM_ID);
+
+            if ($bannerId) {
+                $bannerModel->load($bannerId);
+            }
+
+            $bannerImage = $this->getRequest()->getFiles('image');
+
+            $fileName = ($bannerImage && array_key_exists('name', $bannerImage)) ? $bannerImage['name'] : null;
+
+            if ($bannerImage && $fileName) {
+                try {
+                    /** @var \Magento\Framework\ObjectManagerInterface $uploader */
+                    $uploader = $this->_objectManager->create(
+                        'Magento\MediaStorage\Model\File\Uploader',
+                        ['fileId' => 'image']
+                    );
+
+                    $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
+
+                    /** @var \Magento\Framework\Image\Adapter\AdapterInterface $imageAdapterFactory */
+                    $imageAdapterFactory = $this->_objectManager->get('Magento\Framework\Image\AdapterFactory')
+                        ->create();
+
+                    $uploader->addValidateCallback('banner_image', $imageAdapterFactory, 'validateUploadFile');
+                    $uploader->setAllowRenameFiles(true);
+                    $uploader->setFilesDispersion(true);
+
+                    /** @var \Magento\Framework\Filesystem\Directory\Read $mediaDirectory */
+                    $mediaDirectory = $this->_objectManager->get('Magento\Framework\Filesystem')
+                        ->getDirectoryRead(DirectoryList::MEDIA);
+
+                    $result = $uploader->save(
+                        $mediaDirectory
+                            ->getAbsolutePath(\WeltPixel\OwlCarouselSlider\Model\Banner::OWLCAROUSELSLIDER_MEDIA_PATH)
+                    );
+
+                    $data['image'] = \WeltPixel\OwlCarouselSlider\Model\Banner::OWLCAROUSELSLIDER_MEDIA_PATH
+                        . $result['file'];
+
+                } catch (\Exception $e) {
+                    if ($e->getCode() == 0) {
+                        $this->messageManager->addError($e->getMessage());
+                    }
+                }
+            } else {
+                if (isset($data['image']) && isset($data['image']['value'])) {
+                    if (isset($data['image']['delete'])) {
+                        $data['image'] = null;
+                        $data['delete_image'] = true;
+                    } elseif (isset($data['image']['value'])) {
+                        $data['image'] = $data['image']['value'];
+                    }
+                }
+            }
+
+            /** @var \Magento\Framework\Stdlib\DateTime\TimezoneInterface $localeDate */
+            $localeDate = $this->_objectManager->get('Magento\Framework\Stdlib\DateTime\TimezoneInterface');
+
+            $data['valid_from'] = $localeDate->date($data['valid_from'])
+                ->setTimezone(new \DateTimeZone('UTC'))->format('Y-m-d H:i');
+            $data['valid_to'] = $localeDate->date($data['valid_to'])
+                ->setTimezone(new \DateTimeZone('UTC'))->format('Y-m-d H:i');
+
+            $bannerModel->setData($data);
+
+            try {
+                $bannerModel->save();
+
+                $this->messageManager->addSuccess(__('The banner has been saved.'));
+                $this->_getSession()->setFormData(false);
+
+                return $this->_getResultRedirect($resultRedirect, $bannerModel->getId());
+
+            } catch (\Exception $e) {
+                $this->messageManager->addException($e, __('Something went wrong while saving the banner.'));
+                $this->messageManager->addError($e->getMessage());
+            }
+
+            $this->_getSession()->setFormData($data);
+
+            return $resultRedirect->setPath(
+                '*/*/edit',
+                [static::PARAM_ID => $bannerId]
+            );
+        }
+
+        return $resultRedirect->setPath('*/*/');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider.php
new file mode 100644
index 0000000000000000000000000000000000000000..6597573da4e5a09f498bed0bb84a3d4ff8a861b7
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml;
+
+/**
+ * Slider Abstract Action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+abstract class Slider extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\AbstractAction
+{
+    const PARAM_ID = 'id';
+
+    /**
+     * Check if admin has permissions to visit slider pages.
+     *
+     * @return bool
+     */
+    protected function _isAllowed()
+    {
+        return $this->_authorization->isAllowed('WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_sliders');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Banners.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Banners.php
new file mode 100644
index 0000000000000000000000000000000000000000..46d45e45595c30db7b1d60ba2f3d2dfef0147b19
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Banners.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Banners of slider action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Banners extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $resultLayout = $this->_resultLayoutFactory->create();
+        
+        $resultLayout
+            ->getLayout()->getBlock('owlcarouselslider.slider.edit.tab.banners')
+            ->setInBanner($this->getRequest()->getPost('banner', null));
+
+        return $resultLayout;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/BannersGrid.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/BannersGrid.php
new file mode 100644
index 0000000000000000000000000000000000000000..53e2a87f72b3c19bb52b1bdb111e039f0bfc3281
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/BannersGrid.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Banners Grid action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class BannersGrid extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $resultLayout = $this->_resultLayoutFactory->create();
+        
+        $resultLayout
+            ->getLayout()->getBlock('owlcarouselslider.slider.edit.tab.banners')
+            ->setInBanner($this->getRequest()->getPost('banner', null));
+
+        return $resultLayout;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Delete.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Delete.php
new file mode 100644
index 0000000000000000000000000000000000000000..8a95c36e8803799d8243ea4a206b0557cac2252b
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Delete.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Delete Slider action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Delete extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $sliderId = $this->getRequest()->getParam(static::PARAM_ID);
+        try {
+            $slider = $this->_sliderFactory->create()->setId($sliderId);
+            $slider->delete();
+            $this->messageManager->addSuccess(
+                __('Delete successfully !')
+            );
+        } catch (\Exception $e) {
+            $this->messageManager->addError($e->getMessage());
+        }
+        $resultRedirect = $this->resultRedirectFactory->create();
+
+        return $resultRedirect->setPath('*/*/');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Edit.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Edit.php
new file mode 100644
index 0000000000000000000000000000000000000000..3577050df05a63dda4b5f250bc45cf828fa07e12
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Edit.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Edit Slider action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Edit extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        $resultPage = $this->_resultPageFactory->create();
+
+        $id = $this->getRequest()->getParam('id');
+        $model = $this->_sliderFactory->create();
+
+        if ($id) {
+            $model->load($id);
+            if (!$model->getId()) {
+                $this->messageManager->addError(__('This slider no longer exists.'));
+                $resultRedirect = $this->resultRedirectFactory->create();
+
+                return $resultRedirect->setPath('*/*/');
+            }
+        }
+
+        $data = $this->_getSession()->getFormData(true);
+
+        if (!empty($data)) {
+            $model->setData($data);
+        }
+        $this->_coreRegistry->register('slider', $model);
+
+        return $resultPage;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportCsv.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportCsv.php
new file mode 100644
index 0000000000000000000000000000000000000000..55536e8b7abb460df3655778cf83357698f32124
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportCsv.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+/**
+ * Export Csv action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class ExportCsv extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $fileName = 'owlcarousel_sliders.csv';
+
+        /** @var \\Magento\Framework\View\Result\Page $resultPage */
+        $resultPage = $this->_resultPageFactory->create();
+        $content = $resultPage->getLayout()
+            ->createBlock('WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Grid')->getCsv();
+
+        return $this->_fileFactory->create($fileName, $content, DirectoryList::VAR_DIR);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportExcel.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportExcel.php
new file mode 100644
index 0000000000000000000000000000000000000000..e5ba1a74b7644ee0b99675acb1fb215d268bc289
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportExcel.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+/**
+ * Export Excel action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class ExportExcel extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $fileName = 'owlcarousel_sliders.xls';
+
+        /** @var \\Magento\Framework\View\Result\Page $resultPage */
+        $resultPage = $this->_resultPageFactory->create();
+        $content = $resultPage->getLayout()
+            ->createBlock('WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Grid')->getExcel();
+
+        return $this->_fileFactory->create($fileName, $content, DirectoryList::VAR_DIR);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportXml.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportXml.php
new file mode 100644
index 0000000000000000000000000000000000000000..99969b3f466c730bdef061a548c09fd444d2d23b
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/ExportXml.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+/**
+ * ExportXml action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class ExportXml extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $fileName = 'owlcarousel_sliders.xml';
+
+        /** @var \\Magento\Framework\View\Result\Page $resultPage */
+        $resultPage = $this->_resultPageFactory->create();
+        $content = $resultPage->getLayout()
+            ->createBlock('WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Grid')->getXml();
+
+        return $this->_fileFactory->create($fileName, $content, DirectoryList::VAR_DIR);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Grid.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Grid.php
new file mode 100644
index 0000000000000000000000000000000000000000..c3c2e30e3849bf10a6d858e8645dfe78b04774aa
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Grid.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Slider Grid action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Grid extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        return $this->_resultLayoutFactory->create();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Index.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Index.php
new file mode 100644
index 0000000000000000000000000000000000000000..0d27d0b3899125fe3986bd7d5d10d24ee543d45a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Index.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Slider Index action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Index extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        if ($this->getRequest()->getQuery('ajax')) {
+            $resultForward = $this->_resultForwardFactory->create();
+            $resultForward->forward('grid');
+
+            return $resultForward;
+        }
+
+        $resultPage = $this->_resultPageFactory->create();
+
+        return $resultPage;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/MassDelete.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/MassDelete.php
new file mode 100644
index 0000000000000000000000000000000000000000..ed1bb5bdf7e9a8c15b4ce8467fe091286d03183f
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/MassDelete.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Mass Delete Slider action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class MassDelete extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        $sliderIds = $this->getRequest()->getParam('slider');
+        
+        if (!is_array($sliderIds) || empty($sliderIds)) {
+            $this->messageManager->addError(__('Please select slider(s).'));
+        } else {
+            $sliderCollection = $this->_sliderCollectionFactory->create()
+                ->addFieldToFilter('id', ['in' => $sliderIds]);
+            try {
+                foreach ($sliderCollection as $slider) {
+                    $slider->delete();
+                }
+                $this->messageManager->addSuccess(
+                    __('A total of %1 slider(s) have been deleted.', count($sliderIds))
+                );
+            } catch (\Exception $e) {
+                $this->messageManager->addError($e->getMessage());
+            }
+        }
+        $resultRedirect = $this->resultRedirectFactory->create();
+
+        return $resultRedirect->setPath('*/*/');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/MassStatus.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/MassStatus.php
new file mode 100644
index 0000000000000000000000000000000000000000..97e2351f7efb5ac6ae0b90b5239f1a32f4bf1bf9
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/MassStatus.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * Mass Status action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class MassStatus extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        $sliderIds = $this->getRequest()->getParam('slider');
+        $status = $this->getRequest()->getParam('status');
+        
+        if (!is_array($sliderIds) || empty($sliderIds)) {
+            $this->messageManager->addError(__('Please select slider(s).'));
+        } else {
+            try {
+                $sliderCollection = $this->_sliderCollectionFactory->create()
+                    ->addFieldToFilter('id', ['in' => $sliderIds]);
+
+                foreach ($sliderCollection as $slider) {
+                    $slider->setStatus($status)
+                        ->setIsMassupdate(true)
+                        ->save();
+                }
+                $this->messageManager->addSuccess(
+                    __('A total of %1 slider(s) status have been changed.', count($sliderIds))
+                );
+            } catch (\Exception $e) {
+                $this->messageManager->addError($e->getMessage());
+            }
+        }
+        $resultRedirect = $this->resultRedirectFactory->create();
+
+        return $resultRedirect->setPath('*/*/');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/NewAction.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/NewAction.php
new file mode 100644
index 0000000000000000000000000000000000000000..9bf20c88f4006c1b58102923db57e47b30b39a28
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/NewAction.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+/**
+ * New Slider Action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class NewAction extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     */
+    public function execute()
+    {
+        $resultForward = $this->_resultForwardFactory->create();
+
+        return $resultForward->forward('edit');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Save.php b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Save.php
new file mode 100644
index 0000000000000000000000000000000000000000..dbd59fe7719b2e4cf501ea5756b0d73e41b8eae9
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Controller/Adminhtml/Slider/Save.php
@@ -0,0 +1,86 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider;
+
+use WeltPixel\OwlCarouselSlider\Model\Slider;
+
+/**
+ * Save Slider action
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Save extends \WeltPixel\OwlCarouselSlider\Controller\Adminhtml\Slider
+{
+    /**
+     * Dispatch request
+     *
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    public function execute()
+    {
+        $resultRedirect = $this->resultRedirectFactory->create();
+        $formPostValues = $this->getRequest()->getPostValue();
+
+        if (isset($formPostValues['slider'])) {
+            $sliderData = $formPostValues['slider'];
+            $sliderId = isset($sliderData['id']) ? $sliderData['id'] : null;
+
+            $sliderModel = $this->_sliderFactory->create();
+
+            $sliderModel->load($sliderId);
+
+            $sliderModel->setData($sliderData);
+
+            try {
+                $sliderModel->save();
+
+                if (isset($formPostValues['slider_banner'])) {
+                    $bannerGridSerializedInputData = $this->_jsHelper->decodeGridSerializedInput($formPostValues['slider_banner']);
+                    $bannerIds = [];
+                    foreach ($bannerGridSerializedInputData as $key => $value) {
+                        $bannerIds[] = $key;
+                        $bannerOrders[] = $value['sort_order'];
+                    }
+
+                    $unSelecteds = $this->_bannerCollectionFactory
+                        ->create()
+                        ->addFieldToFilter('slider_id', $sliderModel->getId());
+
+                    if (count($bannerIds)) {
+                        $unSelecteds->addFieldToFilter('id', ['nin' => $bannerIds]);
+                    }
+
+                    foreach ($unSelecteds as $banner) {
+                        $banner->setSliderId(0)
+                            ->setSortOrder(0)->save();
+                    }
+
+                    $selectBanner = $this->_bannerCollectionFactory
+                        ->create()
+                        ->addFieldToFilter('id', ['in' => $bannerIds]);
+                    $i = -1;
+                    foreach ($selectBanner as $banner) {
+                        $banner->setSliderId($sliderModel->getId())
+                            ->setSortOrder($bannerOrders[++$i])->save();
+                    }
+                }
+
+                $this->messageManager->addSuccess(__('The slider has been saved.'));
+                $this->_getSession()->setFormData(false);
+
+                return $this->_getResultRedirect($resultRedirect, $sliderModel->getId());
+            } catch (\Exception $e) {
+                $this->messageManager->addError($e->getMessage());
+                $this->messageManager->addException($e, __('Something went wrong while saving the slider.'));
+            }
+
+            $this->_getSession()->setFormData($formPostValues);
+
+            return $resultRedirect->setPath('*/*/edit', [static::PARAM_CRUD_ID => $sliderId]);
+        }
+
+        return $resultRedirect->setPath('*/*/');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Helper/Custom.php b/app/code/WeltPixel/OwlCarouselSlider/Helper/Custom.php
new file mode 100644
index 0000000000000000000000000000000000000000..4d3af3c86c8454c502cb81c587ef2ad5117debe0
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Helper/Custom.php
@@ -0,0 +1,236 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Helper;
+
+/**
+ * Helper Custom Slider
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Custom extends \Magento\Framework\App\Helper\AbstractHelper
+{
+    /**
+     * Slider factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\Slider
+     */
+    protected $_sliderModel;
+
+    protected $_configFieldsSlider;
+
+    protected $_configFieldsBanner;
+
+    protected $_sliderId;
+
+    protected $_date;
+
+    protected $_scopeConfig;
+
+    /**
+     * @param \Magento\Framework\App\Helper\Context              $context
+     * @param \WeltPixel\OwlCarouselSlider\Model\Slider          $sliderModel
+     */
+    public function __construct(
+        \Magento\Framework\App\Helper\Context $context,
+        \WeltPixel\OwlCarouselSlider\Model\Slider $sliderModel,
+        \Magento\Framework\Stdlib\DateTime\DateTime $date
+    ) {
+        parent::__construct($context);
+
+        $this->_sliderModel = $sliderModel;
+        $this->_date        = $date;
+        $this->_scopeConfig = $context->getScopeConfig();
+    }
+
+    /**
+     * Retrieve the slider config options.
+     *
+     * @param $sliderId
+     * @return \Magento\Framework\DataObject
+     */
+    public function getSliderConfigOptions($sliderId)
+    {
+        if($this->_sliderId != $sliderId && is_null($this->_configFieldsSlider)) {
+
+            $this->_sliderId = $sliderId;
+
+            $this->_configFieldsSlider = [
+                'title',
+                'show_title',
+                'status',
+                'nav',
+                'dots',
+                'center',
+                'items',
+                'loop',
+                'margin',
+                'merge',
+                'URLhashListener',
+                'stagePadding',
+                'lazyLoad',
+                'transition',
+                'autoplay',
+                'autoplayTimeout',
+                'autoplayHoverPause',
+                'autoHeight',
+                'nav_brk1',
+                'items_brk1',
+                'nav_brk2',
+                'items_brk2',
+                'nav_brk3',
+                'items_brk3',
+                'nav_brk4',
+                'items_brk4',
+            ];
+        }
+        if(is_null($this->_configFieldsBanner)) {
+            $this->_configFieldsBanner = [
+                'id',
+                'title',
+                'show_title',
+                'description',
+                'show_description',
+                'status',
+                'url',
+                'banner_type',
+                'image',
+                'video',
+                'custom',
+                'alt_text',
+                'target',
+                'button_text',
+                'custom_content',
+                'custom_css',
+                'valid_from',
+                'valid_to',
+                'ga_promo_id',
+                'ga_promo_name',
+                'ga_promo_creative',
+                'ga_promo_position'
+            ];
+        }
+
+        /* @var \WeltPixel\OwlCarouselSlider\Model\Slider $slider */
+        $slider = $this->_sliderModel->load($sliderId);
+
+        if (!count($this->_configFieldsSlider)) {
+            return new \Magento\Framework\DataObject();
+        }
+
+        $sliderConfig = [];
+        foreach ($this->_configFieldsSlider as $field) {
+            $sliderConfig[$field] = $slider->getData($field);
+        }
+
+        $sliderBannersCollection = $slider->getSliderBanerCollection();
+        $sliderBannersCollection->setOrder('sort_order', 'ASC');
+
+        $bannerConfig = [];
+        foreach ($sliderBannersCollection as $banner) {
+
+            if (!$this->validateBannerDisplayDate($banner) || !$banner->getStatus()) {
+                continue;
+            }
+
+            $bannerDetails = [];
+            foreach ($this->_configFieldsBanner as $field) {
+                $bannerDetails[$field] = $banner->getData($field);
+            }
+            $bannerConfig[$banner->getId()] = $bannerDetails;
+        }
+
+        $configData = new \Magento\Framework\DataObject();
+
+        $configData->setSliderConfig($sliderConfig);
+        $configData->setBannerConfig($bannerConfig);
+
+        return $configData;
+    }
+
+    /**
+     * Retrieve the breakpoint configuration.
+     * 
+     * @return array
+     */
+    public function getBreakpointConfiguration()
+    {
+        $configPaths = [
+            'breakpoint_1',
+            'breakpoint_2',
+            'breakpoint_3',
+            'breakpoint_4',
+        ];
+
+        $breakpointConfiguration = [];
+
+        foreach ($configPaths as $configPath) {
+            $value = $this->_getConfigValue($configPath);
+            $breakpointConfiguration[$configPath] = $value ? $value : 0;
+        }
+
+        return $breakpointConfiguration;
+    }
+
+    /**
+     * Retrieve the breakpoint configuration.
+     *
+     * @return array
+     */
+    public function getDisplaySocial()
+    {
+        $configPaths = [
+            'display_wishlist',
+            'display_compare'
+        ];
+
+        $displaySocial = [];
+
+        foreach ($configPaths as $configPath) {
+            $value = $this->_getConfigValue($configPath);
+	        $displaySocial[$configPath] = $value ? $value : 0;
+        }
+
+        return $displaySocial;
+    }
+
+    /**
+     * Retrieve the config value.
+     *
+     * @param string $configPath
+     * @return mixed
+     */
+    private function _getConfigValue($configPath)
+    {
+        $sysPath = 'weltpixel_owl_carousel_config/general/' . $configPath;
+
+        return $this->_scopeConfig->getValue($sysPath, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
+    }
+
+    /**
+     * Validate the banner display date.
+     *
+     * @param \WeltPixel\OwlCarouselSlider\Model\Banner $banner
+     * @return bool
+     */
+    public function validateBannerDisplayDate($banner)
+    {
+        $validFrom = $banner->getValidFrom();
+        $validTo   = $banner->getValidTo();
+
+        $now = $this->_date->gmtDate();
+
+        if ($validFrom <= $now && $validTo >= $now) {
+            return true;
+        }
+
+        return false;
+    }
+
+    public function isGatEnabled()
+    {
+        $sysPath = 'weltpixel_owl_slider_config/general/enable_google_tracking';
+        return $this->_scopeConfig->getValue($sysPath, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Helper/Data.php b/app/code/WeltPixel/OwlCarouselSlider/Helper/Data.php
new file mode 100644
index 0000000000000000000000000000000000000000..40da90c75e613846b2391587ffbbdbdda2eb4b27
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Helper/Data.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Helper;
+
+/**
+ * Helper Data
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Data extends \Magento\Framework\App\Helper\AbstractHelper
+{
+    /**
+     * @var \Magento\Backend\Model\UrlInterface
+     */
+    protected $_backendUrl;
+
+    /**
+     * [__construct description].
+     *
+     * @param \Magento\Framework\App\Helper\Context          $context
+     * @param \Magento\Store\Model\StoreManagerInterface     $storeManager
+     */
+    public function __construct(
+        \Magento\Framework\App\Helper\Context $context,
+        \Magento\Backend\Model\UrlInterface $backendUrl
+    ) {
+        parent::__construct($context);
+
+        $this->_backendUrl = $backendUrl;
+    }
+
+    /**
+     * get Slider Banner Url
+     * @return string
+     */
+    public function getSliderBannerUrl()
+    {
+        return $this->_backendUrl->getUrl('*/*/banners', ['_current' => true]);
+    }
+
+    /**
+     * Retrieve the related products.
+     *
+     * @param $product
+     * @return mixed
+     */
+    public function getRelatedProducts($product)
+    {
+        return $product->getRelatedProducts();
+    }
+
+    /**
+     * Retrieve the up-sell products.
+     *
+     * @param $product
+     * @return mixed
+     */
+    public function getUpsellProducts($product)
+    {
+        return $product->getUpSellProducts();
+    }
+
+    /**
+     * Retrieve the cross-sell products.
+     *
+     * @param $product
+     * @return mixed
+     */
+    public function getCrosssellProducts($product)
+    {
+        return $product->getCrossSellProducts();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Helper/Products.php b/app/code/WeltPixel/OwlCarouselSlider/Helper/Products.php
new file mode 100644
index 0000000000000000000000000000000000000000..c3e7db859977a15e9c64de754299d032e0f6c71a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Helper/Products.php
@@ -0,0 +1,160 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Helper;
+
+/**
+ * Helper Products Slider
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Products extends \Magento\Framework\App\Helper\AbstractHelper
+{
+    protected $_scopeConfig;
+
+    const SYS_PATH = 'weltpixel_owl_carousel_config/';
+
+    /**
+     * @param \Magento\Framework\App\Helper\Context  $context
+     */
+    public function __construct(
+        \Magento\Framework\App\Helper\Context $context
+    ) {
+        parent::__construct($context);
+
+        $this->_scopeConfig = $context->getScopeConfig();
+    }
+
+    /**
+     * Retrieve the slider config options.
+     *
+     * @param $type
+     * @return array
+     */
+    public function getSliderConfigOptions($type)
+    {
+        $configFields = [
+            'status',
+            'title',
+            'show_price',
+            'show_addto',
+            'show_wishlist',
+            'show_compare',
+            'nav',
+            'dots',
+            'center',
+            'items',
+            'loop',
+            'margin',
+            'merge',
+            'URLhashListener',
+            'stagePadding',
+            'lazyLoad',
+            'autoplay',
+            'autoplayTimeout',
+            'autoplayHoverPause',
+
+            'nav_brk1',
+            'dots_brk1',
+            'items_brk1',
+            'center_brk1',
+            'stagePadding_brk1',
+            
+            'nav_brk2',
+            'dots_brk2',
+            'items_brk2',
+            'center_brk2',
+            'stagePadding_brk2',
+
+            'nav_brk3',
+            'dots_brk3',
+            'items_brk3',
+            'center_brk3',
+            'stagePadding_brk3',
+            
+            'nav_brk4',
+            'dots_brk4',
+            'items_brk4',
+            'center_brk4',
+            'stagePadding_brk4',
+        ];
+
+        $sliderConfig = [];
+        $sysPath = self::SYS_PATH . $type;
+
+        foreach ($configFields as $field) {
+            $configPath = $sysPath . '/' . $field;
+            $sliderConfig[$field] = $this->_getConfigValue($configPath);
+        }
+
+        return $sliderConfig;
+    }
+
+    /**
+     * Retrieve the config value.
+     *
+     * @param string $configPath
+     * @return mixed
+     */
+    private function _getConfigValue($configPath)
+    {
+        return $this->_scopeConfig->getValue(
+            $configPath,
+            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
+        );
+    }
+
+    /**
+     * Retrieve the product limit config value.
+     *
+     * @param string $type
+     * @return int
+     */
+    public function getProductLimit($type)
+    {
+        $configPath = self::SYS_PATH . $type . '/max_items';
+        
+        return (int)$this->_getConfigValue($configPath);
+    }
+
+    /**
+     * Retrieve the random sort config value.
+     *
+     * @param string $type
+     * @return int
+     */
+    public function getRandomSort($type)
+    {
+        $configPath = self::SYS_PATH . $type . '/random_sort';
+
+        return $this->_getConfigValue($configPath);
+    }
+
+    /**
+     * Retrieve the slider configuration.
+     *
+     * @param string $type
+     * @return array
+     */
+    public function getSliderConfiguration($type)
+    {
+        switch($type){
+            case 'related':
+            case 'related-rule':
+                $type = 'related_products';
+                break;
+            case 'upsell':
+            case 'upsell-rule':
+                $type = 'upsell_products';
+                break;
+            case 'crosssell':
+                $type = 'crosssell_products';
+                break;
+            default:
+                $type = 'related_products';
+        }
+
+        return $this->getSliderConfigOptions($type);
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Banner.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Banner.php
new file mode 100644
index 0000000000000000000000000000000000000000..b45703c61a8b1593bc8376d1337a175ae8d570c1
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Banner.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Model;
+
+/**
+ * Banner Model
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Banner extends \Magento\Framework\Model\AbstractModel
+{
+    const OWLCAROUSELSLIDER_MEDIA_PATH = 'weltpixel/owlcarouselslider/images';
+
+    /**
+     * slider colleciton factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory
+     */
+    protected $_sliderCollectionFactory;
+
+    /**
+     * [$_formFieldHtmlIdPrefix description].
+     *
+     * @var string
+     */
+    protected $_formFieldHtmlIdPrefix = 'page_';
+
+    /**
+     * logger.
+     *
+     * @var \Magento\Framework\Logger\Monolog
+     */
+    protected $_monolog;
+
+    protected $_bannerFactory;
+
+    /**
+     * [__construct description].
+     *
+     * @param \Magento\Framework\Model\Context                                          $context
+     * @param \Magento\Framework\Registry                                               $registry
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner                   $resource
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\Collection        $resourceCollection
+     * @param \WeltPixel\OwlCarouselSlider\Model\BannerFactory                          $bannerFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory $sliderCollectionFactory
+     * @param \Magento\Store\Model\StoreManagerInterface                                $storeManager
+     */
+    public function __construct(
+        \Magento\Framework\Model\Context $context,
+        \Magento\Framework\Registry $registry,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner $resource,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\Collection $resourceCollection,
+        \WeltPixel\OwlCarouselSlider\Model\BannerFactory $bannerFactory,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory $sliderCollectionFactory,
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
+        \Magento\Framework\Logger\Monolog $monolog
+    ) {
+        parent::__construct($context, $registry, $resource, $resourceCollection);
+
+        $this->_bannerFactory = $bannerFactory;
+        $this->_sliderCollectionFactory = $sliderCollectionFactory;
+        $this->_monolog = $monolog;
+    }
+
+    /**
+     * Return the form field html id prefix.
+     *
+     * @return string
+     */
+    public function getFormFieldHtmlIdPrefix()
+    {
+        return $this->_formFieldHtmlIdPrefix;
+    }
+
+    /**
+     * Return the available sliders.
+     *
+     * @return []
+     */
+    public function getAvailableSliders()
+    {
+        $option[] = [
+            'value' => '',
+            'label' => __('--- Please select a slider ---'),
+        ];
+
+        $sliders = $this->_sliderCollectionFactory->create();
+
+        if(count($sliders)) {
+            foreach ($sliders as $slider) {
+                $option[] = [
+                    'value' => $slider->getId(),
+                    'label' => $slider->getTitle(),
+                ];
+            }
+        }
+
+        return $option;
+    }
+
+    /**
+     * Return the available banners type.
+     *
+     * @return []
+     */
+    public function getAvailableBannerType()
+    {
+        $options = [];
+        $options[] = [
+            'value' => 1,
+            'label' => __('Image'),
+        ];
+        $options[] = [
+            'value' => 2,
+            'label' => __('Video'),
+        ];
+        $options[] = [
+            'value' => 3,
+            'label' => __('Custom'),
+        ];
+
+
+        return $options;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Categories.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Categories.php
new file mode 100644
index 0000000000000000000000000000000000000000..2d4fb737ac3fbe107c7838c1da82b52065abfa13
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Categories.php
@@ -0,0 +1,97 @@
+<?php
+
+/**
+ * Used in creating options for category config value selection
+ *
+ */
+namespace WeltPixel\OwlCarouselSlider\Model\Config\Source;
+
+class Categories implements \Magento\Framework\Option\ArrayInterface
+{
+    protected $_categoryHelper;
+    protected $categoryFlatConfig;
+    /**
+     * @param \Magento\Framework\View\Element\Template\Context    $context
+     * @param \Magento\Catalog\Helper\Category                    $categoryHelper
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Framework\View\Element\Template\Context $context,
+        \Magento\Catalog\Helper\Category $categoryHelper,
+        \Magento\Catalog\Model\Indexer\Category\Flat\State $categoryFlatState
+    ) {
+        $this->_categoryHelper    = $categoryHelper;
+        $this->categoryFlatConfig = $categoryFlatState;
+    }
+
+    /**
+     * Retrieve current store categories
+     *
+     * @param bool|string $sorted
+     * @param bool $asCollection
+     * @param bool $toLoad
+     * @return \Magento\Framework\Data\Tree\Node\Collection|\Magento\Catalog\Model\Resource\Category\Collection|array
+     */
+    public function getStoreCategories($sorted = false, $asCollection = false, $toLoad = true)
+    {
+        return $categories = $this->_categoryHelper->getStoreCategories($sorted , $asCollection, $toLoad);
+    }
+
+    /**
+     * Retrieve child store categories
+     *
+     * @param $category
+     * @param null $arr
+     * @return null|array
+     */
+    public function getChildCategories($category, $arr=null)
+    {
+        if ($this->categoryFlatConfig->isFlatEnabled() && $category->getUseFlatResource()) {
+            $subcategories = (array)$category->getChildrenNodes();
+        } else {
+            $subcategories = $category->getChildren();
+        }
+
+        foreach ($subcategories as $subcategory) {
+            $arr[$subcategory->getEntityId()] = $subcategory;
+            $subcat = $this->getChildCategories($subcategory, $arr);
+
+            foreach ($subcat as $cat) {
+                $arr[$cat->getEntityId()] = $cat;
+            }
+        }
+
+        return $arr;
+    }
+
+    /**
+     * Options getter
+     *
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        $categories = $this->getStoreCategories();
+        $options = [];
+
+        foreach ($categories as $category) {
+            $childCategories = $this->getChildCategories($category);
+
+            $options[] = [
+                'label' => $category->getName(),
+                'value' => $category->getEntityId(),
+            ];
+            
+            if ($childCategories) {
+                foreach ($childCategories as $id=>$childX) {
+                    $options[] = [
+                        'label' => str_repeat("_", $childX->getLevel()-2) . $childX->getName(),
+                        'value' => $childX->getEntityId(),
+                    ];
+                }
+            }
+        }
+
+        return $options;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Sortby.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Sortby.php
new file mode 100644
index 0000000000000000000000000000000000000000..501a3b779f8bbd4f78b1437adcff84c9a3a28b9e
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Sortby.php
@@ -0,0 +1,48 @@
+<?php
+
+/**
+ * Used in creating options for category config value selection
+ *
+ */
+namespace WeltPixel\OwlCarouselSlider\Model\Config\Source;
+
+class Sortby implements \Magento\Framework\Option\ArrayInterface
+{
+    /**
+     * Options getter
+     *
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        return [
+            [
+                'label' => __('Default Magento'),
+                'value' => '1',
+            ],
+            [
+                'label' => __('Specific Category'),
+                'value' => '2',
+            ],
+            [
+                'label' => __('Default Magento & Specific Category'),
+                'value' => '3',
+            ],
+
+        ];
+    }
+
+    /**
+     * Get options in "key-value" format
+     *
+     * @return array
+     */
+    public function toArray()
+    {
+        return [
+            1 => __('Default Magento'),
+            2 => __('Specific Category'),
+            3 => __('Default Magento & Specific Category'),
+        ];
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Truefalse.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Truefalse.php
new file mode 100644
index 0000000000000000000000000000000000000000..13aee16691bddf3a46bd7e4efe107246dfce6ac7
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/Truefalse.php
@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Used in creating options for true/false config value selection
+ *
+ */
+namespace WeltPixel\OwlCarouselSlider\Model\Config\Source;
+
+class Truefalse implements \Magento\Framework\Option\ArrayInterface
+{
+    /**
+     * Options getter
+     *
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        return [
+            [
+                'label' => __('True'),
+                'value' => '1',
+            ],
+            [
+                'label' => __('False'),
+                'value' => '0',
+            ],
+        ];
+    }
+
+    /**
+     * Get options in "key-value" format
+     *
+     * @return array
+     */
+    public function toArray()
+    {
+        return [
+            1 => __('True'),
+            0 => __('False'),
+        ];
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/WidgetCustom.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/WidgetCustom.php
new file mode 100644
index 0000000000000000000000000000000000000000..b85beeeecb62e7ec2f141c2a7f3ed25c1821237f
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/WidgetCustom.php
@@ -0,0 +1,61 @@
+<?php
+namespace WeltPixel\OwlCarouselSlider\Model\Config\Source;
+
+class WidgetCustom extends \Magento\Framework\Model\AbstractModel implements \Magento\Framework\Option\ArrayInterface
+{
+
+    /**
+     * slider factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory
+     */
+    protected $_slideCollectionFactory;
+
+    /**
+     * [__construct description].
+     *
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory   $slideCollectionFactory
+     */
+    public function __construct(
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\CollectionFactory $slideCollectionFactory
+
+    ) {
+        $this->_slideCollectionFactory = $slideCollectionFactory;
+    }
+
+    /**
+     * Retrieve the slider collection.
+     *
+     * @return \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\Collection
+     */
+    public function getSliderCollection()
+    {
+        $collection = $this->_slideCollectionFactory->create();
+
+        return $collection;
+    }
+
+    /**
+     * Return array of options as value-label pairs
+     *
+     * @return array Format: array(array('value' => '<value>', 'label' => '<label>'), ...)
+     */
+    public function toOptionArray()
+    {
+        $sliderCollection = $this->getSliderCollection();
+
+        $values = [];
+
+        $values[] = [
+            'value' => 0, 'label' => __('Select Custom Slider...')
+        ];
+        
+        foreach ($sliderCollection as $slider) {
+            $values[] = [
+                'value' => $slider->getId(), 'label' => $slider->getTitle()
+            ];
+        }
+
+        return $values;
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/WidgetProducts.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/WidgetProducts.php
new file mode 100644
index 0000000000000000000000000000000000000000..00b5234c93ea9e65a1b4b1aef39d54848188af28
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Config/Source/WidgetProducts.php
@@ -0,0 +1,24 @@
+<?php
+namespace WeltPixel\OwlCarouselSlider\Model\Config\Source;
+
+class WidgetProducts implements \Magento\Framework\Option\ArrayInterface
+{
+    /**
+     * Return array of options as value-label pairs
+     *
+     * @return array Format: array(array('value' => '<value>', 'label' => '<label>'), ...)
+     */
+    public function toOptionArray()
+    {
+        return [
+            ['value' => '0', 'label' => __('Select Products Slider...')],
+            ['value' => 'new_products', 'label' => __('New Products')],
+            ['value' => 'bestsell_products', 'label' => __('Best-sell Products')],
+            ['value' => 'sell_products', 'label' => __('Sale Products')],
+            ['value' => 'recently_viewed', 'label' => __('Recently Viewed')],
+//            ['value' => 'related_products', 'label' => __('Related Products')],
+//            ['value' => 'upsell_products', 'label' => __('Up-sell Products')],
+//            ['value' => 'crosssell_products', 'label' => __('Cross-sell Products')]
+        ];
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Banner.php b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Banner.php
new file mode 100644
index 0000000000000000000000000000000000000000..500ca6d75e820d98526484c1c3fca1b69b36384b
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Banner.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Model\ResourceModel;
+
+/**
+ * Banner Resource Model
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Banner extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
+{
+    /**
+     * construct
+     * @return void
+     */
+    protected function _construct()
+    {
+        $this->_init('weltpixel_owlcarouselslider_banners', 'id');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Banner/Collection.php b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Banner/Collection.php
new file mode 100644
index 0000000000000000000000000000000000000000..109e99d14a92c2d1d82a1ce03c04b3b07e7f3d05
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Banner/Collection.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner;
+
+/**
+ * Banner Collection
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection
+{
+    /**
+     * _construct
+     * @return void
+     */
+    protected function _construct()
+    {
+        $this->_init('WeltPixel\OwlCarouselSlider\Model\Banner',
+            'WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Slider.php b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Slider.php
new file mode 100644
index 0000000000000000000000000000000000000000..cd58ed1bc792f77c258a075f3cd6cb3d16e46d07
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Slider.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Model\ResourceModel;
+
+/**
+ * Slider Resource Model
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Slider extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
+{
+    /**
+     * construct
+     * @return void
+     */
+    protected function _construct()
+    {
+        $this->_init('weltpixel_owlcarouselslider_sliders', 'id');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Slider/Collection.php b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Slider/Collection.php
new file mode 100644
index 0000000000000000000000000000000000000000..95031635bcaeec1eb1451cfcbfaedce82eb20a41
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/ResourceModel/Slider/Collection.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider;
+
+/**
+ * Slider Collection
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection
+{
+    /**
+     * _contruct
+     * @return void
+     */
+    protected function _construct()
+    {
+        $this->_init('WeltPixel\OwlCarouselSlider\Model\Slider',
+            'WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider');
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Slider.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Slider.php
new file mode 100644
index 0000000000000000000000000000000000000000..1bb26ed33fe7b3b5ce157aed48c765da335aba53
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Slider.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Model;
+
+/**
+ * Slider Model
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Slider extends \Magento\Framework\Model\AbstractModel
+{
+    const SLIDER_TYPE_CONFIGURABLE  = 1;
+    const SLIDER_TYPE_CUSTOM        = 2;
+
+    const XML_CONFIG_ENABLE_BANNER = 'weltpixel_owl_carouselslider_general/general/enable_owlcarousel';
+
+    /**
+     * banner collection factory.
+     *
+     * @var \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory
+     */
+    protected $_bannerCollectionFactory;
+
+    /**
+     * constructor.
+     *
+     * @param \Magento\Framework\Model\Context                                          $context
+     * @param \Magento\Framework\Registry                                               $registry
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory $bannerCollectionFactory
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider                   $resource
+     * @param \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\Collection        $resourceCollection
+     */
+    public function __construct(
+        \Magento\Framework\Model\Context $context,
+        \Magento\Framework\Registry $registry,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\CollectionFactory $bannerCollectionFactory,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider $resource,
+        \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Slider\Collection $resourceCollection
+    ) {
+        parent::__construct($context, $registry, $resource, $resourceCollection);
+
+        $this->_bannerCollectionFactory = $bannerCollectionFactory;
+    }
+
+    /**
+     * Retrieve available slider type.
+     *
+     * @return []
+     */
+    public static function getAvailableTransition()
+    {
+        return [
+            'slide'   => __('Slide'),
+            'fadeOut' => __('Fade'),
+        ];
+    }
+
+    /**
+     * Retrieve banner collection of slider.
+     *
+     * @return \WeltPixel\OwlCarouselSlider\Model\ResourceModel\Banner\Collection
+     */
+    public function getSliderBanerCollection()
+    {
+        return $this->_bannerCollectionFactory->create()->addFieldToFilter('slider_id', $this->getId());
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Model/Status.php b/app/code/WeltPixel/OwlCarouselSlider/Model/Status.php
new file mode 100644
index 0000000000000000000000000000000000000000..ee6b81a4448f5c61053308f7ee9cd6904d502e49
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Model/Status.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Model;
+
+/**
+ * Status
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class Status
+{
+    const STATUS_ENABLED  = 1;
+    const STATUS_DISABLED = 0;
+
+    /**
+     * Retrieve available statuses.
+     *
+     * @return []
+     */
+    public function getAllAvailableStatuses()
+    {
+        return [
+            self::STATUS_ENABLED  => __('Enabled'),
+            self::STATUS_DISABLED => __('Disabled'),
+        ];
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/README.md b/app/code/WeltPixel/OwlCarouselSlider/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..50bbdac8dc6d2b66c35305d42074a2809a15841d
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/README.md
@@ -0,0 +1,25 @@
+# m2-weltpixel-owl-carousel-slider
+
+### Installation
+
+Dependencies:
+ - m2-weltpixel-backend
+
+With composer:
+
+```sh
+$ composer config repositories.welpixel-m2-weltpixel-owl-carousel-slider git git@github.com:rusdragos/m2-weltpixel-owl-carousel-slider.git
+$ composer require weltpixel/m2-weltpixel-owl-carousel-slider:dev-master
+```
+
+Manually:
+
+Copy the zip into app/code/WeltPixel/OwlCarouselSlider directory
+
+
+#### After installation by either means, enable the extension by running following commands:
+
+```sh
+$ php bin/magento module:enable WeltPixel_OwlCarouselSlider --clear-static-content
+$ php bin/magento setup:upgrade
+```
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Setup/InstallSchema.php b/app/code/WeltPixel/OwlCarouselSlider/Setup/InstallSchema.php
new file mode 100644
index 0000000000000000000000000000000000000000..bcf9d63d58540fe1aa91006ace49f82eef3c0060
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Setup/InstallSchema.php
@@ -0,0 +1,357 @@
+<?php
+
+namespace WeltPixel\OwlCarouselSlider\Setup;
+
+use Magento\Framework\Setup\InstallSchemaInterface;
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\SchemaSetupInterface;
+
+/**
+ * Install schema
+ * @category WeltPixel
+ * @package  WeltPixel_OwlCarouselSlider
+ * @module   OwlCarouselSlider
+ * @author   WeltPixel Developer
+ */
+class InstallSchema implements InstallSchemaInterface
+{
+    /**
+     * Installs DB schema for module
+     *
+     * @param SchemaSetupInterface   $setup
+     * @param ModuleContextInterface $context
+     * @return void
+     */
+    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
+    {
+        $installer = $setup;
+
+        $installer->startSetup();
+
+        // Get weltpixel_owlcarouselslider_banners table
+        $tableName = $installer->getTable('weltpixel_owlcarouselslider_banners');
+
+        // Check if the table already exists
+        if ($installer->getConnection()->isTableExists($tableName) != true) {
+
+            /*
+             * Create table weltpixel_owlcarouselslider_banners
+             */
+
+            $table = $installer->getConnection()->newTable(
+                $tableName
+            )->addColumn(
+                'id',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true],
+                'Banner Id'
+            )->addColumn(
+                'status',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => false, 'default' => '0'],
+                'Banner Status'
+            )->addColumn(
+                'title',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                255,
+                ['nullable' => false, 'default' => ''],
+                'Banner Title'
+            )->addColumn(
+                'show_title',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '0'],
+                'Show Banner Title'
+            )->addColumn(
+                'description',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                '64k',
+                ['nullable' => true, 'default' => ''],
+                'Banner Description'
+            )->addColumn(
+                'show_description',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '0'],
+                'Show Banner Description'
+            )->addColumn(
+                'banner_type',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '0'],
+                'Banner Type'
+            )->addColumn(
+                'slider_id',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true],
+                'Slider Id'
+            )->addColumn(
+                'url',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                255,
+                ['nullable' => true, 'default' => ''],
+                'Banner Url'
+            )->addColumn(
+                'target',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                50,
+                ['nullable' => true, 'default' => '_blank'],
+                'Banner Url Target'
+            )->addColumn(
+                'video',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                '64k',
+                ['nullable' => true, 'default' => ''],
+                'Banner Video'
+            )->addColumn(
+                'image',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                255,
+                ['nullable' => true],
+                'Banner Image'
+            )->addColumn(
+                'custom',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                '64k',
+                ['nullable' => true, 'default' => ''],
+                'Banner Custom HTML'
+            )->addColumn(
+                'alt_text',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                255,
+                ['nullable' => true],
+                'Banner Image Alt Text'
+            )->addColumn(
+                'button_text',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                255,
+                ['nullable' => true],
+                'Button Text'
+            )->addColumn(
+                'custom_content',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                '64k',
+                ['nullable' => true],
+                'Custom Content'
+            )->addColumn(
+                'valid_from',
+                \Magento\Framework\DB\Ddl\Table::TYPE_DATETIME,
+                null,
+                ['nullable' => true],
+                'Banner Valid From'
+            )->addColumn(
+                'valid_to',
+                \Magento\Framework\DB\Ddl\Table::TYPE_DATETIME,
+                null,
+                ['nullable' => true],
+                'Banner Valid To'
+            )->addColumn(
+                'sort_order',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true],
+                'Banner Sort Ordert'
+            )->addIndex(
+                $installer->getIdxName('weltpixel_owlcarouselslider_banners', ['id']),
+                ['id']
+            )->addIndex(
+                $installer->getIdxName('weltpixel_owlcarouselslider_banners', ['status']),
+                ['status']
+            )->addIndex(
+                $installer->getIdxName('weltpixel_owlcarouselslider_banners', ['slider_id']),
+                ['slider_id']
+            )->addIndex(
+                $installer->getIdxName('weltpixel_owlcarouselslider_banners', ['valid_from']),
+                ['valid_from']
+            )->addIndex(
+                $installer->getIdxName('weltpixel_owlcarouselslider_banners', ['valid_to']),
+                ['valid_to']
+            );
+
+            $installer->getConnection()->createTable($table);
+        }
+
+        /*
+         * Create table weltpixel_owlcarouselslider_sliders
+         */
+
+        // Get weltpixel_owlcarouselslider_sliders table
+        $tableName = $installer->getTable('weltpixel_owlcarouselslider_sliders');
+
+        // Check if the table already exists
+        if ($installer->getConnection()->isTableExists($tableName) != true) {
+            $table = $installer->getConnection()->newTable(
+                $tableName
+            )->addColumn(
+                'id',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true],
+                'ID'
+            )->addColumn(
+                'status',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '0'],
+                'Slider Status'
+            )->addColumn(
+                'title',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                255,
+                ['nullable' => false, 'default' => 'Custom Slider'],
+                'Slider Title'
+            )->addColumn(
+                'show_title',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '0'],
+                'Show Title'
+            )->addColumn(
+                'slider_content',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                '64k',
+                ['nullable' => true, 'default' => ''],
+                'Slider Content'
+            )->addColumn(
+                'nav',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Navigation'
+            )->addColumn(
+                'dots',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Dots'
+            )->addColumn(
+                'center',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Center'
+            )->addColumn(
+                'items',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Items'
+            )->addColumn(
+                'loop',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Loop'
+            )->addColumn(
+                'margin',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '0'],
+                'Margin'
+            )->addColumn(
+                'stagePadding',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '0'],
+                'StagePadding'
+            )->addColumn(
+                'lazyLoad',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'LazyLoad'
+            )->addColumn(
+                'transition',
+                \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                255,
+                ['nullable' => true, 'default' => 'fadeOut'],
+                'Transition'
+            )->addColumn(
+                'autoplay',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Autoplay'
+            )->addColumn(
+                'autoplayTimeout',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '3000'],
+                'AutoplayTimeout'
+            )->addColumn(
+                'autoplayHoverPause',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'AutoplayHoverPause'
+            )->addColumn(
+                'autoHeight',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'AutoHeight'
+            )->addColumn(
+                'nav_brk1',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 1 Nav'
+            )->addColumn(
+                'items_brk1',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 1 Items'
+            )->addColumn(
+                'nav_brk2',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 2 Nav'
+            )->addColumn(
+                'items_brk2',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 2 Items'
+            )->addColumn(
+                'nav_brk3',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 3 Nav'
+            )->addColumn(
+                'items_brk3',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 3 Items'
+            )->addColumn(
+                'nav_brk4',
+                \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 4 Nav'
+            )->addColumn(
+                'items_brk4',
+                \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                null,
+                ['nullable' => true, 'default' => '1'],
+                'Breakpoint 4 Items'
+            )->addIndex(
+                $installer->getIdxName('weltpixel_owlcarouselslider_sliders', ['id']),
+                ['status']
+            )->addIndex(
+                $installer->getIdxName('weltpixel_owlcarouselslider_sliders', ['status']),
+                ['status']
+            );
+
+            $installer->getConnection()->createTable($table);
+        }
+        
+        $installer->endSetup();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/Setup/UpgradeSchema.php b/app/code/WeltPixel/OwlCarouselSlider/Setup/UpgradeSchema.php
new file mode 100644
index 0000000000000000000000000000000000000000..89eac5fb2228e97239aed9abb911da9a6323b230
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/Setup/UpgradeSchema.php
@@ -0,0 +1,88 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace WeltPixel\OwlCarouselSlider\Setup;
+
+use Magento\Framework\Setup\UpgradeSchemaInterface;
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\SchemaSetupInterface;
+
+/**
+ * Upgrade the OwlCarouselSlider module DB scheme
+ * Add new column to weltpixel_owlcarouselslider_banners table
+ */
+class UpgradeSchema implements UpgradeSchemaInterface
+{
+    public function upgrade(SchemaSetupInterface $setup, ModuleContextInterface $context)
+    {
+        $setup->startSetup();
+    
+        if (version_compare($context->getVersion(), '1.0.4') < 0) {
+            $setup->getConnection()->addColumn(
+                $setup->getTable('weltpixel_owlcarouselslider_banners'),
+                'custom_css',
+                [
+                    'type'     => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    'length'   => '64k',
+                    'nullable' => true,
+                    'after'    => 'custom_content',
+                    'comment'  => 'Custom CSS'
+                ]
+            );
+        }
+        if (version_compare($context->getVersion(), '1.0.5') < 0) {
+            $setup->getConnection()->addColumn(
+                $setup->getTable('weltpixel_owlcarouselslider_banners'),
+                'ga_promo_id',
+                [
+                    'type'     => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    'length'   => '256',
+                    'nullable' => false,
+                    'default' => '',
+                    'comment'  => 'GA Promo ID'
+                ]
+            );
+
+            $setup->getConnection()->addColumn(
+                $setup->getTable('weltpixel_owlcarouselslider_banners'),
+                'ga_promo_name',
+                [
+                    'type'     => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    'length'   => '256',
+                    'nullable' => false,
+                    'default' => '',
+                    'comment'  => 'GA Promo Name'
+                ]
+            );
+
+            $setup->getConnection()->addColumn(
+                $setup->getTable('weltpixel_owlcarouselslider_banners'),
+                'ga_promo_creative',
+                [
+                    'type'     => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    'length'   => '256',
+                    'nullable' => false,
+                    'default' => '',
+                    'comment'  => 'GA Promo Creative'
+                ]
+            );
+
+            $setup->getConnection()->addColumn(
+                $setup->getTable('weltpixel_owlcarouselslider_banners'),
+                'ga_promo_position',
+                [
+                    'type'     => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    'length'   => '256',
+                    'nullable' => false,
+                    'default' => '',
+                    'comment'  => 'GA Promo Position'
+                ]
+            );
+        }
+
+
+        $setup->endSetup();
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/composer.json b/app/code/WeltPixel/OwlCarouselSlider/composer.json
new file mode 100644
index 0000000000000000000000000000000000000000..0f253a9508df6a89ef451c5cda1a895e41b20cad
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/composer.json
@@ -0,0 +1,29 @@
+{
+    "name": "weltpixel/m2-weltpixel-owl-carousel-slider",
+    "description": "WeltPixel Owl Carousel And Slider Module",
+    "require": {
+        "php": "~5.6.5|7.0.2|7.0.4|~7.0.6|~7.1.0",
+        "weltpixel/m2-weltpixel-backend": "~1.0 | master"
+    },
+    "type": "magento2-module",
+    "version": "1.5.7",
+    "license": [
+        "OSL-3.0",
+        "AFL-3.0"
+    ],
+    "authors": [
+        {
+            "name": "WeltPixel",
+            "email": "support@weltpixel.com",
+            "homepage": "http://www.weltpixel.com/"
+        }
+    ],
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "WeltPixel\\OwlCarouselSlider\\": ""
+        }
+    }
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/acl.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/acl.xml
new file mode 100644
index 0000000000000000000000000000000000000000..70bf8962fd32b5b1d6b139ac87d764384a9b3ea0
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/acl.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
+    <acl>
+        <resources>
+            <resource id="Magento_Backend::admin">
+                <resource id="WeltPixel_Backend::WeltPixel">
+                    <resource id="WeltPixel_OwlCarouselSlider::owlcarouselslider" title="WeltPixel OwlCarouselSlider" sortOrder="10">
+                        <resource id="WeltPixel_OwlCarouselSlider::owlcarouselslider_general_configuration_carousel" title="Manage General Settings" sortOrder="0" />
+                        <resource id="WeltPixel_OwlCarouselSlider::owlcarouselslider_products_sliders" title="Manage Products Sliders" sortOrder="10" />
+                    </resource>
+                    <resource id="WeltPixel_OwlCarouselSlider::owlsliders" title="WeltPixel OwlCarouselSlider" sortOrder="10">
+                        <resource id="WeltPixel_OwlCarouselSlider::owlcarouselslider_general_configuration_slider" title="Manage General Settings" sortOrder="0" />
+                        <resource id="WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_sliders" title="Manage Sliders" sortOrder="10" />
+                        <resource id="WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_banners" title="Manage Banners for Sliders" sortOrder="10" />
+                    </resource>
+                </resource>
+                <resource id="Magento_Backend::stores">
+                    <resource id="Magento_Backend::stores_settings">
+                        <resource id="Magento_Config::config">
+                            <resource id="WeltPixel_OwlCarouselSlider::owlcarouselslider_settings" title="OwlCarouselSlider Products Sliders And Settings" />
+                        </resource>
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/menu.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/menu.xml
new file mode 100644
index 0000000000000000000000000000000000000000..305eade9c515311c56c83d3769bfec2b64d0b913
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/menu.xml
@@ -0,0 +1,66 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
+    <menu>
+        <add
+                id="WeltPixel_OwlCarouselSlider::owlcarouselslider"
+                title="Carousels"
+                module="WeltPixel_OwlCarouselSlider"
+                sortOrder="130"
+                parent="WeltPixel_Backend::WeltPixel"
+                resource="WeltPixel_OwlCarouselSlider::owlcarouselslider"
+        />
+        <add
+                id="WeltPixel_OwlCarouselSlider::owlcarouselslider_general_configuration_carousel"
+                title="General Settings"
+                module="WeltPixel_OwlCarouselSlider"
+                action="adminhtml/system_config/edit/section/weltpixel_owl_slider_config/"
+                sortOrder="5"
+                parent="WeltPixel_OwlCarouselSlider::owlcarouselslider"
+                resource="WeltPixel_OwlCarouselSlider::owlcarouselslider_general_configuration_carousel"
+        />
+        <add
+                id="WeltPixel_OwlCarouselSlider::owlcarouselslider_products_sliders"
+                title="OWL Product Carousels"
+                module="WeltPixel_OwlCarouselSlider"
+                action="adminhtml/system_config/edit/section/weltpixel_owl_carousel_config/"
+                sortOrder="10"
+                parent="WeltPixel_OwlCarouselSlider::owlcarouselslider"
+                resource="WeltPixel_OwlCarouselSlider::owlcarouselslider_products_sliders"
+        />
+        <add
+                id="WeltPixel_OwlCarouselSlider::owlsliders"
+                title="Sliders"
+                module="WeltPixel_OwlCarouselSlider"
+                sortOrder="140"
+                parent="WeltPixel_Backend::WeltPixel"
+                resource="WeltPixel_OwlCarouselSlider::owlcarouselslider"
+        />
+        <add
+                id="WeltPixel_OwlCarouselSlider::owlcarouselslider_general_configuration_slider"
+                title="General Settings"
+                module="WeltPixel_OwlCarouselSlider"
+                action="adminhtml/system_config/edit/section/weltpixel_owl_slider_config/"
+                sortOrder="5"
+                parent="WeltPixel_OwlCarouselSlider::owlsliders"
+                resource="WeltPixel_OwlCarouselSlider::owlcarouselslider_general_configuration_slider"
+        />
+        <add
+                id="WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_banners"
+                title="Banners for Sliders"
+                module="WeltPixel_OwlCarouselSlider"
+                action="weltowlcarousel/banner"
+                sortOrder="10"
+                parent="WeltPixel_OwlCarouselSlider::owlsliders"
+                resource="WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_banners"
+        />
+        <add
+                id="WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_sliders"
+                title="Sliders Manager"
+                module="WeltPixel_OwlCarouselSlider"
+                action="weltowlcarousel/slider"
+                sortOrder="20"
+                parent="WeltPixel_OwlCarouselSlider::owlsliders"
+                resource="WeltPixel_OwlCarouselSlider::owlcarouselslider_custom_sliders"
+        />
+    </menu>
+</config>
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/routes.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/routes.xml
new file mode 100644
index 0000000000000000000000000000000000000000..db872ebd44fd0b7fa1983f1a3a1a90fdbc9934cc
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/routes.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="admin">
+        <route id="weltowlcarousel" frontName="weltowlcarousel">
+            <module name="WeltPixel_OwlCarouselSlider" />
+        </route>
+    </router>
+</config>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/system.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/system.xml
new file mode 100644
index 0000000000000000000000000000000000000000..dbfe0fcd8704d5a221bdb51e85d0b470801a6cc4
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/adminhtml/system.xml
@@ -0,0 +1,1673 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
+    <system>
+        <section id="weltpixel_owl_carousel_config" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>OWL Product Carousels</label>
+            <tab>weltpixel</tab>
+            <resource>WeltPixel_OwlCarouselSlider::owlcarouselslider_settings</resource>
+            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General Configuration for OWL Product Carousels and Banner Sliders</label>
+                <field id="breakpoint_1" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Breakpoint 1</label>
+                    <comment>Add breakpoint. Ex.: 320. Applied to resolutions higher than set value.</comment>
+                </field>
+                <field id="breakpoint_2" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Breakpoint 2</label>
+                    <comment>Add breakpoint. Ex.: 768. Applied to resolutions higher than set value.</comment>
+                </field>
+                <field id="breakpoint_3" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Breakpoint 3</label>
+                    <comment>Add breakpoint. Ex.: 1024. Applied to resolutions higher than set value.</comment>
+                </field>
+                <field id="breakpoint_4" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Breakpoint 4</label>
+                    <comment>Add breakpoint. Ex.: 1280. Applied to resolutions higher than set value.</comment>
+                </field>
+                <field id="display_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Display wishlist</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="display_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Display compare</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+            </group>
+
+            <!--New Products Section-->
+
+            <group id="new_products" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>New Products Carousel Settings</label>
+
+                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable Carousel</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>In order for carousel to be displayed, make sure you have products defined as "New" and the carousel is inserted in your page/block. Insert the
+                        carousel by following the documentation.</comment>
+                </field>
+                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title</label>
+                    <comment>Visible only if not empty.</comment>
+                </field>
+                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Price</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Add To Cart</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Wishlist</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Compare</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Random Sort</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Max Items</label>
+                    <comment>The number of items you want to load.</comment>
+                </field>
+
+                <!--Separator Slider-->
+
+                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
+                </field>
+                <field id="nav" translate="label" type="select" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="dots" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots navigation are displayed.</comment>
+                </field>
+                <field id="center" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Center</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours). Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options .</comment>
+                </field>
+                <field id="items" translate="label" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Loop</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
+                </field>
+                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Margin</label>
+                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
+                </field>
+                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>LazyLoad</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
+                </field>
+                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Autoplay</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                </field>
+                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayTimeout</label>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Autoplay interval timeout.</comment>
+                </field>
+                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayHoverPause</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Pause on mouse hover.</comment>
+                </field>
+
+                <!--Separator Breakpoints-->
+
+                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <!--Separator Breakpoint 1-->
+                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk1">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 2-->
+                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk2">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk3">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk4">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+            </group>
+
+            <!--Best sell Products Section-->
+
+            <group id="bestsell_products" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Best Sell Products Carousel Settings</label>
+
+                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable Carousel</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>In order for carousel to be displayed make sure the carousel is inserted in your page/block and there are a few orders placed. Insert the carousel by following the documentation.</comment>
+                </field>
+                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title</label>
+                    <comment>Visible only if not empty.</comment>
+                </field>
+                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Price</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Add To Cart</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Wishlist</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Compare</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Random Sort</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Max Items</label>
+                    <comment>The number of items you want to load.</comment>
+                </field>
+
+                <!--Separator Slider-->
+
+                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
+                </field>
+                <field id="nav" translate="label" type="select" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="dots" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots navigation are displayed.</comment>
+                </field>
+                <field id="center" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Center</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours). Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options .</comment>
+                </field>
+                <field id="items" translate="label" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Loop</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
+                </field>
+                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Margin</label>
+                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
+                </field>
+                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>LazyLoad</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
+                </field>
+                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Autoplay</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                </field>
+                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayTimeout</label>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Autoplay interval timeout.</comment>
+                </field>
+                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayHoverPause</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Pause on mouse hover.</comment>
+                </field>
+
+                <!--Separator Breakpoints-->
+
+                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <!--Separator Breakpoint 1-->
+                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk1">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 2-->
+                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk2">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk3">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk4">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+            </group>
+
+            <!--Sell Products Section-->
+
+            <group id="sell_products" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Sale Products Carousel Settings</label>
+
+                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable Carousel</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>In order for carousel to be displayed, make sure you have products defined as "Sale" and the carousel is inserted in your page/block. Insert the carousel by
+                        following the documentation.</comment>
+                </field>
+                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title</label>
+                    <comment>Visible only if not empty.</comment>
+                </field>
+                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Price</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Add To Cart</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Wishlist</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Compare</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Random Sort</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Max Items</label>
+                    <comment>The number of items you want to load.</comment>
+                </field>
+
+                <!--Separator Slider-->
+
+                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
+                </field>
+                <field id="nav" translate="label" type="select" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="dots" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots navigation are displayed.</comment>
+                </field>
+                <field id="center" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Center</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours). Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options .</comment>
+                </field>
+                <field id="items" translate="label" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Loop</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
+                </field>
+                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Margin</label>
+                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
+                </field>
+                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>LazyLoad</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
+                </field>
+                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Autoplay</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                </field>
+                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayTimeout</label>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Autoplay interval timeout.</comment>
+                </field>
+                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayHoverPause</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Pause on mouse hover.</comment>
+                </field>
+
+                <!--Separator Breakpoints-->
+
+                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <!--Separator Breakpoint 1-->
+                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk1">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 2-->
+                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk2">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk3">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk4">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+            </group>
+
+            <!--Recently Products Section-->
+
+            <group id="recently_viewed" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Recently Viewed Products Carousel Settings</label>
+
+                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable Carousel</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>In order for carousel to be displayed, users must be logged in and visited at least one product and the carousel is inserted in your page/block. Insert the carousel by following the documentation.</comment>
+                </field>
+                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title</label>
+                    <comment>Visible only if not empty.</comment>
+                </field>
+                <field id="show_price" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Price</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_addto" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Add To Cart</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_wishlist" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Wishlist</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="show_compare" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Compare</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="random_sort" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Random Sort</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="max_items" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Max Items</label>
+                    <comment>The number of items you want to load.</comment>
+                </field>
+
+                <!--Separator Slider-->
+
+                <field id="separatorSlider" translate="label" type="text" sortOrder="85" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
+                </field>
+                <field id="nav" translate="label" type="select" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="dots" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots navigation are displayed.</comment>
+                </field>
+                <field id="center" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Center</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours). Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options .</comment>
+                </field>
+                <field id="items" translate="label" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="loop" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Loop</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
+                </field>
+                <field id="margin" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Margin</label>
+                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
+                </field>
+                <field id="lazyLoad" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>LazyLoad</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
+                </field>
+                <field id="autoplay" translate="label" type="select" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Autoplay</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                </field>
+                <field id="autoplayTimeout" translate="label" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayTimeout</label>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Autoplay interval timeout.</comment>
+                </field>
+                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayHoverPause</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Pause on mouse hover.</comment>
+                </field>
+
+                <!--Separator Breakpoints-->
+
+                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="195" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <!--Separator Breakpoint 1-->
+                <field id="s_1" translate="label" type="text" sortOrder="197" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk1" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk1" translate="label" type="select" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk1" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk1" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk1">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 2-->
+                <field id="s_2" translate="label" type="text" sortOrder="235" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk2" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk2" translate="label" type="select" sortOrder="245" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk2" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk2" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk2">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_3" translate="label" type="text" sortOrder="275" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk3" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk3" translate="label" type="select" sortOrder="285" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk3" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk3" translate="label" type="select" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk3">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 4-->
+                <field id="s_4" translate="label" type="text" sortOrder="315" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk4" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk4" translate="label" type="select" sortOrder="325" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk4" translate="label" type="text" sortOrder="330" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk4" translate="label" type="select" sortOrder="340" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk4">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+            </group>
+
+            <!--Related Products Section-->
+
+            <group id="related_products" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Related Products Carousel Settings</label>
+
+                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable Carousel</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>If Enabled, the products will be displayed on product page in a carousel instead of default product grid. Make sure you have defined Related Products in your catalog.</comment>
+                </field>
+                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title</label>
+                    <comment>Visible only if not empty.</comment>
+                </field>
+
+                <!--Separator Slider-->
+
+                <field id="separatorSlider" translate="label" type="text" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
+                </field>
+                <field id="nav" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="dots" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots navigation are displayed.</comment>
+                </field>
+                <field id="center" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Center</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours). Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options .</comment>
+                </field>
+                <field id="items" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="loop" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Loop</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
+                </field>
+                <field id="margin" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Margin</label>
+                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
+                </field>
+                <field id="lazyLoad" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>LazyLoad</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
+                </field>
+                <field id="autoplay" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Autoplay</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                </field>
+                <field id="autoplayTimeout" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayTimeout</label>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Autoplay interval timeout.</comment>
+                </field>
+                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayHoverPause</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Pause on mouse hover.</comment>
+                </field>
+
+                <!--Separator Breakpoints-->
+
+                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <!--Separator Breakpoint 1-->
+                <field id="s_1" translate="label" type="text" sortOrder="137" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk1" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk1" translate="label" type="select" sortOrder="145" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk1" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk1" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk1">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 2-->
+                <field id="s_2" translate="label" type="text" sortOrder="175" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk2" translate="label" type="select" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk2" translate="label" type="select" sortOrder="185" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk2" translate="label" type="text" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk2" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk2">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_3" translate="label" type="text" sortOrder="215" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk3" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk3" translate="label" type="select" sortOrder="225" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk3" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk3" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk3">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_4" translate="label" type="text" sortOrder="255" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk4" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk4" translate="label" type="select" sortOrder="265" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk4" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk4" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk4">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+            </group>
+
+            <!--Up-sells Products Section-->
+
+            <group id="upsell_products" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Up-Sells Products Carousel Settings</label>
+
+                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable Carousel</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>If Enabled, the products will be displayed on product page in a carousel instead of default product grid. Make sure you have defined Up-Sells Products in your catalog.</comment>
+                </field>
+                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title</label>
+                    <comment>Visible only if not empty.</comment>
+                </field>
+
+                <!--Separator Slider-->
+
+                <field id="separatorSlider" translate="label" type="text" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
+                </field>
+                <field id="nav" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="dots" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots navigation are displayed.</comment>
+                </field>
+                <field id="center" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Center</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours). Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options .</comment>
+                </field>
+                <field id="items" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="loop" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Loop</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
+                </field>
+                <field id="margin" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Margin</label>
+                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
+                </field>
+                <field id="lazyLoad" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>LazyLoad</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
+                </field>
+                <field id="autoplay" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Autoplay</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                </field>
+                <field id="autoplayTimeout" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayTimeout</label>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Autoplay interval timeout.</comment>
+                </field>
+                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayHoverPause</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Pause on mouse hover.</comment>
+                </field>
+
+                <!--Separator Breakpoints-->
+
+                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <!--Separator Breakpoint 1-->
+                <field id="s_1" translate="label" type="text" sortOrder="137" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk1" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk1" translate="label" type="select" sortOrder="145" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk1" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk1" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk1">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 2-->
+                <field id="s_2" translate="label" type="text" sortOrder="175" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk2" translate="label" type="select" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk2" translate="label" type="select" sortOrder="185" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk2" translate="label" type="text" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk2" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk2">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_3" translate="label" type="text" sortOrder="215" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk3" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk3" translate="label" type="select" sortOrder="225" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk3" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk3" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk3">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_4" translate="label" type="text" sortOrder="255" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk4" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk4" translate="label" type="select" sortOrder="265" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk4" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk4" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk4">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+            </group>
+
+            <!--Cross-sell Products Section-->
+
+            <group id="crosssell_products" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Cross-Sell Products Carousel Settings</label>
+
+                <field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable Carousel</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>If Enabled, the products will be displayed on product page in a carousel instead of default product grid. Make sure you have defined Cross-Sells Products in your catalog.</comment>
+                </field>
+                <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title</label>
+                    <comment>Visible only if not empty.</comment>
+                </field>
+
+                <!--Separator Slider-->
+
+                <field id="separatorSlider" translate="label" type="text" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorslide</frontend_model>
+                </field>
+                <field id="nav" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="dots" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots navigation are displayed.</comment>
+                </field>
+                <field id="center" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Center</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="stagePadding" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours). Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options .</comment>
+                </field>
+                <field id="items" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. Carousel Breakpoint options overwrites this option. Please check below Breakpoint Carousel Options.</comment>
+                </field>
+                <field id="loop" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Loop</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Inifnity loop. Duplicate last and first items to get loop illusion.</comment>
+                </field>
+                <field id="margin" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Margin</label>
+                    <comment>Set right margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.</comment>
+                </field>
+                <field id="lazyLoad" translate="label" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>LazyLoad</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.</comment>
+                </field>
+                <field id="autoplay" translate="label" type="select" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Autoplay</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                </field>
+                <field id="autoplayTimeout" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayTimeout</label>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Autoplay interval timeout.</comment>
+                </field>
+                <field id="autoplayHoverPause" translate="label" type="select" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AutoplayHoverPause</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <depends>
+                        <field id="autoplay">1</field>
+                    </depends>
+                    <comment>Pause on mouse hover.</comment>
+                </field>
+
+                <!--Separator Breakpoints-->
+
+                <field id="Separatorbreakpoint" translate="label" type="text" sortOrder="135" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <!--Separator Breakpoint 1-->
+                <field id="s_1" translate="label" type="text" sortOrder="137" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk1" translate="label" type="select" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk1" translate="label" type="select" sortOrder="145" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk1" translate="label" type="text" sortOrder="150" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk1" translate="label" type="select" sortOrder="160" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk1" translate="label" type="text" sortOrder="170" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk1">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 2-->
+                <field id="s_2" translate="label" type="text" sortOrder="175" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk2" translate="label" type="select" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk2" translate="label" type="select" sortOrder="185" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk2" translate="label" type="text" sortOrder="190" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk2" translate="label" type="select" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk2" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk2">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_3" translate="label" type="text" sortOrder="215" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk3" translate="label" type="select" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk3" translate="label" type="select" sortOrder="225" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk3" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk3" translate="label" type="select" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk3" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk3">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+
+                <!--Separatorbreakpoint 3-->
+                <field id="s_4" translate="label" type="text" sortOrder="255" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\Separatorbreakpoint</frontend_model>
+                </field>
+
+                <field id="nav_brk4" translate="label" type="select" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Next/Prev Buttons</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, next/prev buttons are displayed.</comment>
+                </field>
+                <field id="dots_brk4" translate="label" type="select" sortOrder="265" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Dots</label>
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <comment>If True, dots will displayed.</comment>
+                </field>
+                <field id="items_brk4" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Items</label>
+                    <comment>The number of items you want to see on the screen. This value should be smaller than Max Items. </comment>
+                </field>
+                <field id="center_brk4" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <source_model>WeltPixel\OwlCarouselSlider\Model\Config\Source\Truefalse</source_model>
+                    <label>Center</label>
+                    <comment>If True, carousel is centered on the screen. Works well even with an odd number of items.</comment>
+                </field>
+                <field id="stagePadding_brk4" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>StagePadding</label>
+                    <depends>
+                        <field id="center_brk4">0</field>
+                    </depends>
+                    <comment>Padding left and right on stage (can see neighbours).</comment>
+                </field>
+            </group>
+            <group id="category_products" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Custom Category Products Carousel Settings</label>
+                <field id="upgrade_to_pro" translate="comment" type="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" >
+                    <comment><![CDATA[<b style="font-size: 16px"><a style="font-size: 16px" target="_blank" href="https://www.weltpixel.com/owl-carousel-and-slider.html">Upgrade to Pro version</a> to enable this functionality.</b>]]></comment>
+                </field>
+            </group>
+        </section>
+        <section id="weltpixel_owl_slider_config" translate="label" type="text" sortOrder="181" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>Owl Slider</label>
+            <tab>weltpixel</tab>
+            <resource>WeltPixel_OwlCarouselSlider::owlcarouselslider_settings</resource>
+            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General Settings</label>
+                <field id="separatorGeneralSlider" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\SeparatorGeneralSlider</frontend_model>
+                </field>
+                <field id="enable_google_tracking" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1" >
+                    <label>Enable Google Analytics Tracking</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment><![CDATA[<b>Hint:</b> Requires Installation of <a href="http://www.weltpixel.com/google-analytics-enhanced-ecommerce-tag-manager-magento-2.html" target="_blank" >Google Analytics Enhanced Ecommerce Free Extension</a>. This feature will allow you to track Banner Click-Through-Rate (CTR) and revenue generated by the banner. ]]></comment>
+                </field>
+                <field id="separatorGeneralCarousel" translate="label" type="text" sortOrder="55" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>WeltPixel\OwlCarouselSlider\Block\Adminhtml\System\Config\SeparatorGeneralCarousel</frontend_model>
+                </field>
+                <field id="enable_hover_image" translate="label" type="label" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1" >
+                    <label>Enable Hover Image on products</label>
+                    <comment><![CDATA[ <b style="font-size: 16px"><a style="font-size: 16px" target="_blank" href="https://www.weltpixel.com/owl-carousel-and-slider.html">Upgrade to Pro version</a> to enable this functionality.</b> ]]></comment>
+                </field>
+                <field id="mobile_breakpoint" translate="label comment" type="label" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1" >
+                    <label>Mobile Breakpoint</label>
+                    <comment><![CDATA[ <b style="font-size: 16px"><a style="font-size: 16px" target="_blank" href="https://www.weltpixel.com/owl-carousel-and-slider.html">Upgrade to Pro version</a> to enable this functionality.</b> ]]></comment>
+                </field>
+            </group>
+        </section>
+    </system>
+</config>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/config.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/config.xml
new file mode 100644
index 0000000000000000000000000000000000000000..9ae73512a96d421cbe748575465333d126648c05
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/config.xml
@@ -0,0 +1,285 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
+    <default>
+        <weltpixel_owl_carousel_config>
+            <general>
+                <breakpoint_1>0</breakpoint_1>
+                <breakpoint_2>768</breakpoint_2>
+                <breakpoint_3>1024</breakpoint_3>
+                <breakpoint_4>1280</breakpoint_4>
+            </general>
+            <new_products>
+                <status>1</status>
+                <title></title>
+                <show_price>1</show_price>
+                <show_addto>0</show_addto>
+                <show_wishlist>0</show_wishlist>
+                <show_compare>0</show_compare>
+                <random_sort>0</random_sort>
+                <max_items>15</max_items>
+                <nav>1</nav>
+                <dots>1</dots>
+                <center>0</center>
+                <items>5</items>
+                <loop>1</loop>
+                <margin>0</margin>
+                <stagePadding>0</stagePadding>
+                <lazyLoad>1</lazyLoad>
+                <autoplay>1</autoplay>
+                <autoplayTimeout>3000</autoplayTimeout>
+                <autoplayHoverPause>1</autoplayHoverPause>
+                <nav_brk1>0</nav_brk1>
+                <dots_brk1>1</dots_brk1>
+                <items_brk1>2</items_brk1>
+                <center_brk1>0</center_brk1>
+                <stagePadding_brk1>0</stagePadding_brk1>
+                <nav_brk2>0</nav_brk2>
+                <dots_brk2>1</dots_brk2>
+                <items_brk2>3</items_brk2>
+                <center_brk2>0</center_brk2>
+                <stagePadding_brk2>0</stagePadding_brk2>
+                <nav_brk3>0</nav_brk3>
+                <dots_brk3>1</dots_brk3>
+                <items_brk3>4</items_brk3>
+                <center_brk3>0</center_brk3>
+                <stagePadding_brk3>0</stagePadding_brk3>
+                <nav_brk4>1</nav_brk4>
+                <dots_brk4>1</dots_brk4>
+                <items_brk4>5</items_brk4>
+                <center_brk4>0</center_brk4>
+                <stagePadding_brk4>0</stagePadding_brk4>
+            </new_products>
+            <bestsell_products>
+                <status>1</status>
+                <title></title>
+                <show_price>1</show_price>
+                <show_addto>0</show_addto>
+                <show_wishlist>0</show_wishlist>
+                <show_compare>0</show_compare>
+                <random_sort>0</random_sort>
+                <max_items>15</max_items>
+                <nav>1</nav>
+                <dots>1</dots>
+                <center>0</center>
+                <items>5</items>
+                <loop>1</loop>
+                <margin>0</margin>
+                <stagePadding>0</stagePadding>
+                <lazyLoad>1</lazyLoad>
+                <autoplay>1</autoplay>
+                <autoplayTimeout>3000</autoplayTimeout>
+                <autoplayHoverPause>1</autoplayHoverPause>
+                <nav_brk1>0</nav_brk1>
+                <dots_brk1>1</dots_brk1>
+                <items_brk1>2</items_brk1>
+                <center_brk1>0</center_brk1>
+                <stagePadding_brk1>0</stagePadding_brk1>
+                <nav_brk2>0</nav_brk2>
+                <dots_brk2>1</dots_brk2>
+                <items_brk2>3</items_brk2>
+                <center_brk2>0</center_brk2>
+                <stagePadding_brk2>0</stagePadding_brk2>
+                <nav_brk3>0</nav_brk3>
+                <dots_brk3>1</dots_brk3>
+                <items_brk3>4</items_brk3>
+                <center_brk3>0</center_brk3>
+                <stagePadding_brk3>0</stagePadding_brk3>
+                <nav_brk4>1</nav_brk4>
+                <dots_brk4>1</dots_brk4>
+                <items_brk4>5</items_brk4>
+                <center_brk4>0</center_brk4>
+                <stagePadding_brk4>0</stagePadding_brk4>
+            </bestsell_products>
+            <sell_products>
+                <status>1</status>
+                <title></title>
+                <show_price>1</show_price>
+                <show_addto>0</show_addto>
+                <show_wishlist>0</show_wishlist>
+                <show_compare>0</show_compare>
+                <random_sort>0</random_sort>
+                <max_items>15</max_items>
+                <nav>1</nav>
+                <dots>1</dots>
+                <center>0</center>
+                <items>5</items>
+                <loop>1</loop>
+                <margin>0</margin>
+                <stagePadding>0</stagePadding>
+                <lazyLoad>1</lazyLoad>
+                <autoplay>1</autoplay>
+                <autoplayTimeout>3000</autoplayTimeout>
+                <autoplayHoverPause>1</autoplayHoverPause>
+                <nav_brk1>0</nav_brk1>
+                <items_brk1>2</items_brk1>
+                <dots_brk1>1</dots_brk1>
+                <center_brk1>0</center_brk1>
+                <stagePadding_brk1>0</stagePadding_brk1>
+                <nav_brk2>0</nav_brk2>
+                <items_brk2>3</items_brk2>
+                <dots_brk2>1</dots_brk2>
+                <center_brk2>0</center_brk2>
+                <stagePadding_brk2>0</stagePadding_brk2>
+                <nav_brk3>0</nav_brk3>
+                <dots_brk3>1</dots_brk3>
+                <items_brk3>4</items_brk3>
+                <center_brk3>0</center_brk3>
+                <stagePadding_brk3>0</stagePadding_brk3>
+                <nav_brk4>1</nav_brk4>
+                <items_brk4>5</items_brk4>
+                <dots_brk4>1</dots_brk4>
+                <center_brk4>0</center_brk4>
+                <stagePadding_brk4>0</stagePadding_brk4>
+            </sell_products>
+            <recently_viewed>
+                <status>1</status>
+                <title>Recently viewed products</title>
+                <show_price>1</show_price>
+                <show_addto>1</show_addto>
+                <show_wishlist>0</show_wishlist>
+                <show_compare>0</show_compare>
+                <random_sort>0</random_sort>
+                <max_items>15</max_items>
+                <nav>1</nav>
+                <dots>1</dots>
+                <center>0</center>
+                <items>5</items>
+                <loop>1</loop>
+                <margin>0</margin>
+                <stagePadding>0</stagePadding>
+                <lazyLoad>1</lazyLoad>
+                <autoplay>1</autoplay>
+                <autoplayTimeout>3000</autoplayTimeout>
+                <autoplayHoverPause>1</autoplayHoverPause>
+                <nav_brk1>0</nav_brk1>
+                <dots_brk1>1</dots_brk1>
+                <items_brk1>2</items_brk1>
+                <center_brk1>0</center_brk1>
+                <stagePadding_brk1>0</stagePadding_brk1>
+                <nav_brk2>0</nav_brk2>
+                <dots_brk2>1</dots_brk2>
+                <items_brk2>3</items_brk2>
+                <center_brk2>0</center_brk2>
+                <stagePadding_brk2>0</stagePadding_brk2>
+                <nav_brk3>0</nav_brk3>
+                <dots_brk3>1</dots_brk3>
+                <items_brk3>4</items_brk3>
+                <center_brk3>0</center_brk3>
+                <stagePadding_brk3>0</stagePadding_brk3>
+                <nav_brk4>1</nav_brk4>
+                <dots_brk4>1</dots_brk4>
+                <items_brk4>5</items_brk4>
+                <center_brk4>0</center_brk4>
+                <stagePadding_brk4>0</stagePadding_brk4>
+            </recently_viewed>
+            <related_products>
+                <status>1</status>
+                <title>Related products</title>
+                <max_items>15</max_items>
+                <nav>1</nav>
+                <dots>1</dots>
+                <center>0</center>
+                <items>5</items>
+                <loop>1</loop>
+                <margin>0</margin>
+                <stagePadding>0</stagePadding>
+                <lazyLoad>1</lazyLoad>
+                <autoplay>1</autoplay>
+                <autoplayTimeout>3000</autoplayTimeout>
+                <autoplayHoverPause>1</autoplayHoverPause>
+                <nav_brk1>0</nav_brk1>
+                <dots_brk1>1</dots_brk1>
+                <items_brk1>2</items_brk1>
+                <center_brk1>0</center_brk1>
+                <stagePadding_brk1>0</stagePadding_brk1>
+                <nav_brk2>0</nav_brk2>
+                <items_brk2>3</items_brk2>
+                <dots_brk2>1</dots_brk2>
+                <center_brk2>0</center_brk2>
+                <stagePadding_brk2>0</stagePadding_brk2>
+                <nav_brk3>0</nav_brk3>
+                <dots_brk3>1</dots_brk3>
+                <items_brk3>4</items_brk3>
+                <center_brk3>0</center_brk3>
+                <stagePadding_brk3>0</stagePadding_brk3>
+                <nav_brk4>1</nav_brk4>
+                <dots_brk4>1</dots_brk4>
+                <items_brk4>5</items_brk4>
+                <center_brk4>0</center_brk4>
+                <stagePadding_brk4>0</stagePadding_brk4>
+            </related_products>
+            <upsell_products>
+                <status>1</status>
+                <title>Upsell products</title>
+                <max_items>15</max_items>
+                <nav>1</nav>
+                <dots>1</dots>
+                <center>0</center>
+                <items>5</items>
+                <loop>1</loop>
+                <margin>0</margin>
+                <stagePadding>0</stagePadding>
+                <lazyLoad>1</lazyLoad>
+                <autoplay>1</autoplay>
+                <autoplayTimeout>3000</autoplayTimeout>
+                <autoplayHoverPause>1</autoplayHoverPause>
+                <nav_brk1>0</nav_brk1>
+                <dots_brk1>1</dots_brk1>
+                <items_brk1>2</items_brk1>
+                <center_brk1>0</center_brk1>
+                <stagePadding_brk1>0</stagePadding_brk1>
+                <nav_brk2>0</nav_brk2>
+                <dots_brk2>1</dots_brk2>
+                <items_brk2>3</items_brk2>
+                <center_brk2>0</center_brk2>
+                <stagePadding_brk2>0</stagePadding_brk2>
+                <nav_brk3>0</nav_brk3>
+                <dots_brk3>1</dots_brk3>
+                <items_brk3>4</items_brk3>
+                <center_brk3>0</center_brk3>
+                <stagePadding_brk3>0</stagePadding_brk3>
+                <nav_brk4>1</nav_brk4>
+                <dots_brk4>1</dots_brk4>
+                <items_brk4>5</items_brk4>
+                <center_brk4>0</center_brk4>
+                <stagePadding_brk4>0</stagePadding_brk4>
+            </upsell_products>
+            <crosssell_products>
+                <status>1</status>
+                <title>Cross sell products</title>
+                <max_items>15</max_items>
+                <nav>1</nav>
+                <dots>1</dots>
+                <center>0</center>
+                <items>5</items>
+                <loop>1</loop>
+                <margin>0</margin>
+                <stagePadding>0</stagePadding>
+                <lazyLoad>1</lazyLoad>
+                <autoplay>1</autoplay>
+                <autoplayTimeout>3000</autoplayTimeout>
+                <autoplayHoverPause>1</autoplayHoverPause>
+                <nav_brk1>0</nav_brk1>
+                <dots_brk1>1</dots_brk1>
+                <items_brk1>2</items_brk1>
+                <center_brk1>0</center_brk1>
+                <stagePadding_brk1>0</stagePadding_brk1>
+                <nav_brk2>0</nav_brk2>
+                <dots_brk2>1</dots_brk2>
+                <items_brk2>3</items_brk2>
+                <center_brk2>0</center_brk2>
+                <stagePadding_brk2>0</stagePadding_brk2>
+                <nav_brk3>0</nav_brk3>
+                <dots_brk3>1</dots_brk3>
+                <items_brk3>4</items_brk3>
+                <center_brk3>0</center_brk3>
+                <stagePadding_brk3>0</stagePadding_brk3>
+                <nav_brk4>1</nav_brk4>
+                <dots_brk4>1</dots_brk4>
+                <items_brk4>5</items_brk4>
+                <center_brk4>0</center_brk4>
+                <stagePadding_brk4>0</stagePadding_brk4>
+            </crosssell_products>
+        </weltpixel_owl_carousel_config>
+    </default>
+</config>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/frontend/di.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/frontend/di.xml
new file mode 100644
index 0000000000000000000000000000000000000000..42d8dedaaa6511a0ea74e3ed95d04b803bae7252
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/frontend/di.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <preference for="Magento\Catalog\Block\Product\ImageBuilder" type="WeltPixel\OwlCarouselSlider\Block\Product\ImageBuilder" />
+</config>
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/module.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/module.xml
new file mode 100644
index 0000000000000000000000000000000000000000..a57fd73e303e2bb8499c495a6ea44359d4d6da48
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/module.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="WeltPixel_OwlCarouselSlider" setup_version="1.0.5">
+        <sequence>
+            <module name="WeltPixel_Backend"/>
+        </sequence>
+    </module>
+</config>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/etc/widget.xml b/app/code/WeltPixel/OwlCarouselSlider/etc/widget.xml
new file mode 100644
index 0000000000000000000000000000000000000000..099b464f4c1e0ba3bcd2d67fc50d47dea0213010
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/etc/widget.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
+    <widget id="weltpixel_custom_slider" class="WeltPixel\OwlCarouselSlider\Block\Slider\Custom" placeholder_image="WeltPixel_OwlCarouselSlider::images/custom_widget_slider.png">
+        <label translate="true">WeltPixel - Custom Slider Widget</label>
+        <description>WeltPixel - Custom Slider Widget</description>
+        <parameters>
+            <parameter name="slider_id" xsi:type="select" source_model="WeltPixel\OwlCarouselSlider\Model\Config\Source\WidgetCustom" visible="true" sort_order="10" >
+                <label translate="true">Custom Slider</label>
+            </parameter>
+        </parameters>
+    </widget>
+
+    <widget id="weltpixel_products_slider" class="WeltPixel\OwlCarouselSlider\Block\Slider\Products" placeholder_image="WeltPixel_OwlCarouselSlider::images/product_widget_slider.png">
+        <label translate="true">WeltPixel - Products Carousel Widget</label>
+        <description>WeltPixel - Products Slider Widget</description>
+        <parameters>
+            <parameter name="products_type" xsi:type="select" source_model="WeltPixel\OwlCarouselSlider\Model\Config\Source\WidgetProducts" visible="true" sort_order="10" >
+                <label translate="true">Products Slider Type</label>
+            </parameter>
+        </parameters>
+    </widget>
+
+    <widget id="weltpixel_category_slider" class="WeltPixel\OwlCarouselSlider\Block\Slider\Category" placeholder_image="WeltPixel_OwlCarouselSlider::images/product_widget_slider.png">
+        <label translate="true">WeltPixel - Custom Category Product Carousel</label>
+        <description>WeltPixel - Category Slider Widget</description>
+        <parameters>
+            <parameter name="upgrade_to_pro_required"  xsi:type="text" visible="false" required="true" sort_order="5">
+            </parameter>
+            <parameter name="upgrade_to_pro" xsi:type="block" visible="true" required="true" sort_order="5">
+                <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Widget\UpgradeToPro" />
+            </parameter>
+        </parameters>
+    </widget>
+</widgets>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/i18n/en_US.csv b/app/code/WeltPixel/OwlCarouselSlider/i18n/en_US.csv
new file mode 100644
index 0000000000000000000000000000000000000000..9dcd8b1ab7bb74cd1bf2c88027136540b464c4f6
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/i18n/en_US.csv
@@ -0,0 +1,165 @@
+Banners,Banners
+"Add New Banner","Add New Banner"
+"Save Banner","Save Banner"
+"Close Window","Close Window"
+"Save and Continue Edit","Save and Continue Edit"
+"Save and Close","Save and Close"
+"Banner Details","Banner Details"
+Title,Title
+"Show Title","Show Title"
+Yes,Yes
+No,No
+Description,Description
+"Show Description","Show Description"
+Status,Status
+"Banner Status","Banner Status"
+Slider,Slider
+URL,URL
+"GA Promo ID","GA Promo ID"
+"GA Promo Name","GA Promo Name"
+"GA Promo Creative","GA Promo Creative"
+"GA Promo Position","GA Promo Position"
+Target,Target
+"Same Window","Same Window"
+"New Window Tab","New Window Tab"
+"Button Text","Button Text"
+"Insert the text which is displayed on the button. To display the button make sure you fill the URL filed also.","Insert the text which is displayed on the button. To display the button make sure you fill the URL filed also."
+"Banner Type","Banner Type"
+Video,Video
+Image,Image
+"Mobile Image","Mobile Image"
+"Create Custom Banner here","Create Custom Banner here"
+"Alt Text","Alt Text"
+"Banner Class","Banner Class"
+"Wrapper class name of the current banner. It can be used in Custom CSS field to style each banner from the slider. This is displayed only after you 
+                    saved the banner.","Wrapper class name of the current banner. It can be used in Custom CSS field to style each banner from the slider. This is displayed only after you 
+                    saved the banner."
+"Custom HTML Content","Custom HTML Content"
+"Custom CSS","Custom CSS"
+"Banner Valid From","Banner Valid From"
+"Valid From","Valid From"
+"Banner Valid To","Banner Valid To"
+"Valid To","Valid To"
+"Edit Banner '%1'","Edit Banner '%1'"
+"New Banner","New Banner"
+"Banner Information","Banner Information"
+"Banner ID","Banner ID"
+"Slider ID","Slider ID"
+Edit,Edit
+CSV,CSV
+XML,XML
+Excel,Excel
+Delete,Delete
+"Are you sure?","Are you sure?"
+"Change Status","Change Status"
+Sliders,Sliders
+"Add New Slider","Add New Slider"
+"Save Slider","Save Slider"
+"Create Banner","Create Banner"
+"You have to save the banner and close this window!","You have to save the banner and close this window!"
+"Banner Title","Banner Title"
+"Sort Order","Sort Order"
+"Slider Details","Slider Details"
+"Slider Status","Slider Status"
+"<strong>Slider General Configuration</strong>","<strong>Slider General Configuration</strong>"
+"Next/Prev Buttons","Next/Prev Buttons"
+True,True
+False,False
+Dots,Dots
+"Banner Transition Effect","Banner Transition Effect"
+"Center Item","Center Item"
+StagePadding,StagePadding
+Margin,Margin
+Items,Items
+Loop,Loop
+LazyLoad,LazyLoad
+Autoplay,Autoplay
+AutoplayTimeout,AutoplayTimeout
+AutoplayHoverPause,AutoplayHoverPause
+"Auto Height","Auto Height"
+"<strong>Slider Responsive Breakpoints.<br/>This configuration will overwrite the main slider options.</strong>","<strong>Slider Responsive Breakpoints.<br/>This configuration will overwrite the main slider options.</strong>"
+"Breakpoint 1","Breakpoint 1"
+"Breakpoint 2","Breakpoint 2"
+"Breakpoint 3","Breakpoint 3"
+"Breakpoint 4","Breakpoint 4"
+"Edit Slider '%1'","Edit Slider '%1'"
+"New Slider","New Slider"
+"Slider Information","Slider Information"
+"Change status","Change status"
+"General Carousel Settings","General Carousel Settings"
+"General Slider Settings","General Slider Settings"
+"Breakpoint ","Breakpoint "
+"Breakpoint Carousel Options","Breakpoint Carousel Options"
+"This configuration will overwrite the General Carousel Options.","This configuration will overwrite the General Carousel Options."
+"General Carousel Options","General Carousel Options"
+"<b style=""font-size: 16px""><a style=""font-size: 16px"" target=""_blank"" href=""https://www.weltpixel.com/owl-carousel-and-slider.html"">Upgrade to Pro version</a> to enable this functionality.</b>","<b style=""font-size: 16px""><a style=""font-size: 16px"" target=""_blank"" href=""https://www.weltpixel.com/owl-carousel-and-slider.html"">Upgrade to Pro version</a> to enable this functionality.</b>"
+"Delete successfully!","Delete successfully!"
+"Please select banner(s).","Please select banner(s)."
+"A total of %1 banner(s) have been deleted.","A total of %1 banner(s) have been deleted."
+"A total of %1 banner(s) status have been changed.","A total of %1 banner(s) status have been changed."
+"The banner has been saved.","The banner has been saved."
+"Something went wrong while saving the banner.","Something went wrong while saving the banner."
+"Delete successfully !","Delete successfully !"
+"This slider no longer exists.","This slider no longer exists."
+"Please select slider(s).","Please select slider(s)."
+"A total of %1 slider(s) have been deleted.","A total of %1 slider(s) have been deleted."
+"A total of %1 slider(s) status have been changed.","A total of %1 slider(s) status have been changed."
+"The slider has been saved.","The slider has been saved."
+"Something went wrong while saving the slider.","Something went wrong while saving the slider."
+"--- Please select a slider ---","--- Please select a slider ---"
+Custom,Custom
+"Default Magento","Default Magento"
+"Specific Category","Specific Category"
+"Default Magento & Specific Category","Default Magento & Specific Category"
+"Select Custom Slider...","Select Custom Slider..."
+"Select Products Slider...","Select Products Slider..."
+"New Products","New Products"
+"Best-sell Products","Best-sell Products"
+"Sale Products","Sale Products"
+"Recently Viewed","Recently Viewed"
+Slide,Slide
+Fade,Fade
+Enabled,Enabled
+Disabled,Disabled
+"Related Products","Related Products"
+"We found other products you might like!","We found other products you might like!"
+"More Choices:","More Choices:"
+"Check items to add to the cart or","Check items to add to the cart or"
+"select all","select all"
+"Add to Cart","Add to Cart"
+"In stock","In stock"
+"Out of stock","Out of stock"
+"Add to Wish List","Add to Wish List"
+"Add to Compare","Add to Compare"
+"View More","View More"
+"OWL Product Carousels","OWL Product Carousels"
+"General Configuration for OWL Product Carousels and Banner Sliders","General Configuration for OWL Product Carousels and Banner Sliders"
+"Display wishlist","Display wishlist"
+"Display compare","Display compare"
+"New Products Carousel Settings","New Products Carousel Settings"
+"Enable Carousel","Enable Carousel"
+"Show Price","Show Price"
+"Show Add To Cart","Show Add To Cart"
+"Show Wishlist","Show Wishlist"
+"Show Compare","Show Compare"
+"Random Sort","Random Sort"
+"Max Items","Max Items"
+Center,Center
+"Best Sell Products Carousel Settings","Best Sell Products Carousel Settings"
+"Sale Products Carousel Settings","Sale Products Carousel Settings"
+"Recently Viewed Products Carousel Settings","Recently Viewed Products Carousel Settings"
+"Related Products Carousel Settings","Related Products Carousel Settings"
+"Up-Sells Products Carousel Settings","Up-Sells Products Carousel Settings"
+"Cross-Sell Products Carousel Settings","Cross-Sell Products Carousel Settings"
+"Custom Category Products Carousel Settings","Custom Category Products Carousel Settings"
+"Owl Slider","Owl Slider"
+"General Settings","General Settings"
+"Enable Google Analytics Tracking","Enable Google Analytics Tracking"
+"Enable Hover Image on products","Enable Hover Image on products"
+"Mobile Breakpoint","Mobile Breakpoint"
+" <b style=""font-size: 16px""><a style=""font-size: 16px"" target=""_blank"" href=""https://www.weltpixel.com/owl-carousel-and-slider.html"">Upgrade to Pro version</a> to enable this functionality.</b> "," <b style=""font-size: 16px""><a style=""font-size: 16px"" target=""_blank"" href=""https://www.weltpixel.com/owl-carousel-and-slider.html"">Upgrade to Pro version</a> to enable this functionality.</b> "
+"WeltPixel - Custom Slider Widget","WeltPixel - Custom Slider Widget"
+"Custom Slider","Custom Slider"
+"WeltPixel - Products Carousel Widget","WeltPixel - Products Carousel Widget"
+"Products Slider Type","Products Slider Type"
+"WeltPixel - Custom Category Product Carousel","WeltPixel - Custom Category Product Carousel"
diff --git a/app/code/WeltPixel/OwlCarouselSlider/registration.php b/app/code/WeltPixel/OwlCarouselSlider/registration.php
new file mode 100644
index 0000000000000000000000000000000000000000..7dade501119cdb4e0b2a056f883cd744f855ca4e
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/registration.php
@@ -0,0 +1,7 @@
+<?php
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'WeltPixel_OwlCarouselSlider',
+    __DIR__
+);
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_edit.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_edit.xml
new file mode 100644
index 0000000000000000000000000000000000000000..436681027ff0470105c324a90ebeb0ad44c12726
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_edit.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <title>WeltPixel Banners Manager</title>
+    </head>
+    <body>
+        <referenceBlock name="menu">
+            <action method="setActive">
+                <argument name="itemId" xsi:type="string">WeltPixel_OwlCarouselSlider::OwlCarouselBanners</argument>
+            </action>
+        </referenceBlock>
+        <referenceContainer name="content">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Edit" name="banner_edit"/>
+        </referenceContainer>
+        <referenceContainer name="left">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Edit\Tabs" name="banner_edit_tabs">
+            <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Edit\Tab\Banner" name="banner_edit_tab_banner"/>
+        	<action method="addTab">
+                <argument name="name" xsi:type="string">main_section</argument>
+                <argument name="block" xsi:type="string">banner_edit_tab_banner</argument>
+            </action>
+        </block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_grid.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_grid.xml
new file mode 100644
index 0000000000000000000000000000000000000000..bd9ecd6c6ac1cecefad34d2653d9787e3e4a7be0
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_grid.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
+    <update handle="formkey"/>
+    <container name="root">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner\Grid" name="admin.block.banner.grid"/>
+    </container>
+</layout>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_index.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_index.xml
new file mode 100644
index 0000000000000000000000000000000000000000..fef7bb917fc424cf63930cdbec02e4c6a3e3765a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_index.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="formkey"/>
+    <head>
+    	<title>WeltPixel Banners Manager</title>
+    </head>
+    <body>
+    	<referenceBlock name="menu">
+    	    <action method="setActive">
+    	        <argument name="itemId" xsi:type="string">WeltPixel_OwlCarouselSlider::OwlCarouselBanners</argument>
+    	    </action>
+    	</referenceBlock>
+    	<referenceBlock name="page.title">
+    	    <action method="setPageTitle">
+    	        <argument name="pageTitle" xsi:type="string">WeltPixel Banners Manager</argument>
+    	    </action>
+    	</referenceBlock>
+        <referenceContainer name="content">
+            <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner" name="admin.block.banner.grid.container"/>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_new.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_new.xml
new file mode 100644
index 0000000000000000000000000000000000000000..c5e494c9a64f3ab61e29ba09b65ef8bb49af560b
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_banner_new.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="weltowlcarousel_banner_edit"/>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_index_index.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_index_index.xml
new file mode 100644
index 0000000000000000000000000000000000000000..41605c48d93c1e3681df4805af302d5c7d92efcb
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_index_index.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="formkey"/>
+    <body>
+          <referenceContainer name="content">
+            <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Banner" name="admin.block.banner.grid.container"/>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_banners.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_banners.xml
new file mode 100644
index 0000000000000000000000000000000000000000..7087d9f6691f34789c706b7591727de2377cd26a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_banners.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
+    <container name="root" label="Root">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tab\Banners" name="owlcarouselslider.slider.edit.tab.banners"/>
+        <block class="Magento\Backend\Block\Widget\Grid\Serializer" name="crosssell_grid_serializer">
+            <arguments>
+                <argument name="input_names" xsi:type="string">sort_order</argument>
+                <argument name="grid_block" xsi:type="string">owlcarouselslider.slider.edit.tab.banners</argument>
+                <argument name="callback" xsi:type="string">getSelectedSliderBanners</argument>
+                <argument name="input_element_name" xsi:type="string">slider_banner</argument>
+                <argument name="reload_param_name" xsi:type="string">banner</argument>
+            </arguments>
+        </block>
+    </container>
+</layout>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_bannersgrid.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_bannersgrid.xml
new file mode 100644
index 0000000000000000000000000000000000000000..81c7aa13a03712b57499ae459205edd47ebb0887
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_bannersgrid.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
+    <container name="root" label="Root">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tab\Banners" name="owlcarouselslider.slider.edit.tab.banners"/>
+    </container>
+</layout>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_edit.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_edit.xml
new file mode 100644
index 0000000000000000000000000000000000000000..25277d960da1a229b7109834b1e5cbc524b32ab7
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_edit.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <title>WeltPixel Sliders Manager</title>
+    </head>
+    <body>
+        <referenceBlock name="menu">
+            <action method="setActive">
+                <argument name="itemId" xsi:type="string">WeltPixel_OwlCarouselSlider::OwlCarouselSliders</argument>
+            </action>
+        </referenceBlock>
+        <referenceContainer name="content">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit" name="banner_edit"/>
+        </referenceContainer>
+        <referenceContainer name="left">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tabs" name="banner_edit_tabs">
+            <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Edit\Tab\Form" name="banner_edit_tab_form"/>
+        	<action method="addTab">
+                <argument name="name" xsi:type="string">main_section</argument>
+                <argument name="block" xsi:type="string">banner_edit_tab_form</argument>
+            </action>
+            <action method="addTab">
+                <argument name="name" xsi:type="string">banner_section</argument>
+                <argument name="block" xsi:type="array">
+                    <item name="label" xsi:type="string">Slider Banners</item>
+                    <item name="title" xsi:type="string">Slider Banners</item>
+                    <item name="url" xsi:type="helper" helper="WeltPixel\OwlCarouselSlider\Helper\Data::getSliderBannerUrl"></item>
+                    <item name="class" xsi:type="string">ajax</item>
+                </argument>
+            </action>
+        </block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_grid.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_grid.xml
new file mode 100644
index 0000000000000000000000000000000000000000..29049476af74836c2e3aba15f9887c757a040d8c
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_grid.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
+    <update handle="formkey"/>
+    <container name="root">
+        <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider\Grid" name="admin.block.slider.grid"/>
+    </container>
+</layout>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_index.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_index.xml
new file mode 100644
index 0000000000000000000000000000000000000000..030465949688b81b8f13d97c1e8bc04fde71d828
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_index.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="formkey"/>
+    <head>
+    	<title>WeltPixel Sliders Manager</title>
+    </head>
+    <body>
+    	<referenceBlock name="menu">
+    	    <action method="setActive">
+    	        <argument name="itemId" xsi:type="string">WeltPixel_OwlCarouselSlider::OwlCarouselSliders</argument>
+    	    </action>
+    	</referenceBlock>
+    	<referenceBlock name="page.title">
+    	    <action method="setPageTitle">
+    	        <argument name="pageTitle" xsi:type="string">Sliders Manager</argument>
+    	    </action>
+    	</referenceBlock>
+        <referenceContainer name="content">
+            <block class="WeltPixel\OwlCarouselSlider\Block\Adminhtml\Slider" name="admin.block.slider.grid.container"/>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_new.xml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_new.xml
new file mode 100644
index 0000000000000000000000000000000000000000..527aaeacc8f8f5676e53ab5ba3ed59e0a5175eb2
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/layout/weltowlcarousel_slider_new.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <update handle="weltowlcarousel_slider_edit"/>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/templates/form/renderer/fieldset/element.phtml b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/templates/form/renderer/fieldset/element.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..1e8eb090ce1ffeef28f62d5e5b146fd7e687abf8
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/templates/form/renderer/fieldset/element.phtml
@@ -0,0 +1,71 @@
+<?php
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+?>
+<?php
+/**
+ * @see \WeltPixel\OwlCarouselSlider\Block\Adminhtml\Form\Renderer\Fieldset\Element
+ */
+?>
+<?php
+/* @var $block \Magento\Backend\Block\Widget\Form\Renderer\Fieldset\Element */
+$element = $block->getElement();
+$note = $element->getNote() ? '<div class="note">' . $element->getNote() . '</div>' : '';
+$elementBeforeLabel = $element->getExtType() == 'checkbox' || $element->getExtType() == 'radio';
+$addOn = $element->getBeforeElementHtml() || $element->getAfterElementHtml();
+$fieldId = ($element->getHtmlId()) ? ' id="attribute-' . $element->getHtmlId() . '-container"' : '';
+$fieldClass = "field field-{$element->getId()} {$element->getCssClass()}";
+$fieldClass .= ($elementBeforeLabel) ? ' choice' : '';
+$fieldClass .= ($addOn) ? ' with-addon' : '';
+$fieldClass .= ($element->getRequired()) ? ' required' : '';
+$fieldClass .= ($note) ? ' with-note' : '';
+
+$fieldAttributes = $fieldId . ' class="' . $fieldClass . '" '
+    . $block->getUiId('form-field', $element->getId());
+?>
+
+<?php
+    $elementToggleCode = $element->getToggleCode() ? $element->getToggleCode()
+        : 'toggleValueElements(this, this.parentNode.parentNode.parentNode)';
+?>
+<?php if (!$element->getNoDisplay()): ?>
+    <?php if ($element->getType() == 'hidden'): ?>
+        <?php echo $element->getElementHtml() ?>
+    <?php else: ?>
+    <div<?php echo $fieldAttributes ?> data-attribute-code="<?php echo $element->getHtmlId() ?>"
+        data-apply-to="<?php echo $block->escapeHtml($this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode(
+            $element->hasEntityAttribute() ? $element->getEntityAttribute()->getApplyTo() : []
+        ))?>"
+        >
+        <?php if ($elementBeforeLabel): ?>
+            <?php echo $block->getElementHtml() ?>
+            <?php echo $element->getLabelHtml() ?>
+            <?php echo $note ?>
+        <?php else: ?>
+            <?php echo $element->getLabelHtml() ?>
+            <div class="control">
+                <?php echo($addOn) ? '<div class="addon">' . $block->getElementHtml() . '</div>' : $block->getElementHtml(); ?>
+                <?php echo $note ?>
+            </div>
+        <?php endif; ?>
+       
+    </div>
+    <?php endif; ?>
+<?php endif; ?>
+<script type="text/javascript">
+require(['jquery'],function ($) {
+    $('#<?php echo $element->getHtmlId() ?>_default').click(function(event) {
+        $('#<?php echo $element->getHtmlId() ?>').prop('disabled', $(this).prop('checked'));
+        $(this).val($(this).prop('checked'));
+        if(this.id == 'page_image_default') {
+            $('#page_image_delete').prop('disabled', $(this).prop('checked'));
+            $('#page_image_delete').next().toggleClass('disabled');
+        }
+    });
+});
+</script>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/web/images/custom_widget_slider.png b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/web/images/custom_widget_slider.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a41fbcd1992b28ee8a48e724f4bca0ff92c29dc
Binary files /dev/null and b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/web/images/custom_widget_slider.png differ
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/web/images/product_widget_slider.png b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/web/images/product_widget_slider.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3f88d392b5e7d02cd2d60cad8d252cd13009410
Binary files /dev/null and b/app/code/WeltPixel/OwlCarouselSlider/view/adminhtml/web/images/product_widget_slider.png differ
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/catalog_product_view.xml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/catalog_product_view.xml
new file mode 100644
index 0000000000000000000000000000000000000000..68e6e489f2c4b8244702817227b76aea83e63fbe
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/catalog_product_view.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="catalog.product.related">
+            <action method="setTemplate">
+                <argument name='template' xsi:type='string'>WeltPixel_OwlCarouselSlider::product/list/items.phtml</argument>
+            </action>
+        </referenceBlock>
+        <referenceBlock name="product.info.upsell">
+            <action method="setTemplate">
+                <argument name='template' xsi:type='string'>WeltPixel_OwlCarouselSlider::product/list/items.phtml</argument>
+            </action>
+        </referenceBlock>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/checkout_cart_index.xml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/checkout_cart_index.xml
new file mode 100644
index 0000000000000000000000000000000000000000..eae15753f0b4dac19da2c7a97aa8696a113b750c
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/checkout_cart_index.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="checkout.cart.crosssell">
+            <action method="setTemplate">
+                <argument name='template' xsi:type='string'>WeltPixel_OwlCarouselSlider::product/list/items.phtml</argument>
+            </action>
+        </referenceBlock>
+    </body>
+</page>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/default.xml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/default.xml
new file mode 100644
index 0000000000000000000000000000000000000000..4c3e9889780f06fc1d2c3c9227b22f4d36544a9f
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/layout/default.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="WeltPixel_OwlCarouselSlider::css/owl.carousel.css" />
+        <!--<css src="WeltPixel_OwlCarouselSlider::css/animate.css" />-->
+    </head>
+</page>
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/requirejs-config.js b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/requirejs-config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3ad2e28410571455e74dea4b6c3723d9c9f8303
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/requirejs-config.js
@@ -0,0 +1,16 @@
+var config = {
+    map: {
+        '*': {
+            owl_carousel: 'WeltPixel_OwlCarouselSlider/js/owl.carousel',
+            owl_config: 'WeltPixel_OwlCarouselSlider/js/owl.config'
+        }
+    },
+    shim: {
+        owl_carousel: {
+            deps: ['jquery']
+        },
+        owl_config: {
+            deps: ['jquery','owl_carousel']
+        }
+    }
+};
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/image.phtml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/image.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..8384f0cdb7601cc42a1b647efb84c678e3c8e058
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/image.phtml
@@ -0,0 +1,21 @@
+<?php
+/**
+ * Copyright © 2013-2017 Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+?>
+<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
+
+<img class="photo image <?php if ($block->getLazyLoad()): echo 'owl-lazy'; endif; ?>"
+    <?php /* @escapeNotVerified */ echo $block->getCustomAttributes(); ?>
+    <?php if (!$block->getLazyLoad()): ?>
+        src="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
+    <?php endif; ?>
+     width="<?php /* @escapeNotVerified */ echo $block->getWidth(); ?>"
+     height="<?php /* @escapeNotVerified */ echo $block->getHeight(); ?>"
+     alt="<?php /* @escapeNotVerified */ echo $block->stripTags($block->getLabel(), null, true); ?>"
+    <?php if ($block->getLazyLoad()): ?>
+        data-src="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
+        data-src-retina="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
+    <?php endif; ?>
+/>
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/image_with_borders.phtml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/image_with_borders.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..16eb3ff00e46735e31d5bb6b464c7730a15cefe3
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/image_with_borders.phtml
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Copyright © 2013-2017 Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+?>
+<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
+
+<span class="product-image-container"
+      style="width:<?php /* @escapeNotVerified */ echo $block->getWidth()?>px;">
+    <span class="product-image-wrapper"
+          style="padding-bottom: <?php /* @escapeNotVerified */ echo ($block->getRatio() * 100); ?>%;">
+        <img class="product-image-photo <?php if ($block->getLazyLoad()): echo 'owl-lazy'; endif; ?>"
+            <?php /* @escapeNotVerified */ echo $block->getCustomAttributes(); ?>
+            <?php if (!$block->getLazyLoad()): ?>
+                src="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
+            <?php endif ;?>
+             width="<?php /* @escapeNotVerified */ echo $block->getResizedImageWidth(); ?>"
+             height="<?php /* @escapeNotVerified */ echo $block->getResizedImageHeight(); ?>"
+             alt="<?php /* @escapeNotVerified */ echo $block->stripTags($block->getLabel(), null, true); ?>"
+            <?php if ($block->getLazyLoad()): ?>
+                data-src="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
+                data-src-retina="<?php /* @escapeNotVerified */ echo $block->getImageUrl(); ?>"
+            <?php endif; ?>
+        /></span>
+</span>
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/list/items.phtml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/list/items.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..b278a58de55a0493d8543a22b52f9692f2a2d9f6
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/product/list/items.phtml
@@ -0,0 +1,409 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/* @var $block \Magento\Catalog\Block\Product\AbstractProduct */
+?>
+
+<?php
+/* @var WeltPixel\OwlCarouselSlider\Helper\Products $helper */
+$helper = $this->helper('WeltPixel\OwlCarouselSlider\Helper\Products');
+$sliderConfiguration = $helper->getSliderConfiguration($block->getType());
+$sliderConfig = json_encode($sliderConfiguration);
+$helperCustom = $this->helper('WeltPixel\OwlCarouselSlider\Helper\Custom');
+$breakpointConfiguration = $helperCustom->getBreakpointConfiguration();
+$displaySocial = $helperCustom->getDisplaySocial();
+$breakpoint   = $breakpointConfiguration;
+$enableSlider = (array_key_exists('status', $sliderConfiguration) && $sliderConfiguration['status'] == 1) ? true : false ;
+$imageCreationOptions = [];
+if ($enableSlider) {
+    $imageCreationOptions['weltpixel_owlcarousel'] = true;
+    if ($sliderConfiguration['lazyLoad']) {
+        $imageCreationOptions['weltpixel_lazyLoad'] = true;
+    }
+}
+?>
+<?php
+switch ($type = $block->getType()) {
+
+    case 'related-rule':
+        if ($exist = $block->hasItems()) {
+            $type = 'related';
+            $class = $type;
+
+            $image = 'related_products_list';
+            $title = ($sliderConfiguration['title']) ? $sliderConfiguration['title'] : __('Related Products');
+            $items = $block->getAllItems();
+            $limit = $block->getPositionLimit();
+            $shuffle = (int) $block->isShuffled();
+            $canItemsAddToCart = $block->canItemsAddToCart();
+
+            $showWishlist = $displaySocial['display_wishlist'];
+            $showCompare = $displaySocial['display_compare'];
+            $showCart = false;
+            $templateType = null;
+            $description = false;
+        }
+        break;
+
+    case 'related':
+        /** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
+        if ($exist = $block->getItems()->getSize()) {
+            $type = 'related';
+            $class = $type;
+
+            $image = 'related_products_list';
+            $title = ($sliderConfiguration['title']) ? $sliderConfiguration['title'] : __('Related Products');
+            $items = $block->getItems();
+            $limit = 0;
+            $shuffle = 0;
+            $canItemsAddToCart = $block->canItemsAddToCart();
+
+            $showWishlist = $displaySocial['display_wishlist'];
+            $showCompare = $displaySocial['display_compare'];
+            $showCart = false;
+            $templateType = null;
+            $description = false;
+        }
+        break;
+
+    case 'upsell-rule':
+        if ($exist = $block->hasItems()) {
+            $type = 'upsell';
+            $class = $type;
+
+            $image = 'upsell_products_list';
+            $title = ($sliderConfiguration['title']) ? $sliderConfiguration['title'] : __('We found other products you might like!');
+            $items = $block->getAllItems();
+            $limit = $block->getPositionLimit();
+            $shuffle = (int) $block->isShuffled();
+
+            $showWishlist = $displaySocial['display_wishlist'];
+            $showCompare = $displaySocial['display_compare'];
+            $showCart = false;
+            $templateType = null;
+            $description = false;
+            $canItemsAddToCart = false;
+        }
+        break;
+
+    case 'upsell':
+        /** @var \Magento\Catalog\Block\Product\ProductList\Upsell $block */
+        if ($exist = count($block->getItemCollection()->getItems())) {
+            $type = 'upsell';
+            $class = $type;
+
+            $image = 'upsell_products_list';
+            $title = ($sliderConfiguration['title']) ? $sliderConfiguration['title'] : __('We found other products you might like!');
+            $items = $block->getItemCollection()->getItems();
+            $limit = $block->getItemLimit('upsell');
+            $shuffle = 0;
+
+            $showWishlist = $displaySocial['display_wishlist'];
+            $showCompare = $displaySocial['display_compare'];
+            $showCart = false;
+            $templateType = null;
+            $description = false;
+            $canItemsAddToCart = false;
+        }
+        break;
+
+    case 'crosssell-rule':
+        /** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
+        if ($exist = $block->hasItems()) {
+            $type = 'crosssell';
+            $class = $type;
+
+            $image = 'cart_cross_sell_products';
+            $title = ($sliderConfiguration['title']) ? $sliderConfiguration['title'] : __('More Choices:');
+            $items = $block->getItemCollection();
+
+            $showWishlist = $displaySocial['display_wishlist'];
+            $showCompare = $displaySocial['display_compare'];
+            $showCart = true;
+            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
+            $description = false;
+            $canItemsAddToCart = false;
+        }
+        break;
+
+    case 'crosssell':
+        /** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
+        if ($exist = $block->getItemCount()) {
+            $type = 'crosssell';
+            $class = $type;
+
+            $image = 'cart_cross_sell_products';
+            $title = ($sliderConfiguration['title']) ? $sliderConfiguration['title'] : __('More Choices:');
+            $items = $block->getItems();
+
+            $showWishlist = $displaySocial['display_wishlist'];
+            $showCompare = $displaySocial['display_compare'];
+            $showCart = true;
+            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
+            $description = false;
+            $canItemsAddToCart = false;
+        }
+        break;
+
+    case 'new':
+        if ($exist = $block->getProductCollection()) {
+            $type = 'new';
+            $mode = 'grid';
+            $type = $type . ' ' . $mode;
+
+            $class = 'widget' . ' ' . $type;
+
+            $image = 'new_products_content_widget_grid';
+            $title = ($sliderConfiguration['title']) ? $sliderConfiguration['title'] : __('New Products');
+            $items = $exist;
+
+            $showWishlist = $displaySocial['display_wishlist'];
+            $showCompare = $displaySocial['display_compare'];
+            $showCart = true;
+            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
+            $description = ($mode == 'list') ? true : false;
+            $canItemsAddToCart = false;
+        }
+        break;
+
+    case 'other':
+        break;
+}
+?>
+
+<?php if ($exist):?>
+
+<?php if ($type == 'related' || $type == 'upsell'): ?>
+<?php if ($type == 'related'): ?>
+<div class="block-margin block <?php /* @escapeNotVerified */ echo $class . !$enableSlider ? ' row' : ''; ?>" data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' data-limit="<?php /* @escapeNotVerified */ echo $limit; ?>" data-shuffle="<?php /* @escapeNotVerified */ echo $shuffle; ?>">
+    <?php else: ?>
+    <div class="block-margin block <?php /* @escapeNotVerified */ echo $class . !$enableSlider ? ' row' : ''; ?>" data-mage-init='{"upsellProducts":{}}' data-limit="<?php /* @escapeNotVerified */ echo $limit; ?>" data-shuffle="<?php /* @escapeNotVerified */ echo $shuffle; ?>">
+        <?php endif; ?>
+        <?php else: ?>
+        <div class="block <?php /* @escapeNotVerified */ echo $class; ?>">
+            <?php endif; ?>
+            <h3 class="block-title title">
+                <span id="block-<?php /* @escapeNotVerified */ echo $class?>-heading" role="heading" aria-level="2"><?php /* @escapeNotVerified */ echo $title; ?></span>
+            </h3>
+            <div class="block-content content" aria-labelledby="block-<?php /* @escapeNotVerified */ echo $class?>-heading">
+                <?php if ($type == 'related' && $canItemsAddToCart): ?>
+                    <div class="block-actions">
+                        <?php /* @escapeNotVerified */ echo __('Check items to add to the cart or') ?>
+                        <button type="button" class="action select" role="select-all"><span><?php /* @escapeNotVerified */ echo __('select all') ?></span></button>
+                    </div>
+                <?php endif; ?>
+                <div class="products wrapper grid products-grid products-<?php /* @escapeNotVerified */ echo $type; ?>">
+                    <ol class="products list items product-items<?php echo $enableSlider ? ' owl-carousel-products-' . $type : ''; ?>">
+                        <?php $product_item = $enableSlider ? '' : ' product-item'; ?>
+                        <?php $iterator = 1; ?>
+                        <?php foreach ($items as $_item): ?>
+                            <?php $available = ''; ?>
+                            <?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
+                                <?php if (!$_item->getRequiredOptions()): ?>
+                                    <?php $available = 'related-available'; ?>
+                                <?php endif; ?>
+                            <?php endif; ?>
+
+                            <?php if ($type == 'related' || $type == 'upsell'): ?>
+                                <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item" style="">' : '</li><li class="item product product-item" style="">' ?>
+                            <?php else: ?>
+                                <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
+                            <?php endif; ?>
+
+                            <div class="product-item-info <?php /* @escapeNotVerified */ echo $available; ?>">
+                                <?php /* @escapeNotVerified */ echo '<!-- ' . $image . '-->' ?>
+                                <a href="<?php /* @escapeNotVerified */ echo $block->getProductUrl($_item) ?>" class="product photo product-item-photo">
+                                    <?php echo $block->getImage($_item, $image, $imageCreationOptions)->toHtml(); ?>
+                                </a>
+                                <div class="product details product-item-details">
+                                    <strong class="product name product-item-name">
+                                        <a class="product-item-link" title="<?php echo $block->escapeHtml($_item->getName()) ?>" href="<?php /* @escapeNotVerified */ echo $block->getProductUrl($_item) ?>">
+                                            <?php echo $block->escapeHtml($_item->getName()) ?>
+                                        </a>
+                                    </strong>
+
+                                <?php /* @escapeNotVerified */ echo $block->getProductPrice($_item); ?>
+
+                                <?php if ($templateType): ?>
+                                    <?php echo $block->getReviewsSummaryHtml($_item, $templateType) ?>
+                                <?php endif; ?>
+
+                                <?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
+                                    <?php if (!$_item->getRequiredOptions()): ?>
+                                        <div class="field choice related">
+                                            <input type="checkbox" class="checkbox related" id="related-checkbox<?php /* @escapeNotVerified */ echo $_item->getId() ?>" name="related_products[]" value="<?php /* @escapeNotVerified */ echo $_item->getId() ?>" />
+                                            <label class="label" for="related-checkbox<?php /* @escapeNotVerified */ echo $_item->getId() ?>"><span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span></label>
+                                        </div>
+                                    <?php endif; ?>
+                                <?php endif; ?>
+
+                                <?php if ($showWishlist || $showCompare || $showCart): ?>
+                                    <div class="product actions product-item-actions">
+                                        <?php if ($showCart): ?>
+                                            <div class="actions-primary">
+                                                <?php if ($_item->isSaleable()): ?>
+                                                    <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
+                                                        <button class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($_item) ?>"}}' type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
+                                                            <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
+                                                        </button>
+                                                    <?php else: ?>
+                                                        <?php $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
+                                                        $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
+                                                        ?>
+                                                        <button class="action tocart primary"
+                                                                data-post='<?php /* @escapeNotVerified */ echo $postData; ?>'
+                                                                type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
+                                                            <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
+                                                        </button>
+                                                    <?php endif; ?>
+                                                <?php else: ?>
+                                                    <?php if ($_item->getIsSalable()): ?>
+                                                        <div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
+                                                    <?php else: ?>
+                                                        <div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
+                                                    <?php endif; ?>
+                                                <?php endif; ?>
+                                            </div>
+                                        <?php endif; ?>
+
+                                            <?php if ($showWishlist || $showCompare): ?>
+                                                <div class="secondary-addto-links actions-secondary" data-role="add-to-links">
+                                                    <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
+                                                        <a href="#" data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_item); ?>'  class="action towishlist" data-action="add-to-wishlist" title="<?php /* @escapeNotVerified */ echo __('Add to Wish List') ?>">
+                                                            <span><?php /* @escapeNotVerified */ echo __('Add to Wish List') ?></span>
+                                                        </a>
+                                                    <?php endif; ?>
+                                                    <?php if ($block->getAddToCompareUrl() && $showCompare): ?>
+                                                        <?php
+                                                        $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
+                                                        ?>
+                                                        <a href="#" class="action tocompare"
+                                                           data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_item);?>'
+                                                           data-role="add-to-links"
+                                                           title="<?php /* @escapeNotVerified */ echo __('Add to Compare'); ?>">
+                                                            <span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span>
+                                                        </a>
+                                                    <?php endif; ?>
+                                                </div>
+                                            <?php endif; ?>
+                                        </div>
+                                    <?php endif; ?>
+                                </div>
+                            </div>
+                            <?php echo($iterator == count($items)+1) ? '</li>' : '' ?>
+                        <?php endforeach ?>
+                    </ol>
+                    <?php if($enableSlider) : ?>
+					<div id="pre-div">
+						<div class="cssload-loader">
+							<div class="cssload-inner cssload-one"></div>
+							<div class="cssload-inner cssload-two"></div>
+							<div class="cssload-inner cssload-three"></div>
+						</div>
+					</div>
+					<?php endif; ?>
+                </div>
+            </div>
+        </div>
+        <?php endif;?>
+
+    <?php if($enableSlider) : ?>
+    <script>
+        require(['jquery', 'owl_carousel', 'owl_config' ],
+            function ($) {
+                $(document).ready(function() {
+                    var products_type = '<?php echo $type;?>',
+                        slider_config = <?php echo $sliderConfig; ?>,
+
+                        carouselElement = $('.owl-carousel-products-' + products_type),
+
+                        windowWidth = $(window).width(),
+                        carouselWidth = carouselElement.width(),
+                        carouselContainer = carouselWidth + 120,
+
+                        items = ((slider_config.items >= 0 && slider_config.items != null) ? slider_config.items : 2),
+
+                        stagePadding = slider_config.stagePadding != '' ? parseInt(slider_config.stagePadding) : 0,
+
+                        sPBrk_1 = slider_config.stagePadding_brk1 != '' ? parseInt(slider_config.stagePadding_brk1) : 0,
+                        sPBrk_2 = slider_config.stagePadding_brk2 != '' ? parseInt(slider_config.stagePadding_brk2) : 0,
+                        sPBrk_3 = slider_config.stagePadding_brk3 != '' ? parseInt(slider_config.stagePadding_brk3) : 0,
+                        sPBrk_4 = slider_config.stagePadding_brk4 != '' ? parseInt(slider_config.stagePadding_brk4) : 0;
+
+                         /** Lazyload bug when fewer items exist in the carousel then the ones displayed */
+                        carouselElement.on('initialized.owl.carousel', function(event){
+                            var scopeSize = event.page.size;
+                            for (var i = 0; i < scopeSize; i++){
+                                var imgsrc = $(event.target).find('.owl-item').eq(i).find('img').attr('data-src');
+                                $(event.target).find('.owl-item').eq(i).find('img').attr('src', imgsrc);
+                                $(event.target).find('.owl-item').eq(i).find('img').attr('style', 'opacity: 1;');
+                            }
+                        });
+
+                    carouselElement.owlCarousel({
+                        nav                 :parseInt(slider_config.nav) == 1 ? true : false,
+                        dots                :parseInt(slider_config.dots) == 1 ? true : false,
+                        center              :parseInt(slider_config.center) == 1 ? true : false,
+                        items               :items,
+                        loop                :parseInt(slider_config.loop) == 1 ? true : false,
+                        margin              :parseInt(slider_config.margin) != '' ? parseInt(slider_config.margin) : 0,
+                        stagePadding        :parseInt(slider_config.center) == 1 ? 0 : stagePadding,
+                        lazyLoad            :parseInt(slider_config.lazyLoad) == 1 ? true : false,
+                        autoplay            :parseInt(slider_config.autoplay) == 1 ? true : false,
+                        autoplayTimeout     :(slider_config.autoplayTimeout > 0 && slider_config.autoplayTimeout != null) ? parseInt(slider_config.autoplayTimeout) : 3000,
+                        autoplayHoverPause  :parseInt(slider_config.autoplayHoverPause) == 1 ? true : false,
+                        autoHeight          :false,
+
+
+                        responsive:{
+                            <?php echo $breakpoint['breakpoint_1']; ?>:{
+                                nav             :parseInt(slider_config.nav_brk1) == 1 ? true : false,
+                                dots            :parseInt(slider_config.dots_brk1) == 1 ? true : false,
+                                items           :(slider_config.items_brk1  >= 0 && slider_config.items_brk1 != null) ? parseInt(slider_config.items_brk1) : items,
+                                center          :parseInt(slider_config.center_brk1) == 1 ? true : false,
+                                stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_1,
+                            },
+                            <?php echo $breakpoint['breakpoint_2']; ?>:{
+                                nav             :parseInt(slider_config.nav_brk2) == 1 ? true : false,
+                                dots            :parseInt(slider_config.dots_brk2) == 1 ? true : false,
+                                items           :(slider_config.items_brk2  >= 0 && slider_config.items_brk2 != null) ? parseInt(slider_config.items_brk2) : items,
+                                center          :parseInt(slider_config.center_brk2) == 1 ? true : false,
+                                stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_2,
+                            },
+                            <?php echo $breakpoint['breakpoint_3']; ?>:{
+                                nav             :parseInt(slider_config.nav_brk3) == 1 ? true : false,
+                                dots            :parseInt(slider_config.dots_brk3) == 1 ? true : false,
+                                items           :(slider_config.items_brk3  >= 0 && slider_config.items_brk3 != null) ? parseInt(slider_config.items_brk3) : items,
+                                center          :parseInt(slider_config.center_brk3) == 1 ? true : false,
+                                stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_3,
+                            },
+                            <?php echo $breakpoint['breakpoint_4']; ?>:{
+                                nav             :parseInt(slider_config.nav_brk4) == 1 ? true : false,
+                                dots            :parseInt(slider_config.dots_brk4) == 1 ? true : false,
+                                items           :(slider_config.items_brk4  >= 0 && slider_config.items_brk4 != null) ? parseInt(slider_config.items_brk4) : items,
+                                center          :parseInt(slider_config.center_brk4) == 1 ? true : false,
+                                stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_4,
+                            }
+                        }
+                    });
+
+                    var carouselControls = carouselElement.find('.owl-nav');
+                    if (carouselContainer >= windowWidth) {
+                        carouselControls.find('.owl-prev').css({
+                            'left': 0,
+                            'top': -15
+                        });
+                        carouselControls.find('.owl-next').css({
+                            'right': 0,
+                            'top': -15
+                        });
+                    }
+                });
+            });
+    </script>
+    <?php endif;?>
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/sliders/custom.phtml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/sliders/custom.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..37b3bd0691b958beff202e6e12ad85f1116a88ba
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/sliders/custom.phtml
@@ -0,0 +1,223 @@
+<?php  /* @var \WeltPixel\OwlCarouselSlider\Block\Slider\Custom $this */ ?>
+
+<?php $sliderConfig  = $this->getSliderConfiguration(); ?>
+<?php $sliderGeneral = $sliderConfig['slider_config']; ?>
+<?php $enabled       = (array_key_exists('status', $sliderGeneral) && $sliderGeneral['status'] !=0) ? true : false; ?>
+
+<?php if ($enabled) : ?>
+
+    <?php
+    $sliderId     = $this->getData('slider_id');
+    $breakpoint   = $this->getBreakpointConfiguration();
+    $bannerConfig = $sliderConfig['banner_config'];
+    $sliderConfig = json_encode($sliderGeneral);
+    $mediaUrl     = $this->getMediaUrl();
+    $isGatEnabled = $this->isGatEnabled();
+    ?>
+    
+    <?php if ($sliderGeneral['show_title'] && trim($sliderGeneral['title'])) : ?>
+        <div class="content-heading">
+            <h2 class="title"><?php echo $sliderGeneral['title']; ?></h2>
+        </div>
+    <?php endif; ?>
+
+    <div class="custom-slider">
+        <div class="owl-carousel-custom-<?php echo $sliderId;?>">
+            <?php foreach($bannerConfig as $banner) : ?>
+                <?php
+                    $title = (array_key_exists('title', $banner) && $banner['title'] !='') ? $banner['title'] : false;
+                    $showTitle = array_key_exists('show_title', $banner) ? $banner['show_title'] : false;
+                    $description = (array_key_exists('description', $banner) && $banner['description'] !='')
+                        ? $banner['description'] : false;
+                    $showDescription = array_key_exists('show_description', $banner)
+                        ? $banner['show_description'] : false;
+                    $url = array_key_exists('url', $banner) ? $banner['url'] : null;
+                    $target = array_key_exists('target', $banner) ? $banner['target'] : '_blank';
+                    $bannerType = array_key_exists('banner_type', $banner) ? $banner['banner_type'] : '';
+                    $image = array_key_exists('image', $banner) ? $banner['image'] : '';
+                    $altText = array_key_exists('alt_text', $banner) ? $banner['alt_text'] : '';
+                    $video = array_key_exists('video', $banner) ? $banner['video'] : '';
+                    $custom = array_key_exists('custom', $banner) ? $banner['custom'] : '';
+                    $buttonText = array_key_exists('button_text', $banner) ? $banner['button_text'] : null;
+                    $customContent = array_key_exists('custom_content', $banner) ? $banner['custom_content'] : '';
+                    $customCss = array_key_exists('custom_css', $banner) ? $banner['custom_css'] : '';
+
+                    $gaPromoId = array_key_exists('ga_promo_id', $banner) ? $banner['ga_promo_id'] : '';
+                    $gaPromoName = array_key_exists('ga_promo_name', $banner) ? $banner['ga_promo_name'] : '';
+                    $gaPromoCreative = array_key_exists('ga_promo_creative', $banner) ? $banner['ga_promo_creative'] : '';
+                    $gaPromoPosition = array_key_exists('ga_promo_position', $banner) ? $banner['ga_promo_position'] : '';
+                ?>
+
+                    <div class="banner-item banner-<?php echo $banner['id']; ?>">
+                        <?php if ($bannerType == 1) : ?>
+                            <?php if (!$buttonText): ?>
+                                <?php if (isset($url)): ?>
+                                <a href="<?php echo $url; ?>" target="<?php echo $target; ?>"
+                                    <?php if($isGatEnabled):?>
+                                        data-track-promo-id="<?php echo $gaPromoId; ?>"
+                                        data-track-promo-name="<?php echo $gaPromoName; ?>"
+                                        data-track-promo-creative="<?php echo $gaPromoCreative; ?>"
+                                        data-track-promo-position="<?php echo $gaPromoPosition; ?>"
+                                    <?php endif;?>
+                                >
+                                <?php endif; ?>
+                                    <?php endif; ?>
+                                        <span class="banner-image">
+                                            <img
+                                                <?php if (!$sliderGeneral['lazyLoad']) : ?>
+                                                src="<?php echo $mediaUrl . $image; ?>"
+                                                <?php endif; ?>
+                                                 alt="<?php echo $altText; ?>" title="<?php echo $altText; ?>"
+                                                <?php echo $sliderGeneral['lazyLoad'] ? 'data-src="' . $mediaUrl
+                                                    . $image . '" data-src-retina="' . $mediaUrl . $image
+                                                    . '" class="owl-lazy"' : '' ?>
+                                            />
+                                        </span>
+                                    <?php if (!$buttonText): ?>
+                                <?php if (isset($url)): ?>
+                                </a>
+                                <?php endif; ?>
+                            <?php endif; ?>
+                        <?php elseif ($bannerType == 3) : ?>
+                            <?php if (!$buttonText): ?>
+                                <?php if ($url): ?>
+                                    <a href="<?php echo $url; ?>" target="<?php echo $target; ?>" >
+                                <?php endif; ?>
+                            <?php endif; ?>
+                                <span class="banner-custom">
+                                    <?php echo $custom; ?>
+                                </span>
+                            <?php if (!$buttonText): ?>
+                                <?php if ($url): ?>
+                                    </a>
+                                <?php endif; ?>
+                            <?php endif; ?>
+                        <?php elseif ($bannerType == 2) : ?>
+                            <span class="banner-video">
+                                <?php echo $video; ?>
+                            </span>
+                        <?php endif; ?>
+                        <div class="content_slider">
+                            <?php if ($showTitle && $title) : ?>
+                                <span class="banner-title"><?php echo $title; ?></span>
+                            <?php endif; ?>
+
+                            <?php if ($showDescription && $description) : ?>
+                                <span class="banner-description"><?php echo $description; ?></span>
+                            <?php endif; ?>
+
+                            <div class="buttons">
+                                <?php if ($buttonText && $url): ?>
+                                    <a class="action primary" href="<?php echo $url; ?>" target="<?php echo $target; ?>"
+                                        <?php if($isGatEnabled):?>
+                                            data-track-promo-id="<?php echo $gaPromoId; ?>"
+                                            data-track-promo-name="<?php echo $gaPromoName; ?>"
+                                            data-track-promo-creative="<?php echo $gaPromoCreative; ?>"
+                                            data-track-promo-position="<?php echo $gaPromoPosition; ?>"
+                                        <?php endif;?>
+                                    > <?php echo $buttonText; ?> </a>
+                                <?php endif; ?>
+                                <?php if ($customContent): ?>
+                                    <div class="clearfix"></div>
+                                    <div class="custom_content">
+                                        <?php echo $customContent; ?>
+                                        <?php if ($customCss): ?>
+                                            <style>
+                                                <?php echo $customCss; ?>
+                                            </style>
+                                        <?php endif; ?>
+                                    </div>
+                                <?php endif; ?>
+                            </div>
+                        </div>
+                    </div>
+
+            <?php endforeach; ?>
+        </div>
+        <div id="pre-div">
+            <div class="cssload-loader">
+                <div class="cssload-inner cssload-one"></div>
+                <div class="cssload-inner cssload-two"></div>
+                <div class="cssload-inner cssload-three"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        require(['jquery', 'owl_carousel', 'owl_config' ],
+            function ($) {
+                $(document).ready(function() {
+
+                    var slider_id = <?php echo $sliderId; ?>;
+                    var slider_config = <?php echo $sliderConfig; ?>;
+
+                    var items = ((slider_config.items >= 0 && slider_config.items != null) ? slider_config.items : 1);
+                    if(slider_config.transition != 'slide') {
+                        items = 1;
+                    }
+
+                    var stagePadding = slider_config.stagePadding != '' ? parseInt(slider_config.stagePadding) : 0;
+                    var animate_Out = slider_config.transition != 'fadeOut' ? true : false;
+
+                    /** Lazyload bug when fewer items exist in the carousel then the ones displayed */
+                    $('.owl-carousel-custom-'+slider_id).on('initialized.owl.carousel', function(event){
+                        var scopeSize = event.page.size;
+                        for (var i = 0; i < scopeSize; i++){
+                            var imgsrc = $(event.target).find('.owl-item').eq(i).find('img').attr('data-src');
+                            $(event.target).find('.owl-item').eq(i).find('img').attr('src', imgsrc);
+                            $(event.target).find('.owl-item').eq(i).find('img').attr('style', 'opacity: 1;');
+                        }
+                    });
+
+                    $('.owl-carousel-custom-'+slider_id).owlCarousel({
+                        nav               :parseInt(slider_config.nav) == 1 ? true : false,
+                        dots              :parseInt(slider_config.dots) == 1 ? true : false,
+                        center            :(slider_config.center == 1 && animate_Out) ? true : false,
+                        items             :items,
+                        loop              :parseInt(slider_config.loop) == 1 ? true : false,
+                        margin            :(slider_config.margin != '' && animate_Out) ? parseInt(slider_config.margin) : 0,
+                        stagePadding      :parseInt(slider_config.center) == 1 ? 0 : stagePadding,
+                        lazyLoad          :parseInt(slider_config.lazyLoad) == 1 ? true : false,
+                        autoplay          :parseInt(slider_config.autoplay) == 1 ? true : false,
+                        autoplayTimeout   :(parseInt(slider_config.autoplayTimeout) > 0 && slider_config.autoplayTimeout != null) ? parseInt(slider_config.autoplayTimeout) : 3000,
+                        autoplayHoverPause:parseInt(slider_config.autoplayHoverPause) == 1 ? true : false,
+                        autoHeight        :parseInt(slider_config.autoHeight) == 1 ? true : false,
+                        animateOut        :slider_config.transition == 'slide' ? false : slider_config.transition,
+
+
+                        responsive:{
+                            <?php echo $breakpoint['breakpoint_1']; ?>:{
+                                nav     :parseInt(slider_config.nav_brk1) == 1 ? true : false,
+                                items   :parseInt(slider_config.items_brk1  >= 0 ? slider_config.items_brk1 : 0),
+                            },
+                            <?php echo $breakpoint['breakpoint_2']; ?>:{
+                                nav     :parseInt(slider_config.nav_brk2) == 1 ? true : false,
+                                items   :parseInt(slider_config.items_brk2  >= 0 ? slider_config.items_brk2 : 0),
+                            },
+                            <?php echo $breakpoint['breakpoint_3']; ?>:{
+                                nav     :parseInt(slider_config.nav_brk3) == 1 ? true : false,
+                                items   :parseInt(slider_config.items_brk3  >= 0 ? slider_config.items_brk3 : 0),
+                            },
+                            <?php echo $breakpoint['breakpoint_4']; ?>:{
+                                nav     :parseInt(slider_config.nav_brk4) == 1 ? true : false,
+                                items   :parseInt(slider_config.items_brk4  >= 0 ? slider_config.items_brk4 : 0),
+                            }
+                        }
+                    });
+
+                    $('.owl-carousel-custom-'+slider_id).on('resized.owl.carousel', function (event) {
+                        var $that = $(this);
+                        setTimeout(function(){
+                            $that.find('.owl-height').css('height', $that.find('.owl-item.active').height());
+                        }, 100);
+                    });
+
+                    setTimeout(function(){
+                        var $that = $('.owl-carousel-custom-'+slider_id);
+                        $that.find('.owl-height').css('height', $that.find('.owl-item.active').height());
+                    }, 100);
+
+                });
+            });
+    </script>
+<?php endif; ?>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/sliders/products.phtml b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/sliders/products.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..180d05eb66c16fe1c13b30ff93ea47a6cec258ad
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/templates/sliders/products.phtml
@@ -0,0 +1,221 @@
+<?php /* @var \WeltPixel\OwlCarouselSlider\Block\Slider\Products $this */ ?>
+
+<?php $sliderData    = $this->getSliderConfiguration(); ?>
+<?php $enabled       = array_key_exists('status', $sliderData) ? $sliderData['status'] : ''; ?>
+<?php $showPrice     = array_key_exists('show_price', $sliderData) ? $sliderData['show_price'] : false; ?>
+<?php $showAddToCart = array_key_exists('show_addto', $sliderData) ? $sliderData['show_addto'] : false; ?>
+<?php $showWishlist  = (array_key_exists('show_wishlist', $sliderData) && $sliderData['show_wishlist'] !=0) ? true : false; ?>
+<?php $showCompare   = (array_key_exists('show_compare', $sliderData) && $sliderData['show_compare'] !=0) ? true : false; ?>
+<?php if(!$enabled){ return; } ?>
+
+<?php
+$products = $this->getProductCollection();
+
+if(!count($products)) { return; }
+
+$productsType = $this->getData('products_type');
+$sliderConfig = json_encode($sliderData);
+$sliderTitle  = array_key_exists('title', $sliderData) ? $sliderData['title'] : '';
+$breakpoint   = $this->getBreakpointConfiguration();
+
+?>
+
+<div class="custom-slider">
+    <?php if (trim($sliderTitle)) : ?>
+    <div class="content-heading">
+        <h2 class="title"><?php echo $sliderTitle; ?></h2>
+    </div>
+    <?php endif; ?>
+    <div class="owl-carousel-products-<?php echo $productsType;?> <?php echo count($products)== 1? 'owl-carousel-products-single-item': '';?>">
+        <?php foreach($products as $product) : ?>
+
+            <?php
+            $_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
+            $productImage = $_imagehelper->init($product, 'category_page_list')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(400)->getUrl();
+            $productUrl   =  $product->getUrlModel()->getUrl($product);
+            ?>
+
+            <div class="item product product-item">
+                <div data-container="product-grid" class="product-item-info">
+                    <a tabindex="-1" class="product photo product-item-photo" href="<?php echo $productUrl; ?>">
+                        <span style="width:240px;" class="product-image-container">
+                            <span style="padding-bottom: 125%;" class="product-image-wrapper">
+                                <img width="240" height="300"
+                                     alt="<?php echo $product->getName(); ?>"
+                                    <?php if (!$sliderData['lazyLoad']) : ?>
+                                     src="<?php echo $productImage; ?>"
+                                     <?php endif; ?>
+                                     class="product-image-photo <?php echo $sliderData['lazyLoad'] ? 'owl-lazy' : '' ?>"
+                                    <?php echo $sliderData['lazyLoad'] ? 'data-src="' . $productImage . '" data-src-retina="' . $productImage . '"' : '' ?>
+                                />
+                            </span>
+                        </span>
+                    </a>
+                    <div class="product details product-item-details">
+                        <strong class="product name product-item-name">
+                            <a href="<?php echo $productUrl; ?>" class="product-item-link">
+                                <?php echo $product->getName(); ?>
+                            </a>
+                        </strong>
+                        <?php if($showPrice) : ?>
+                            <?php /* @escapeNotVerified */ echo $this->getProductPrice($product); ?>
+                        <?php endif; ?>
+                        <div class="product-item-inner">
+                            <div class="product actions product-item-actions">
+
+                                <?php if($showAddToCart) : ?>
+                                    <div class="actions-primary">
+                                            <?php if ($product->isSaleable()): ?>
+                                                <?php if ($product->getTypeInstance()->hasRequiredOptions($product)): ?>
+                                                    <button class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($product) ?>"}}' type="button" title="<?php /* @escapeNotVerified */ echo __('View More') ?>">
+                                                        <span><?php /* @escapeNotVerified */ echo __('View More') ?></span>
+                                                    </button>
+                                                <?php else: ?>
+                                                    <?php $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
+                                                    $postData = $postDataHelper->getPostData($block->getAddToCartUrl($product), ['product' => $product->getEntityId()])
+                                                    ?>
+                                                    <button class="action tocart primary"
+                                                            data-post='<?php /* @escapeNotVerified */ echo $postData; ?>'
+                                                            type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
+                                                        <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
+                                                    </button>
+                                                <?php endif; ?>
+                                            <?php else: ?>
+                                                <?php if ($product->getIsSalable()): ?>
+                                                    <div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
+                                                <?php else: ?>
+                                                    <div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
+                                                <?php endif; ?>
+                                            <?php endif; ?>
+                                    </div>
+                                <?php endif; ?>
+
+                                <div class="actions-secondary" data-role="add-to-links">
+                                    <?php if ($showWishlist || $showCompare): ?>
+                                        <div class="secondary-addto-links actions-secondary" data-role="add-to-links">
+
+                                            <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
+                                                <a href="#" data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($product); ?>'  class="action towishlist" data-action="add-to-wishlist" title="<?php /* @escapeNotVerified */ echo __('Add to Wish List') ?>">
+                                                    <span><?php /* @escapeNotVerified */ echo __('Add to Wish List') ?></span>
+                                                </a>
+                                            <?php endif; ?>
+
+                                            <?php if ($block->getAddToCompareUrl() && $showCompare): ?>
+                                                <?php
+                                                $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
+                                                ?>
+                                                <a href="#" class="action tocompare"
+                                                   data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($product);?>'
+                                                   data-role="add-to-links"
+                                                   title="<?php /* @escapeNotVerified */ echo __('Add to Compare'); ?>">
+                                                    <span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span>
+                                                </a>
+                                            <?php endif; ?>
+                                        </div>
+                                    <?php endif; ?>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <?php endforeach; ?>
+    </div>
+    <div id="pre-div">
+        <div class="cssload-loader">
+            <div class="cssload-inner cssload-one"></div>
+            <div class="cssload-inner cssload-two"></div>
+            <div class="cssload-inner cssload-three"></div>
+        </div>
+    </div>
+</div>
+
+<script>
+    require(['jquery', 'owl_carousel', 'owl_config', 'owl_config' ],
+        function ($) {
+            $(document).ready(function(){
+                var products_type = '<?php echo $productsType;?>',
+                    slider_config = <?php echo $sliderConfig; ?>,
+
+                    carouselElement = $('.owl-carousel-products-' + products_type),
+
+                    items = ((slider_config.items >= 0 && slider_config.items != null) ? slider_config.items : 2),
+
+                    stagePadding = slider_config.stagePadding != '' ? parseInt(slider_config.stagePadding) : 0,
+
+                    sPBrk_1 = slider_config.stagePadding_brk1 != '' ? parseInt(slider_config.stagePadding_brk1) : 0,
+                    sPBrk_2 = slider_config.stagePadding_brk2 != '' ? parseInt(slider_config.stagePadding_brk2) : 0,
+                    sPBrk_3 = slider_config.stagePadding_brk3 != '' ? parseInt(slider_config.stagePadding_brk3) : 0,
+                    sPBrk_4 = slider_config.stagePadding_brk4 != '' ? parseInt(slider_config.stagePadding_brk4) : 0;
+
+                options = {
+                    nav                 :parseInt(slider_config.nav) == 1 ? true : false,
+                    dots                :parseInt(slider_config.dots) == 1 ? true : false,
+                    center              :parseInt(slider_config.center) == 1 ? true : false,
+                    items               :items,
+                    loop                :parseInt(slider_config.loop) == 1 ? true : false,
+                    margin              :parseInt(slider_config.margin) != '' ? parseInt(slider_config.margin) : 0,
+                    stagePadding        :parseInt(slider_config.center) == 1 ? 0 : stagePadding,
+                    lazyLoad            :parseInt(slider_config.lazyLoad) == 1 ? true : false,
+                    autoplay            :parseInt(slider_config.autoplay) == 1 ? true : false,
+                    autoplayTimeout     :(slider_config.autoplayTimeout > 0 && slider_config.autoplayTimeout != null) ? parseInt(slider_config.autoplayTimeout) : 3000,
+                    autoplayHoverPause  :parseInt(slider_config.autoplayHoverPause) == 1 ? true : false,
+                    autoHeight          :false,
+
+                    responsive:{
+                        <?php echo $breakpoint['breakpoint_1']; ?>:{
+                            nav             :parseInt(slider_config.nav_brk1) == 1 ? true : false,
+                            dots            :parseInt(slider_config.dots_brk1) == 1 ? true : false,
+                            items           :(slider_config.items_brk1  >= 0 && slider_config.items_brk1 != null) ? parseInt(slider_config.items_brk1) : items,
+                            center          :parseInt(slider_config.center_brk1) == 1 ? true : false,
+                            stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_1
+                        },
+                        <?php echo $breakpoint['breakpoint_2']; ?>:{
+                            nav             :parseInt(slider_config.nav_brk2) == 1 ? true : false,
+                            dots            :parseInt(slider_config.dots_brk2) == 1 ? true : false,
+                            items           :(slider_config.items_brk2  >= 0 && slider_config.items_brk2 != null) ? parseInt(slider_config.items_brk2) : items,
+                            center          :parseInt(slider_config.center_brk2) == 1 ? true : false,
+                            stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_2
+                        },
+                        <?php echo $breakpoint['breakpoint_3']; ?>:{
+                            nav             :parseInt(slider_config.nav_brk3) == 1 ? true : false,
+                            dots            :parseInt(slider_config.dots_brk3) == 1 ? true : false,
+                            items           :(slider_config.items_brk3  >= 0 && slider_config.items_brk3 != null) ? parseInt(slider_config.items_brk3) : items,
+                            center          :parseInt(slider_config.center_brk3) == 1 ? true : false,
+                            stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_3
+                        },
+                        <?php echo $breakpoint['breakpoint_4']; ?>:{
+                            nav             :parseInt(slider_config.nav_brk4) == 1 ? true : false,
+                            dots            :parseInt(slider_config.dots_brk4) == 1 ? true : false,
+                            items           :(slider_config.items_brk4  >= 0 && slider_config.items_brk4 != null) ? parseInt(slider_config.items_brk4) : items,
+                            center          :parseInt(slider_config.center_brk4) == 1 ? true : false,
+                            stagePadding    :parseInt(slider_config.center) == 1 ? 0 : sPBrk_4,
+							
+                        }
+                    }
+                };
+				
+				// workaround for owl carousel
+				// fix nav buttons display on load even when set as false
+				carouselElement.on('initialized.owl.carousel', function(event) {
+					setTimeout(function(){
+						carouselElement.trigger('next.owl.carousel');
+					}, 370);
+				});
+
+                /** Lazyload bug when fewer items exist in the carousel then the ones displayed */
+                carouselElement.on('initialized.owl.carousel', function(event){
+                    var scopeSize = event.page.size;
+                    for (var i = 0; i < scopeSize; i++){
+                        var imgsrc = $(event.target).find('.owl-item').eq(i).find('img').attr('data-src');
+                        $(event.target).find('.owl-item').eq(i).find('img').attr('src', imgsrc);
+                        $(event.target).find('.owl-item').eq(i).find('img').attr('style', 'opacity: 1;');
+                    }
+                });
+
+				carouselElement.owlCarousel(options);
+
+            });
+        });
+</script>
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/animate.css b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/animate.css
new file mode 100644
index 0000000000000000000000000000000000000000..7148b57658700ce6a493c016ab7c44d25a5e4cb8
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/animate.css
@@ -0,0 +1,3340 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.1
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2016 Daniel Eden
+ */
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0);
+  }
+}
+
+@keyframes bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+
+@-webkit-keyframes flash {
+  from, 50%, to {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  from, 50%, to {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  -webkit-animation-name: flash;
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+    transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+    transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+    transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+    transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.rubberBand {
+  -webkit-animation-name: rubberBand;
+  animation-name: rubberBand;
+}
+
+@-webkit-keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+@-webkit-keyframes headShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes headShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.headShake {
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-name: headShake;
+  animation-name: headShake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  from {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes wobble {
+  from {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes jello {
+  from, 11.1%, to {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  22.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+@keyframes jello {
+  from, 11.1%, to {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  22.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+.jello {
+  -webkit-animation-name: jello;
+  animation-name: jello;
+  -webkit-transform-origin: center;
+  transform-origin: center;
+}
+
+@-webkit-keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes bounceInDown {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes bounceInLeft {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes bounceInRight {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInUp {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+}
+
+@keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+    transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+    transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+  animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+@keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
+
+@-webkit-keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  -webkit-animation-name: zoomIn;
+  animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInDown {
+  -webkit-animation-name: zoomInDown;
+  animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInLeft {
+  -webkit-animation-name: zoomInLeft;
+  animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInRight {
+  -webkit-animation-name: zoomInRight;
+  animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInUp {
+  -webkit-animation-name: zoomInUp;
+  animation-name: zoomInUp;
+}
+
+@-webkit-keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.zoomOut {
+  -webkit-animation-name: zoomOut;
+  animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutDown {
+  -webkit-animation-name: zoomOutDown;
+  animation-name: zoomOutDown;
+}
+
+@-webkit-keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+    transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+    transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+.zoomOutLeft {
+  -webkit-animation-name: zoomOutLeft;
+  animation-name: zoomOutLeft;
+}
+
+@-webkit-keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+    transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+    transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+.zoomOutRight {
+  -webkit-animation-name: zoomOutRight;
+  animation-name: zoomOutRight;
+}
+
+@-webkit-keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutUp {
+  -webkit-animation-name: zoomOutUp;
+  animation-name: zoomOutUp;
+}
+
+@-webkit-keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.slideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/owl.carousel.css b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/owl.carousel.css
new file mode 100644
index 0000000000000000000000000000000000000000..2a4338f07c8a3179e26c57df4bdf92137e16b44a
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/owl.carousel.css
@@ -0,0 +1,553 @@
+.cms-page-view .product-item-info ,
+.cms-index-index .product-item-info{
+	width: inherit;
+}
+
+.products.products-grid,
+.custom-slider {
+	position: relative;
+	padding: 0 0 20px;
+}
+.extend_1,
+.owl-carousel .owl-controls .owl-nav .owl-prev,
+.owl-carousel .owl-controls .owl-nav .owl-next,
+.owl-carousel .owl-controls .owl-dot {
+	cursor: pointer;
+	cursor: hand;
+	user-select: none;
+}
+.owl-carousel {
+	display: none;
+	width: 100%;
+	position: relative;
+	z-index: 0;
+}
+.owl-carousel .animated {
+	animation-duration: 1000ms;
+	animation-fill-mode: both;
+}
+.owl-carousel .owl-animated-in {
+	z-index: 0;
+}
+.owl-carousel .owl-animated-out {
+	z-index: 1;
+}
+.owl-carousel .fadeOut {
+	animation-name: fadeOut;
+}
+.owl-carousel .owl-stage {
+	position: relative;
+}
+.owl-carousel .owl-stage:after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
+}
+.owl-carousel .owl-stage-outer {
+	position: relative;
+	overflow: hidden;
+	padding: 20px 0;
+}
+.owl-carousel.owl-loaded {
+	display: block;
+}
+.owl-carousel.owl-loading {
+	opacity: 0;
+	display: block;
+}
+.owl-carousel.owl-hidden {
+	opacity: 0;
+}
+.owl-carousel .owl-item {
+	position: relative;
+	min-height: 1px;
+	float: left;
+	user-select: none;
+}
+.owl-carousel .owl-item img {
+	display: block;
+	width: 100%;
+	transform-style: preserve-3d;
+}
+.owl-carousel .owl-item .owl-lazy {
+	/*opacity: 0;*/
+	transition: opacity 400ms ease;
+}
+.owl-carousel .owl-item .product-item {
+	width: 100% !important;
+}
+.owl-carousel .owl-grab {
+	cursor: move;
+	cursor: grab;
+}
+.owl-carousel.owl-rtl {
+	direction: rtl;
+}
+.owl-carousel.owl-rtl .owl-item {
+	float: right;
+}
+.owl-carousel .owl-video-wrapper {
+	position: relative;
+	height: 100%;
+	background: #000;
+}
+.owl-carousel .owl-video-play-icon {
+	position: absolute;
+	height: 80px;
+	width: 80px;
+	left: 50%;
+	top: 50%;
+	margin-left: -40px;
+	margin-top: -40px;
+	background: url(owl.video.play.png) no-repeat;
+	cursor: pointer;
+	z-index: 1;
+	transition: scale 100ms ease;
+}
+.owl-carousel .owl-video-play-icon:hover {
+	transition: scale(1.3, 1.3);
+}
+.owl-carousel .owl-video-playing .owl-video-tn {
+	display: none;
+}
+.owl-carousel .owl-video-playing .owl-video-play-icon {
+	display: none;
+}
+.owl-carousel .owl-video-tn {
+	opacity: 0;
+	height: 100%;
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	transition: opacity 400ms ease;
+}
+.owl-carousel .owl-video-frame {
+	position: relative;
+	z-index: 1;
+}
+.owl-carousel .owl-refresh .owl-item {
+	display: none;
+}
+.owl-carousel.owl-text-select-on .owl-item {
+	user-select: auto;
+}
+.owl-carousel .banner-item .content_slider {
+	position: absolute;
+	top: 25%;
+	left: 50px;
+	width: calc(100% - 120px);
+	z-index: 1;
+	color: #fff;
+}
+.owl-carousel .banner-item .content_slider .banner-title {
+	width: 100%;
+	color: #fff;
+	font-size: 32px;
+	text-transform: uppercase;
+	text-align: center;
+	display: inline-block;
+	clear: both;
+}
+.owl-carousel .banner-item .content_slider .banner-description {
+	width: 100%;
+	clear: both;
+	display: inline-block;
+	text-align: center;
+	padding: 15px 0;
+}
+.owl-carousel .banner-item .content_slider .buttons {
+	width: 100%;
+	clear: both;
+	display: inline-block;
+	text-align: center;
+}
+.owl-carousel .banner-item .content_slider .buttons a.action.primary {
+	margin: 10px;
+}
+.owl-carousel .banner-item .content_slider .buttons .custom_content {
+	margin: 10px 0 0;
+	text-align: center;
+}
+@-webkit-keyframes fadeOut {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes fadeOut {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+.owl-height {
+	transition: height 500ms ease-in-out;
+}
+.owl-theme .owl-controls {
+	text-align: center;
+	-webkit-tap-highlight-color: transparent;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-] {
+	color: #fff;
+	font-size: 14px;
+	margin: calc(-40px / 2) 0 0;
+	padding: 0;
+	background: rgba(255, 255, 255, 0.5);
+	display: inline-block;
+	cursor: pointer;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	position: absolute;
+	top: 50%;
+	width: 40px;
+	height: 40px;
+	text-indent: 100%;
+	overflow: hidden;
+}
+[class*=owl-carousel-products-].owl-theme .owl-controls .owl-nav [class*=owl-] {
+	background: transparent;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-].owl-prev {
+	left: 15px;
+}
+[class*=owl-carousel-products-].owl-theme .owl-controls .owl-nav [class*=owl-].owl-prev {
+	left: -55px;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-].owl-prev:before {
+	position: absolute;
+	top: 26px;
+	left: 8px;
+	z-index: 1;
+	width: 20px;
+	height: 1px;
+	content: "";
+	border-top: 2px solid #000;
+	transform: rotate(40deg);
+	border-radius: 20px;
+	text-indent: 0;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-].owl-prev:after {
+	position: absolute;
+	top: 14px;
+	left: 8px;
+	z-index: 1;
+	width: 20px;
+	height: 1px;
+	content: "";
+	border-top: 2px solid #000;
+	transform: rotate(-40deg);
+	border-radius: 20px;
+	text-indent: 0;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-].owl-next {
+	right: 15px;
+}
+[class*=owl-carousel-products-].owl-theme .owl-controls .owl-nav [class*=owl-].owl-next {
+	right: -55px;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-].owl-next:before {
+	position: absolute;
+	top: 14px;
+	right: 8px;
+	z-index: 1;
+	width: 20px;
+	height: 1px;
+	content: "";
+	border-top: 2px solid #000;
+	transform: rotate(40deg);
+	border-radius: 20px;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-].owl-next:after {
+	position: absolute;
+	top: 26px;
+	right: 8px;
+	z-index: 1;
+	width: 20px;
+	height: 1px;
+	content: "";
+	border-top: 2px solid #000;
+	transform: rotate(-40deg);
+	border-radius: 20px;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
+	background: #000000;
+	color: #fff;
+	text-decoration: none;
+}
+[class*=owl-carousel-products-].owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
+	background: transparent;
+	color: #000000;
+}
+.owl-theme .owl-controls .owl-nav [class*=owl-]:hover:before,
+.owl-theme .owl-controls .owl-nav [class*=owl-]:hover:after {
+	border-color: #fff;
+}
+[class*=owl-carousel-products-].owl-theme .owl-controls .owl-nav [class*=owl-]:hover:before,
+[class*=owl-carousel-products-].owl-theme .owl-controls .owl-nav [class*=owl-]:hover:after {
+	border-color: #000000;
+}
+.owl-theme .owl-controls .owl-nav .disabled {
+	opacity: .5;
+	cursor: default;
+}
+.owl-theme .owl-dots {
+	position: absolute;
+	width: 100%;
+	bottom: 20px;
+}
+[class*=owl-carousel-products-].owl-theme .owl-dots {
+	position: relative;
+	bottom: -20px;
+}
+.owl-theme .owl-dots .owl-dot {
+	display: inline-block;
+	zoom: 1;
+	*display: inline;
+}
+.owl-theme .owl-dots .owl-dot span {
+	width: 10px;
+	height: 10px;
+	margin: 5px 7px;
+	background: #d6d6d6;
+	display: block;
+	-webkit-backface-visibility: visible;
+	-webkit-transition: opacity 200ms ease;
+	-moz-transition: opacity 200ms ease;
+	-ms-transition: opacity 200ms ease;
+	-o-transition: opacity 200ms ease;
+	transition: opacity 200ms ease;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	border-radius: 30px;
+}
+.owl-theme .owl-dots .owl-dot:hover span {
+	background: #000000;
+}
+.owl-theme .owl-dots .owl-dot.active span {
+	background: #000000;
+}
+.no-js .owl-carousel {
+	display: block;
+}
+#pre-div {
+	background-color: #fff;
+	bottom: 0;
+	height: 100%;
+	width: 100%;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: 10000;
+}
+.cssload-loader {
+	position: absolute;
+	left: calc(50% - 31px);
+	top: calc(50% - 31px);
+	width: 62px;
+	height: 62px;
+	border-radius: 50%;
+	-o-border-radius: 50%;
+	-ms-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	-moz-border-radius: 50%;
+	perspective: 780px;
+}
+
+.cssload-inner {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	-o-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	border-radius: 50%;
+	-o-border-radius: 50%;
+	-ms-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	-moz-border-radius: 50%;
+}
+
+.cssload-inner.cssload-one {
+	left: 0%;
+	top: 0%;
+	animation: cssload-rotate-one 1.15s linear infinite;
+	-o-animation: cssload-rotate-one 1.15s linear infinite;
+	-ms-animation: cssload-rotate-one 1.15s linear infinite;
+	-webkit-animation: cssload-rotate-one 1.15s linear infinite;
+	-moz-animation: cssload-rotate-one 1.15s linear infinite;
+	border-bottom: 3px solid rgb(0,0,0);
+}
+
+.cssload-inner.cssload-two {
+	right: 0%;
+	top: 0%;
+	animation: cssload-rotate-two 1.15s linear infinite;
+	-o-animation: cssload-rotate-two 1.15s linear infinite;
+	-ms-animation: cssload-rotate-two 1.15s linear infinite;
+	-webkit-animation: cssload-rotate-two 1.15s linear infinite;
+	-moz-animation: cssload-rotate-two 1.15s linear infinite;
+	border-right: 3px solid rgb(0,0,0);
+}
+
+.cssload-inner.cssload-three {
+	right: 0%;
+	bottom: 0%;
+	animation: cssload-rotate-three 1.15s linear infinite;
+	-o-animation: cssload-rotate-three 1.15s linear infinite;
+	-ms-animation: cssload-rotate-three 1.15s linear infinite;
+	-webkit-animation: cssload-rotate-three 1.15s linear infinite;
+	-moz-animation: cssload-rotate-three 1.15s linear infinite;
+	border-top: 3px solid rgb(0,0,0);
+}
+
+
+
+
+
+
+
+@keyframes cssload-rotate-one {
+	0% {
+		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
+}
+
+@-o-keyframes cssload-rotate-one {
+	0% {
+		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
+}
+
+@-ms-keyframes cssload-rotate-one {
+	0% {
+		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
+}
+
+@-webkit-keyframes cssload-rotate-one {
+	0% {
+		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
+}
+
+@-moz-keyframes cssload-rotate-one {
+	0% {
+		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
+}
+
+@keyframes cssload-rotate-two {
+	0% {
+		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
+}
+
+@-o-keyframes cssload-rotate-two {
+	0% {
+		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
+}
+
+@-ms-keyframes cssload-rotate-two {
+	0% {
+		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
+}
+
+@-webkit-keyframes cssload-rotate-two {
+	0% {
+		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
+}
+
+@-moz-keyframes cssload-rotate-two {
+	0% {
+		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
+}
+
+@keyframes cssload-rotate-three {
+	0% {
+		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
+}
+
+@-o-keyframes cssload-rotate-three {
+	0% {
+		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
+}
+
+@-ms-keyframes cssload-rotate-three {
+	0% {
+		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
+}
+
+@-webkit-keyframes cssload-rotate-three {
+	0% {
+		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
+}
+
+@-moz-keyframes cssload-rotate-three {
+	0% {
+		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
+}
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/owl.video.play.png b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/owl.video.play.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d0218d4665113fc6cbde7126edf9662cc56108e
Binary files /dev/null and b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/owl.video.play.png differ
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/source/_extend.less b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/source/_extend.less
new file mode 100644
index 0000000000000000000000000000000000000000..f003f5da1983175e95989e66bbb9a6373af11f77
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/source/_extend.less
@@ -0,0 +1,32 @@
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
+	.columns {
+		display: block;
+		.column.main {
+			width: 100%;
+		}
+	}
+	.owl-carousel {
+		.owl-item {
+			.product-item {
+				.product-item-info {
+					background: none transparent !important;
+					box-shadow: none;
+					-o-box-shadow: none;
+					-ms-box-shadow: none;
+					-moz-box-shadow: none;
+					-webkit-box-shadow: none;
+				}
+			}
+		}
+	}
+}
+
+.clearfix {
+	*zoom: 1;
+	&:after {
+		content: '';
+		display: block;
+		clear: both;
+		height: 0;
+	}
+}
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/source/_module.less b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/source/_module.less
new file mode 100644
index 0000000000000000000000000000000000000000..a45760d299a0a03f40c27bcc389f7750f84208b9
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/css/source/_module.less
@@ -0,0 +1,679 @@
+//colors
+@black: #000;
+@white: #fff;
+@color_iron_approx: #d6d6d6;
+@color_mantle_approx: #869791;
+@dot_active: @black;
+@dot_border_active: 1px solid @black;
+//urls
+@url_0: url(owl.video.play.png);
+
+//@extend-elements
+//original selectors
+//.owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot
+.extend_1 {
+	cursor: pointer;
+	cursor: hand;
+	//Instead of the line below you could use @include user-select(@select)
+	user-select: none;
+}
+
+.products.products-grid,
+.custom-slider {
+	position: relative;
+	padding: 0 0 20px;
+}
+
+.owl-carousel.products {
+	display: none;
+	width: 100%;
+	position: relative;
+	z-index: 0;
+	.animated {
+		animation-duration: 1000ms;
+		animation-fill-mode: both;
+	}
+	.owl-animated-in {
+		z-index: 0;
+	}
+	.owl-animated-out {
+		z-index: 1;
+	}
+	.fadeOut {
+		animation-name: fadeOut;
+	}
+	.owl-stage {
+		position: relative;
+		&:after {
+			content: ".";
+			display: block;
+			clear: both;
+			visibility: hidden;
+			line-height: 0;
+			height: 0;
+		}
+	}
+	.owl-stage-outer {
+		position: relative;
+		overflow: hidden;
+		padding: 20px 0;
+	}
+	.owl-controls {
+		@size: 40px;
+		.owl-nav {
+			.owl-prev {
+				&:extend(.extend_1);
+			}
+			.owl-next {
+				&:extend(.extend_1);
+			}
+			&.fullscreen {
+				.owl-prev {
+					:root .catalog-product-view & {
+						width: @size !important;
+						top: 0 !important;
+						left: 0 !important;
+						background: none transparent !important;
+						&:hover {
+							background: none transparent !important;
+						}
+					}
+				}
+				.owl-next {
+					:root .catalog-product-view & {
+						width: @size !important;
+						top: 0 !important;
+						right: 0 !important;
+						background: none transparent !important;
+						&:hover {
+							background: none transparent !important;
+						}
+					}
+				}
+			}
+		}
+		.owl-dot {
+			&:extend(.extend_1);
+		}
+	}
+	&.owl-loaded {
+		display: block;
+	}
+	&.owl-loading {
+		opacity: 0;
+		display: block;
+	}
+	&.owl-hidden {
+		opacity: 0;
+	}
+	.owl-item {
+		position: relative;
+		min-height: 1px;
+		float: left;
+		//Instead of the line below you could use @include user-select(@select)
+		user-select: none;
+		img {
+			display: block;
+			width: 100%;
+			//Instead of the line below you could use @include transform-style(@style)
+			transform-style: preserve-3d;
+		}
+		.owl-lazy {
+			opacity: 0;
+			//Instead of the line below you could use @include transition(@transition-1, @transition-2, @transition-3, @transition-4, @transition-5, @transition-6, @transition-7, @transition-8, @transition-9, @transition-10)
+			transition: opacity 400ms ease;
+		}
+		.product-item {
+			width: 100% !important;
+			.product-item-info {
+			}
+		}
+	}
+	.owl-grab {
+		cursor: move;
+		cursor: grab;
+	}
+	&.owl-rtl {
+		direction: rtl;
+		.owl-item {
+			float: right;
+		}
+	}
+	.owl-video-wrapper {
+		position: relative;
+		height: 100%;
+		background: @black;
+	}
+	.owl-video-play-icon {
+		position: absolute;
+		height: 80px;
+		width: 80px;
+		left: 50%;
+		top: 50%;
+		margin-left: -40px;
+		margin-top: -40px;
+		background: @url_0 no-repeat;
+		cursor: pointer;
+		z-index: 1;
+		//Instead of the line below you could use @include transition(@transition-1, @transition-2, @transition-3, @transition-4, @transition-5, @transition-6, @transition-7, @transition-8, @transition-9, @transition-10)
+		transition: scale 100ms ease;
+		&:hover {
+			//Instead of the line below you could use @include transition(@transition-1, @transition-2, @transition-3, @transition-4, @transition-5, @transition-6, @transition-7, @transition-8, @transition-9, @transition-10)
+			transition: scale(1.3, 1.3);
+		}
+	}
+	.owl-video-playing {
+		.owl-video-tn {
+			display: none;
+		}
+		.owl-video-play-icon {
+			display: none;
+		}
+	}
+	.owl-video-tn {
+		opacity: 0;
+		height: 100%;
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: contain;
+		//Instead of the line below you could use @include transition(@transition-1, @transition-2, @transition-3, @transition-4, @transition-5, @transition-6, @transition-7, @transition-8, @transition-9, @transition-10)
+		transition: opacity 400ms ease;
+	}
+	.owl-video-frame {
+		position: relative;
+		z-index: 1;
+	}
+	.owl-refresh .owl-item {
+		display: none;
+	}
+	&.owl-text-select-on .owl-item {
+		//Instead of the line below you could use @include user-select(@select)
+		user-select: auto;
+	}
+	.banner-item {
+		.content_slider {
+			position: absolute;
+			top: 25%;
+			left: 50px;
+			width: calc(~"100% - 120px");
+			z-index: 1;
+			color: @white;
+			.banner-title {
+				//position: absolute;
+				//top: 25%;
+				//left: 0;
+				width: 100%;
+				//z-index: 1;
+				color: @white;
+				font-size: 32px;
+				text-transform: uppercase;
+				text-align: center;
+				display: inline-block;
+				clear: both;
+			}
+			.banner-description {
+				width: 100%;
+				clear: both;
+				display: inline-block;
+				text-align: center;
+				padding: 15px 0;
+			}
+			.buttons {
+				width: 100%;
+				clear: both;
+				display: inline-block;
+				text-align: center;
+				a {
+					&.action.primary {
+						margin: 10px;
+					}
+				}
+				.custom_content {
+					margin: 10px 0 0;
+					text-align: center;
+				}
+			}
+		}
+
+	}
+	.product-item-details {
+		float: left;
+		width: 100%;
+	}
+}
+
+@-webkit-keyframes fadeOut {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes fadeOut {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+.owl-height {
+	//Instead of the line below you could use @include transition(@transition-1, @transition-2, @transition-3, @transition-4, @transition-5, @transition-6, @transition-7, @transition-8, @transition-9, @transition-10)
+	transition: height 500ms ease-in-out;
+}
+.owl-theme.owl-carousel {
+	.owl-controls {
+		.owl-dot {
+			display: inline-block;
+			zoom: 1;
+			*display: inline;
+			span {
+				width: 10px;
+				height: 10px;
+				margin: 5px 7px;
+				border:1px solid #d6d6d6;
+				background: white;
+				display: block;
+				-webkit-backface-visibility: visible;
+				-webkit-transition: opacity 200ms ease;
+				-moz-transition: opacity 200ms ease;
+				-ms-transition: opacity 200ms ease;
+				-o-transition: opacity 200ms ease;
+				transition: opacity 200ms ease;
+				-webkit-border-radius: 30px;
+				-moz-border-radius: 30px;
+				border-radius: 30px;
+			}
+			&:hover {
+				span {
+					background: @dot_active;
+				}
+			}
+		}
+		.owl-dot.active {
+			span {
+				background: @dot_active;
+				border: @dot_border_active;
+			}
+		}
+	}
+}
+
+.owl-theme {
+	.owl-controls {
+		//margin-top: 10px;
+		text-align: center;
+		-webkit-tap-highlight-color: transparent;
+		.owl-nav {
+			// [class*=owl-carousel-products-]
+			@size: 40px;
+			[class*=owl-] {
+				color: @white;
+				font-size: 14px;
+				margin: calc(~"-@size / 2") 0 0;
+				padding: 0;
+				background: rgba(255, 255, 255, .5);
+				display: inline-block;
+				cursor: pointer;
+				-webkit-border-radius: 3px;
+				-moz-border-radius: 3px;
+				border-radius: 3px;
+				position: absolute;
+				top: 50%;
+				width: 40px;
+				height: 40px;
+				text-indent: 100%;
+				overflow: hidden;
+
+				[class*=owl-carousel-products-] & {
+					background: transparent;
+				}
+				&.owl-prev {
+					left: 15px;
+					[class*=owl-carousel-products-] & {
+						left: -55px;
+					}
+					&:before {
+						position: absolute;
+						top: 26px;
+						left: 8px;
+						z-index: 1;
+						width: 20px;
+						height: 1px;
+						content: "";
+						border-top: 2px solid @black;
+						transform: rotate(40deg);
+						border-radius: 20px;
+						text-indent: 0;
+					}
+					&:after {
+						position: absolute;
+						top: 14px;
+						left: 8px;
+						z-index: 1;
+						width: 20px;
+						height: 1px;
+						content: "";
+						border-top: 2px solid @black;
+						transform: rotate(-40deg);
+						border-radius: 20px;
+						text-indent: 0;
+					}
+				}
+				&.owl-next {
+					right: 15px;
+					[class*=owl-carousel-products-] & {
+						right: -55px;
+					}
+					&:before {
+						position: absolute;
+						top: 14px;
+						right: 8px;
+						z-index: 1;
+						width: 20px;
+						height: 1px;
+						content: "";
+						border-top: 2px solid @black;
+						transform: rotate(40deg);
+						border-radius: 20px;
+					}
+					&:after {
+						position: absolute;
+						top: 26px;
+						right: 8px;
+						z-index: 1;
+						width: 20px;
+						height: 1px;
+						content: "";
+						border-top: 2px solid @black;
+						transform: rotate(-40deg);
+						border-radius: 20px;
+					}
+				}
+				&:hover {
+					background: @dot_active;
+					color: @white;
+					text-decoration: none;
+					[class*=owl-carousel-products-] & {
+						background: transparent;
+						color: @dot_active;
+					}
+					&:before,
+					&:after {
+						border-color: @white;
+						[class*=owl-carousel-products-] & {
+							border-color: @dot_active;
+						}
+					}
+				}
+			}
+			.disabled {
+				opacity: .5;
+				cursor: default;
+			}
+		}
+	}
+	.owl-dots {
+		position: absolute;
+		width: 100%;
+		bottom: 20px;
+		[class*=owl-carousel-products-] & {
+			position: relative;
+			bottom: -20px;
+		}
+	}
+}
+
+
+
+.no-js .owl-carousel {
+	display: block;
+}
+
+#pre-div {
+	background-color: @white;
+	bottom: 0;
+	height: 100%;
+	width: 100%;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: 10000;
+	.cssload-loader {
+		position: relative;
+		left: calc(~"50% - 31px");
+		top: calc(~"50% - 31px");
+		width: 62px;
+		height: 62px;
+		border-radius: 50%;
+		-o-border-radius: 50%;
+		-ms-border-radius: 50%;
+		-webkit-border-radius: 50%;
+		-moz-border-radius: 50%;
+		perspective: 780px;
+	}
+
+	.cssload-inner {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		-o-box-sizing: border-box;
+		-ms-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		border-radius: 50%;
+		-o-border-radius: 50%;
+		-ms-border-radius: 50%;
+		-webkit-border-radius: 50%;
+		-moz-border-radius: 50%;
+	}
+
+	.cssload-inner.cssload-one {
+		left: 0%;
+		top: 0%;
+		animation: cssload-rotate-one 1.15s linear infinite;
+		-o-animation: cssload-rotate-one 1.15s linear infinite;
+		-ms-animation: cssload-rotate-one 1.15s linear infinite;
+		-webkit-animation: cssload-rotate-one 1.15s linear infinite;
+		-moz-animation: cssload-rotate-one 1.15s linear infinite;
+		border-bottom: 3px solid rgb(0, 0, 0);
+	}
+
+	.cssload-inner.cssload-two {
+		right: 0%;
+		top: 0%;
+		animation: cssload-rotate-two 1.15s linear infinite;
+		-o-animation: cssload-rotate-two 1.15s linear infinite;
+		-ms-animation: cssload-rotate-two 1.15s linear infinite;
+		-webkit-animation: cssload-rotate-two 1.15s linear infinite;
+		-moz-animation: cssload-rotate-two 1.15s linear infinite;
+		border-right: 3px solid rgb(0, 0, 0);
+	}
+
+	.cssload-inner.cssload-three {
+		right: 0%;
+		bottom: 0%;
+		animation: cssload-rotate-three 1.15s linear infinite;
+		-o-animation: cssload-rotate-three 1.15s linear infinite;
+		-ms-animation: cssload-rotate-three 1.15s linear infinite;
+		-webkit-animation: cssload-rotate-three 1.15s linear infinite;
+		-moz-animation: cssload-rotate-three 1.15s linear infinite;
+		border-top: 3px solid rgb(0, 0, 0);
+	}
+
+	.catalog-product-view .product-items .product-item-actions .actions-secondary {
+		display: inline-block !important;
+	}
+	.catalog-product-view .product-items .product-item-actions .action.tocompare {
+		position: absolute !important;
+		right: 0 !important;
+	}
+	.catalog-product-view .product-items .product-item-actions .action.towishlist {
+		position: absolute !important;
+		left: 0 !important;
+	}
+
+	@keyframes cssload-rotate-one {
+		0% {
+			transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+		}
+		100% {
+			transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+		}
+	}
+
+	@-o-keyframes cssload-rotate-one {
+		0% {
+			-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+		}
+		100% {
+			-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+		}
+	}
+
+	@-ms-keyframes cssload-rotate-one {
+		0% {
+			-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+		}
+		100% {
+			-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+		}
+	}
+
+	@-webkit-keyframes cssload-rotate-one {
+		0% {
+			-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+		}
+		100% {
+			-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+		}
+	}
+
+	@-moz-keyframes cssload-rotate-one {
+		0% {
+			-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+		}
+		100% {
+			-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+		}
+	}
+
+	@keyframes cssload-rotate-two {
+		0% {
+			transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+		}
+		100% {
+			transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+		}
+	}
+
+	@-o-keyframes cssload-rotate-two {
+		0% {
+			-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+		}
+		100% {
+			-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+		}
+	}
+
+	@-ms-keyframes cssload-rotate-two {
+		0% {
+			-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+		}
+		100% {
+			-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+		}
+	}
+
+	@-webkit-keyframes cssload-rotate-two {
+		0% {
+			-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+		}
+		100% {
+			-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+		}
+	}
+
+	@-moz-keyframes cssload-rotate-two {
+		0% {
+			-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+		}
+		100% {
+			-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+		}
+	}
+
+	@keyframes cssload-rotate-three {
+		0% {
+			transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+		}
+		100% {
+			transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+		}
+	}
+
+	@-o-keyframes cssload-rotate-three {
+		0% {
+			-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+		}
+		100% {
+			-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+		}
+	}
+
+	@-ms-keyframes cssload-rotate-three {
+		0% {
+			-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+		}
+		100% {
+			-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+		}
+	}
+
+	@-webkit-keyframes cssload-rotate-three {
+		0% {
+			-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+		}
+		100% {
+			-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+		}
+	}
+
+	@-moz-keyframes cssload-rotate-three {
+		0% {
+			-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+		}
+		100% {
+			-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+		}
+	}
+}
+
+.catalog-product-view {
+	.column.main {
+		.block-content.content .block-actions {
+			.action.select {
+				margin-left: 10px;
+			}
+		}
+		.products-grid.products-related .product-item .product-item-info .product-item-details .field.choice.related {
+			width: 80px;
+			margin: 0 auto;
+			float: none;
+			position: static;
+		}
+	}
+}
+
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m){
+	.block-margin{
+		&.row{
+			margin-right: -15px !important;
+		}
+	}
+}
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/js/owl.carousel.js b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/js/owl.carousel.js
new file mode 100644
index 0000000000000000000000000000000000000000..f5fb5c7578ec96fa2c031522e0f48df3cfc4b721
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/js/owl.carousel.js
@@ -0,0 +1,3074 @@
+/**
+ * Owl carousel
+ * @version 2.0.0
+ * @author Bartosz Wojciechowski
+ * @license The MIT License (MIT)
+ * @todo Lazy Load Icon
+ * @todo prevent animationend bubling
+ * @todo itemsScaleUp
+ * @todo Test Zepto
+ * @todo stagePadding calculate wrong active classes
+ */
+define(["jquery"], // Require jquery
+	function($){
+		;(function($, window, document, undefined) {
+
+			var drag, state, e;
+
+			/**
+			 * Template for status information about drag and touch events.
+			 * @private
+			 */
+			drag = {
+				start: 0,
+				startX: 0,
+				startY: 0,
+				current: 0,
+				currentX: 0,
+				currentY: 0,
+				offsetX: 0,
+				offsetY: 0,
+				distance: null,
+				startTime: 0,
+				endTime: 0,
+				updatedX: 0,
+				targetEl: null
+			};
+
+			/**
+			 * Template for some status informations.
+			 * @private
+			 */
+			state = {
+				isTouch: false,
+				isScrolling: false,
+				isSwiping: false,
+				direction: false,
+				inMotion: false
+			};
+
+			/**
+			 * Event functions references.
+			 * @private
+			 */
+			e = {
+				_onDragStart: null,
+				_onDragMove: null,
+				_onDragEnd: null,
+				_transitionEnd: null,
+				_resizer: null,
+				_responsiveCall: null,
+				_goToLoop: null,
+				_checkVisibile: null
+			};
+
+			/**
+			 * Creates a carousel.
+			 * @class The Owl Carousel.
+			 * @public
+			 * @param {HTMLElement|jQuery} element - The element to create the carousel for.
+			 * @param {Object} [options] - The options
+			 */
+			function Owl(element, options) {
+
+				/**
+				 * Current settings for the carousel.
+				 * @public
+				 */
+				this.settings = null;
+
+				/**
+				 * Current options set by the caller including defaults.
+				 * @public
+				 */
+				this.options = $.extend({}, Owl.Defaults, options);
+
+				/**
+				 * Plugin element.
+				 * @public
+				 */
+				this.$element = $(element);
+
+				/**
+				 * Caches informations about drag and touch events.
+				 */
+				this.drag = $.extend({}, drag);
+
+				/**
+				 * Caches some status informations.
+				 * @protected
+				 */
+				this.state = $.extend({}, state);
+
+				/**
+				 * @protected
+				 * @todo Must be documented
+				 */
+				this.e = $.extend({}, e);
+
+				/**
+				 * References to the running plugins of this carousel.
+				 * @protected
+				 */
+				this._plugins = {};
+
+				/**
+				 * Currently suppressed events to prevent them from beeing retriggered.
+				 * @protected
+				 */
+				this._supress = {};
+
+				/**
+				 * Absolute current position.
+				 * @protected
+				 */
+				this._current = null;
+
+				/**
+				 * Animation speed in milliseconds.
+				 * @protected
+				 */
+				this._speed = null;
+
+				/**
+				 * Coordinates of all items in pixel.
+				 * @todo The name of this member is missleading.
+				 * @protected
+				 */
+				this._coordinates = [];
+
+				/**
+				 * Current breakpoint.
+				 * @todo Real media queries would be nice.
+				 * @protected
+				 */
+				this._breakpoint = null;
+
+				/**
+				 * Current width of the plugin element.
+				 */
+				this._width = null;
+
+				/**
+				 * All real items.
+				 * @protected
+				 */
+				this._items = [];
+
+				/**
+				 * All cloned items.
+				 * @protected
+				 */
+				this._clones = [];
+
+				/**
+				 * Merge values of all items.
+				 * @todo Maybe this could be part of a plugin.
+				 * @protected
+				 */
+				this._mergers = [];
+
+				/**
+				 * Invalidated parts within the update process.
+				 * @protected
+				 */
+				this._invalidated = {};
+
+				/**
+				 * Ordered list of workers for the update process.
+				 * @protected
+				 */
+				this._pipe = [];
+
+				$.each(Owl.Plugins, $.proxy(function(key, plugin) {
+					this._plugins[key[0].toLowerCase() + key.slice(1)]
+						= new plugin(this);
+				}, this));
+
+				$.each(Owl.Pipe, $.proxy(function(priority, worker) {
+					this._pipe.push({
+						'filter': worker.filter,
+						'run': $.proxy(worker.run, this)
+					});
+				}, this));
+
+				this.setup();
+				this.initialize();
+			}
+
+			/**
+			 * Default options for the carousel.
+			 * @public
+			 */
+			Owl.Defaults = {
+				items: 3,
+				loop: false,
+				center: false,
+
+				mouseDrag: true,
+				touchDrag: true,
+				pullDrag: true,
+				freeDrag: false,
+
+				margin: 0,
+				stagePadding: 0,
+
+				merge: false,
+				mergeFit: true,
+				autoWidth: false,
+
+				startPosition: 0,
+				rtl: false,
+
+				smartSpeed: 250,
+				fluidSpeed: false,
+				dragEndSpeed: false,
+
+				responsive: {},
+				responsiveRefreshRate: 200,
+				responsiveBaseElement: window,
+				responsiveClass: false,
+
+				fallbackEasing: 'swing',
+
+				info: false,
+
+				nestedItemSelector: false,
+				itemElement: 'div',
+				stageElement: 'div',
+
+				// Classes and Names
+				themeClass: 'owl-theme',
+				baseClass: 'owl-carousel',
+				itemClass: 'owl-item',
+				centerClass: 'center',
+				activeClass: 'active'
+			};
+
+			/**
+			 * Enumeration for width.
+			 * @public
+			 * @readonly
+			 * @enum {String}
+			 */
+			Owl.Width = {
+				Default: 'default',
+				Inner: 'inner',
+				Outer: 'outer'
+			};
+
+			/**
+			 * Contains all registered plugins.
+			 * @public
+			 */
+			Owl.Plugins = {};
+
+			/**
+			 * Update pipe.
+			 */
+			Owl.Pipe = [ {
+				filter: [ 'width', 'items', 'settings' ],
+				run: function(cache) {
+					cache.current = this._items && this._items[this.relative(this._current)];
+				}
+			}, {
+				filter: [ 'items', 'settings' ],
+				run: function() {
+					var cached = this._clones,
+						clones = this.$stage.children('.cloned');
+
+					if (clones.length !== cached.length || (!this.settings.loop && cached.length > 0)) {
+						this.$stage.children('.cloned').remove();
+						this._clones = [];
+					}
+				}
+			}, {
+				filter: [ 'items', 'settings' ],
+				run: function() {
+					var i, n,
+						clones = this._clones,
+						items = this._items,
+					// delta = this.settings.loop ? clones.length - Math.max(this.settings.items * 2, 4) : 0;
+						delta = this.settings.loop ? clones.length - Math.max(this.settings.items * 2, 3) : 0;
+
+					// for (i = 0, n = Math.abs(delta / 2); i < n; i++) {
+					for (i = 0, n = Math.floor(Math.abs(delta / 2)); i < n; i++) {
+						if (delta > 0) {
+							this.$stage.children().eq(items.length + clones.length - 1).remove();
+							clones.pop();
+							this.$stage.children().eq(0).remove();
+							clones.pop();
+						} else {
+							clones.push(clones.length / 2);
+							this.$stage.append(items[clones[clones.length - 1]].clone().addClass('cloned'));
+							clones.push(items.length - 1 - (clones.length - 1) / 2);
+							this.$stage.prepend(items[clones[clones.length - 1]].clone().addClass('cloned'));
+						}
+					}
+				}
+			}, {
+				filter: [ 'width', 'items', 'settings' ],
+				run: function() {
+					var rtl = (this.settings.rtl ? 1 : -1),
+						width = (this.width() / this.settings.items).toFixed(3),
+						coordinate = 0, merge, i, n;
+
+					this._coordinates = [];
+					for (i = 0, n = this._clones.length + this._items.length; i < n; i++) {
+						merge = this._mergers[this.relative(i)];
+						merge = (this.settings.mergeFit && Math.min(merge, this.settings.items)) || merge;
+						coordinate += (this.settings.autoWidth ? this._items[this.relative(i)].width() + this.settings.margin : width * merge) * rtl;
+
+						this._coordinates.push(coordinate);
+					}
+				}
+			}, {
+				filter: [ 'width', 'items', 'settings' ],
+				run: function() {
+					var i, n, width = (this.width() / this.settings.items).toFixed(3), css = {
+						'width': Math.abs(this._coordinates[this._coordinates.length - 1]) + this.settings.stagePadding * 2,
+						'padding-left': this.settings.stagePadding || '',
+						'padding-right': this.settings.stagePadding || ''
+					};
+
+					this.$stage.css(css);
+
+					css = { 'width': this.settings.autoWidth ? 'auto' : width - this.settings.margin };
+					css[this.settings.rtl ? 'margin-left' : 'margin-right'] = this.settings.margin;
+
+					if (!this.settings.autoWidth && $.grep(this._mergers, function(v) { return v > 1 }).length > 0) {
+						for (i = 0, n = this._coordinates.length; i < n; i++) {
+							css.width = Math.abs(this._coordinates[i]) - Math.abs(this._coordinates[i - 1] || 0) - this.settings.margin;
+							this.$stage.children().eq(i).css(css);
+						}
+					} else {
+						this.$stage.children().css(css);
+					}
+				}
+			}, {
+				filter: [ 'width', 'items', 'settings' ],
+				run: function(cache) {
+					cache.current && this.reset(this.$stage.children().index(cache.current));
+				}
+			}, {
+				filter: [ 'position' ],
+				run: function() {
+					this.animate(this.coordinates(this._current));
+				}
+			}, {
+				filter: [ 'width', 'position', 'items', 'settings' ],
+				run: function() {
+					var rtl = this.settings.rtl ? 1 : -1,
+						padding = this.settings.stagePadding * 2,
+						begin = this.coordinates(this.current()) + padding,
+						end = begin + this.width() * rtl,
+						inner, outer, matches = [], i, n;
+
+					for (i = 0, n = this._coordinates.length; i < n; i++) {
+						inner = this._coordinates[i - 1] || 0;
+						outer = Math.abs(this._coordinates[i]) + padding * rtl;
+
+						if ((this.op(inner, '<=', begin) && (this.op(inner, '>', end)))
+							|| (this.op(outer, '<', begin) && this.op(outer, '>', end))) {
+							matches.push(i);
+						}
+					}
+
+					this.$stage.children('.' + this.settings.activeClass).removeClass(this.settings.activeClass);
+					this.$stage.children(':eq(' + matches.join('), :eq(') + ')').addClass(this.settings.activeClass);
+
+					if (this.settings.center) {
+						this.$stage.children('.' + this.settings.centerClass).removeClass(this.settings.centerClass);
+						this.$stage.children().eq(this.current()).addClass(this.settings.centerClass);
+					}
+				}
+			} ];
+
+			/**
+			 * Initializes the carousel.
+			 * @protected
+			 */
+			Owl.prototype.initialize = function() {
+				this.trigger('initialize');
+
+				this.$element
+					.addClass(this.settings.baseClass)
+					.addClass(this.settings.themeClass)
+					.toggleClass('owl-rtl', this.settings.rtl);
+
+				// check support
+				this.browserSupport();
+
+				if (this.settings.autoWidth && this.state.imagesLoaded !== true) {
+					var imgs, nestedSelector, width;
+					imgs = this.$element.find('img');
+					nestedSelector = this.settings.nestedItemSelector ? '.' + this.settings.nestedItemSelector : undefined;
+					width = this.$element.children(nestedSelector).width();
+
+					if (imgs.length && width <= 0) {
+						this.preloadAutoWidthImages(imgs);
+						return false;
+					}
+				}
+
+				this.$element.addClass('owl-loading');
+
+				// create stage
+				this.$stage = $('<' + this.settings.stageElement + ' class="owl-stage"/>')
+					.wrap('<div class="owl-stage-outer">');
+
+				// append stage
+				this.$element.append(this.$stage.parent());
+
+				// append content
+				this.replace(this.$element.children().not(this.$stage.parent()));
+
+				// set view width
+				this._width = this.$element.width();
+
+				// update view
+				this.refresh();
+
+				this.$element.removeClass('owl-loading').addClass('owl-loaded');
+
+				// attach generic events
+				this.eventsCall();
+
+				// attach generic events
+				this.internalEvents();
+
+				// attach custom control events
+				this.addTriggerableEvents();
+
+				this.trigger('initialized');
+			};
+
+			/**
+			 * Setups the current settings.
+			 * @todo Remove responsive classes. Why should adaptive designs be brought into IE8?
+			 * @todo Support for media queries by using `matchMedia` would be nice.
+			 * @public
+			 */
+			Owl.prototype.setup = function() {
+				var viewport = this.viewport(),
+					overwrites = this.options.responsive,
+					match = -1,
+					settings = null;
+
+				if (!overwrites) {
+					settings = $.extend({}, this.options);
+				} else {
+					$.each(overwrites, function(breakpoint) {
+						if (breakpoint <= viewport && breakpoint > match) {
+							match = Number(breakpoint);
+						}
+					});
+
+					settings = $.extend({}, this.options, overwrites[match]);
+					delete settings.responsive;
+
+					// responsive class
+					if (settings.responsiveClass) {
+						this.$element.attr('class', function(i, c) {
+							return c.replace(/\b owl-responsive-\S+/g, '');
+						}).addClass('owl-responsive-' + match);
+					}
+				}
+
+				if (this.settings === null || this._breakpoint !== match) {
+					this.trigger('change', { property: { name: 'settings', value: settings } });
+					this._breakpoint = match;
+					this.settings = settings;
+					this.invalidate('settings');
+					this.trigger('changed', { property: { name: 'settings', value: this.settings } });
+				}
+			};
+
+			/**
+			 * Updates option logic if necessery.
+			 * @protected
+			 */
+			Owl.prototype.optionsLogic = function() {
+				// Toggle Center class
+				this.$element.toggleClass('owl-center', this.settings.center);
+
+				// if items number is less than in body
+				if (this.settings.loop && this._items.length < this.settings.items) {
+					this.settings.loop = false;
+				}
+
+				if (this.settings.autoWidth) {
+					this.settings.stagePadding = false;
+					this.settings.merge = false;
+				}
+			};
+
+			/**
+			 * Prepares an item before add.
+			 * @todo Rename event parameter `content` to `item`.
+			 * @protected
+			 * @returns {jQuery|HTMLElement} - The item container.
+			 */
+			Owl.prototype.prepare = function(item) {
+				var event = this.trigger('prepare', { content: item });
+
+				if (!event.data) {
+					event.data = $('<' + this.settings.itemElement + '/>')
+						.addClass(this.settings.itemClass).append(item)
+				}
+
+				this.trigger('prepared', { content: event.data });
+
+				return event.data;
+			};
+
+			/**
+			 * Updates the view.
+			 * @public
+			 */
+			Owl.prototype.update = function() {
+				var i = 0,
+					n = this._pipe.length,
+					filter = $.proxy(function(p) { return this[p] }, this._invalidated),
+					cache = {};
+
+				while (i < n) {
+					if (this._invalidated.all || $.grep(this._pipe[i].filter, filter).length > 0) {
+						this._pipe[i].run(cache);
+					}
+					i++;
+				}
+
+				this._invalidated = {};
+			};
+
+			/**
+			 * Gets the width of the view.
+			 * @public
+			 * @param {Owl.Width} [dimension=Owl.Width.Default] - The dimension to return.
+			 * @returns {Number} - The width of the view in pixel.
+			 */
+			Owl.prototype.width = function(dimension) {
+				dimension = dimension || Owl.Width.Default;
+				switch (dimension) {
+					case Owl.Width.Inner:
+					case Owl.Width.Outer:
+						return this._width;
+					default:
+						return this._width - this.settings.stagePadding * 2 + this.settings.margin;
+				}
+			};
+
+			/**
+			 * Refreshes the carousel primarily for adaptive purposes.
+			 * @public
+			 */
+			Owl.prototype.refresh = function() {
+				if (this._items.length === 0) {
+					return false;
+				}
+
+				var start = new Date().getTime();
+
+				this.trigger('refresh');
+
+				this.setup();
+
+				this.optionsLogic();
+
+				// hide and show methods helps here to set a proper widths,
+				// this prevents scrollbar to be calculated in stage width
+				this.$stage.addClass('owl-refresh');
+
+				this.update();
+
+				this.$stage.removeClass('owl-refresh');
+
+				this.state.orientation = window.orientation;
+
+				this.watchVisibility();
+
+				this.trigger('refreshed');
+			};
+
+			/**
+			 * Save internal event references and add event based functions.
+			 * @protected
+			 */
+			Owl.prototype.eventsCall = function() {
+				// Save events references
+				this.e._onDragStart = $.proxy(function(e) {
+					this.onDragStart(e);
+				}, this);
+				this.e._onDragMove = $.proxy(function(e) {
+					this.onDragMove(e);
+				}, this);
+				this.e._onDragEnd = $.proxy(function(e) {
+					this.onDragEnd(e);
+				}, this);
+				this.e._onResize = $.proxy(function(e) {
+					this.onResize(e);
+				}, this);
+				this.e._transitionEnd = $.proxy(function(e) {
+					this.transitionEnd(e);
+				}, this);
+				this.e._preventClick = $.proxy(function(e) {
+					this.preventClick(e);
+				}, this);
+			};
+
+			/**
+			 * Checks window `resize` event.
+			 * @protected
+			 */
+			Owl.prototype.onThrottledResize = function() {
+				window.clearTimeout(this.resizeTimer);
+				this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate);
+			};
+
+			/**
+			 * Checks window `resize` event.
+			 * @protected
+			 */
+			Owl.prototype.onResize = function() {
+				if (!this._items.length) {
+					return false;
+				}
+
+				if (this._width === this.$element.width()) {
+					return false;
+				}
+
+				if (this.trigger('resize').isDefaultPrevented()) {
+					return false;
+				}
+
+				this._width = this.$element.width();
+
+				this.invalidate('width');
+
+				this.refresh();
+
+				this.trigger('resized');
+			};
+
+			/**
+			 * Checks for touch/mouse drag event type and add run event handlers.
+			 * @protected
+			 */
+			Owl.prototype.eventsRouter = function(event) {
+				var type = event.type;
+
+				if (type === "mousedown" || type === "touchstart") {
+					this.onDragStart(event);
+				} else if (type === "mousemove" || type === "touchmove") {
+					this.onDragMove(event);
+				} else if (type === "mouseup" || type === "touchend") {
+					this.onDragEnd(event);
+				} else if (type === "touchcancel") {
+					this.onDragEnd(event);
+				}
+			};
+
+			/**
+			 * Checks for touch/mouse drag options and add necessery event handlers.
+			 * @protected
+			 */
+			Owl.prototype.internalEvents = function() {
+				var isTouch = isTouchSupport(),
+					isTouchIE = isTouchSupportIE();
+
+				if (this.settings.mouseDrag){
+					this.$stage.on('mousedown', $.proxy(function(event) { this.eventsRouter(event) }, this));
+					this.$stage.on('dragstart', function() { return false });
+					this.$stage.get(0).onselectstart = function() { return false };
+				} else {
+					this.$element.addClass('owl-text-select-on');
+				}
+
+				if (this.settings.touchDrag && !isTouchIE){
+					this.$stage.on('touchstart touchcancel', $.proxy(function(event) { this.eventsRouter(event) }, this));
+				}
+
+				// catch transitionEnd event
+				if (this.transitionEndVendor) {
+					this.on(this.$stage.get(0), this.transitionEndVendor, this.e._transitionEnd, false);
+				}
+
+				// responsive
+				if (this.settings.responsive !== false) {
+					this.on(window, 'resize', $.proxy(this.onThrottledResize, this));
+				}
+			};
+
+			/**
+			 * Handles touchstart/mousedown event.
+			 * @protected
+			 * @param {Event} event - The event arguments.
+			 */
+			Owl.prototype.onDragStart = function(event) {
+				var ev, isTouchEvent, pageX, pageY, animatedPos;
+
+				ev = event.originalEvent || event || window.event;
+
+				// prevent right click
+				if (ev.which === 3 || this.state.isTouch) {
+					return false;
+				}
+
+				if (ev.type === 'mousedown') {
+					this.$stage.addClass('owl-grab');
+				}
+
+				this.trigger('drag');
+				this.drag.startTime = new Date().getTime();
+				this.speed(0);
+				this.state.isTouch = true;
+				this.state.isScrolling = false;
+				this.state.isSwiping = false;
+				this.drag.distance = 0;
+
+				pageX = getTouches(ev).x;
+				pageY = getTouches(ev).y;
+
+				// get stage position left
+				this.drag.offsetX = this.$stage.position().left;
+				this.drag.offsetY = this.$stage.position().top;
+
+				if (this.settings.rtl) {
+					this.drag.offsetX = this.$stage.position().left + this.$stage.width() - this.width()
+						+ this.settings.margin;
+				}
+
+				// catch position // ie to fix
+				if (this.state.inMotion && this.support3d) {
+					animatedPos = this.getTransformProperty();
+					this.drag.offsetX = animatedPos;
+					this.animate(animatedPos);
+					this.state.inMotion = true;
+				} else if (this.state.inMotion && !this.support3d) {
+					this.state.inMotion = false;
+					return false;
+				}
+
+				this.drag.startX = pageX - this.drag.offsetX;
+				this.drag.startY = pageY - this.drag.offsetY;
+
+				this.drag.start = pageX - this.drag.startX;
+				this.drag.targetEl = ev.target || ev.srcElement;
+				this.drag.updatedX = this.drag.start;
+
+				// to do/check
+				// prevent links and images dragging;
+				if (this.drag.targetEl.tagName === "IMG" || this.drag.targetEl.tagName === "A") {
+					this.drag.targetEl.draggable = false;
+				}
+
+				$(document).on('mousemove.owl.dragEvents mouseup.owl.dragEvents touchmove.owl.dragEvents touchend.owl.dragEvents', $.proxy(function(event) {this.eventsRouter(event)},this));
+			};
+
+			/**
+			 * Handles the touchmove/mousemove events.
+			 * @todo Simplify
+			 * @protected
+			 * @param {Event} event - The event arguments.
+			 */
+			Owl.prototype.onDragMove = function(event) {
+				var ev, isTouchEvent, pageX, pageY, minValue, maxValue, pull;
+
+				if (!this.state.isTouch) {
+					return;
+				}
+
+				if (this.state.isScrolling) {
+					return;
+				}
+
+				ev = event.originalEvent || event || window.event;
+
+				pageX = getTouches(ev).x;
+				pageY = getTouches(ev).y;
+
+				// Drag Direction
+				this.drag.currentX = pageX - this.drag.startX;
+				this.drag.currentY = pageY - this.drag.startY;
+				this.drag.distance = this.drag.currentX - this.drag.offsetX;
+
+				// Check move direction
+				if (this.drag.distance < 0) {
+					this.state.direction = this.settings.rtl ? 'right' : 'left';
+				} else if (this.drag.distance > 0) {
+					this.state.direction = this.settings.rtl ? 'left' : 'right';
+				}
+				// Loop
+				if (this.settings.loop) {
+					if (this.op(this.drag.currentX, '>', this.coordinates(this.minimum())) && this.state.direction === 'right') {
+						this.drag.currentX -= (this.settings.center && this.coordinates(0)) - this.coordinates(this._items.length);
+					} else if (this.op(this.drag.currentX, '<', this.coordinates(this.maximum())) && this.state.direction === 'left') {
+						this.drag.currentX += (this.settings.center && this.coordinates(0)) - this.coordinates(this._items.length);
+					}
+				} else {
+					// pull
+					minValue = this.settings.rtl ? this.coordinates(this.maximum()) : this.coordinates(this.minimum());
+					maxValue = this.settings.rtl ? this.coordinates(this.minimum()) : this.coordinates(this.maximum());
+					pull = this.settings.pullDrag ? this.drag.distance / 5 : 0;
+					this.drag.currentX = Math.max(Math.min(this.drag.currentX, minValue + pull), maxValue + pull);
+				}
+
+				// Lock browser if swiping horizontal
+
+				if ((this.drag.distance > 8 || this.drag.distance < -8)) {
+					if (ev.preventDefault !== undefined) {
+						ev.preventDefault();
+					} else {
+						ev.returnValue = false;
+					}
+					this.state.isSwiping = true;
+				}
+
+				this.drag.updatedX = this.drag.currentX;
+
+				// Lock Owl if scrolling
+				if ((this.drag.currentY > 16 || this.drag.currentY < -16) && this.state.isSwiping === false) {
+					this.state.isScrolling = true;
+					this.drag.updatedX = this.drag.start;
+				}
+
+				this.animate(this.drag.updatedX);
+			};
+
+			/**
+			 * Handles the touchend/mouseup events.
+			 * @protected
+			 */
+			Owl.prototype.onDragEnd = function(event) {
+				var compareTimes, distanceAbs, closest;
+
+				if (!this.state.isTouch) {
+					return;
+				}
+
+				if (event.type === 'mouseup') {
+					this.$stage.removeClass('owl-grab');
+				}
+
+				this.trigger('dragged');
+
+				// prevent links and images dragging;
+				this.drag.targetEl.removeAttribute("draggable");
+
+				// remove drag event listeners
+
+				this.state.isTouch = false;
+				this.state.isScrolling = false;
+				this.state.isSwiping = false;
+
+				// to check
+				if (this.drag.distance === 0 && this.state.inMotion !== true) {
+					this.state.inMotion = false;
+					return false;
+				}
+
+				// prevent clicks while scrolling
+
+				this.drag.endTime = new Date().getTime();
+				compareTimes = this.drag.endTime - this.drag.startTime;
+				distanceAbs = Math.abs(this.drag.distance);
+
+				// to test
+				if (distanceAbs > 3 || compareTimes > 300) {
+					this.removeClick(this.drag.targetEl);
+				}
+
+				closest = this.closest(this.drag.updatedX);
+
+				this.speed(this.settings.dragEndSpeed || this.settings.smartSpeed);
+				this.current(closest);
+				this.invalidate('position');
+				this.update();
+
+				// if pullDrag is off then fire transitionEnd event manually when stick
+				// to border
+				if (!this.settings.pullDrag && this.drag.updatedX === this.coordinates(closest)) {
+					this.transitionEnd();
+				}
+
+				this.drag.distance = 0;
+
+				$(document).off('.owl.dragEvents');
+			};
+
+			/**
+			 * Attaches `preventClick` to disable link while swipping.
+			 * @protected
+			 * @param {HTMLElement} [target] - The target of the `click` event.
+			 */
+			Owl.prototype.removeClick = function(target) {
+				this.drag.targetEl = target;
+				$(target).on('click.preventClick', this.e._preventClick);
+				// to make sure click is removed:
+				window.setTimeout(function() {
+					$(target).off('click.preventClick');
+				}, 300);
+			};
+
+			/**
+			 * Suppresses click event.
+			 * @protected
+			 * @param {Event} ev - The event arguments.
+			 */
+			Owl.prototype.preventClick = function(ev) {
+				if (ev.preventDefault) {
+					ev.preventDefault();
+				} else {
+					ev.returnValue = false;
+				}
+				if (ev.stopPropagation) {
+					ev.stopPropagation();
+				}
+				$(ev.target).off('click.preventClick');
+			};
+
+			/**
+			 * Catches stage position while animate (only CSS3).
+			 * @protected
+			 * @returns
+			 */
+			Owl.prototype.getTransformProperty = function() {
+				var transform, matrix3d;
+
+				transform = window.getComputedStyle(this.$stage.get(0), null).getPropertyValue(this.vendorName + 'transform');
+				// var transform = this.$stage.css(this.vendorName + 'transform')
+				transform = transform.replace(/matrix(3d)?\(|\)/g, '').split(',');
+				matrix3d = transform.length === 16;
+
+				return matrix3d !== true ? transform[4] : transform[12];
+			};
+
+			/**
+			 * Gets absolute position of the closest item for a coordinate.
+			 * @todo Setting `freeDrag` makes `closest` not reusable. See #165.
+			 * @protected
+			 * @param {Number} coordinate - The coordinate in pixel.
+			 * @return {Number} - The absolute position of the closest item.
+			 */
+			Owl.prototype.closest = function(coordinate) {
+				var position = -1, pull = 30, width = this.width(), coordinates = this.coordinates();
+
+				if (!this.settings.freeDrag) {
+					// check closest item
+					$.each(coordinates, $.proxy(function(index, value) {
+						if (coordinate > value - pull && coordinate < value + pull) {
+							position = index;
+						} else if (this.op(coordinate, '<', value)
+							&& this.op(coordinate, '>', coordinates[index + 1] || value - width)) {
+							position = this.state.direction === 'left' ? index + 1 : index;
+						}
+						return position === -1;
+					}, this));
+				}
+
+				if (!this.settings.loop) {
+					// non loop boundries
+					if (this.op(coordinate, '>', coordinates[this.minimum()])) {
+						position = coordinate = this.minimum();
+					} else if (this.op(coordinate, '<', coordinates[this.maximum()])) {
+						position = coordinate = this.maximum();
+					}
+				}
+
+				return position;
+			};
+
+			/**
+			 * Animates the stage.
+			 * @public
+			 * @param {Number} coordinate - The coordinate in pixels.
+			 */
+			Owl.prototype.animate = function(coordinate) {
+				this.trigger('translate');
+				this.state.inMotion = this.speed() > 0;
+
+				if (this.support3d) {
+					this.$stage.css({
+						transform: 'translate3d(' + coordinate + 'px' + ',0px, 0px)',
+						transition: (this.speed() / 1000) + 's'
+					});
+				} else if (this.state.isTouch) {
+					this.$stage.css({
+						left: coordinate + 'px'
+					});
+				} else {
+					this.$stage.animate({
+						left: coordinate
+					}, this.speed() / 1000, this.settings.fallbackEasing, $.proxy(function() {
+						if (this.state.inMotion) {
+							this.transitionEnd();
+						}
+					}, this));
+				}
+			};
+
+			/**
+			 * Sets the absolute position of the current item.
+			 * @public
+			 * @param {Number} [position] - The new absolute position or nothing to leave it unchanged.
+			 * @returns {Number} - The absolute position of the current item.
+			 */
+			Owl.prototype.current = function(position) {
+				if (position === undefined) {
+					return this._current;
+				}
+
+				if (this._items.length === 0) {
+					return undefined;
+				}
+
+				position = this.normalize(position);
+
+				if (this._current !== position) {
+					var event = this.trigger('change', { property: { name: 'position', value: position } });
+
+					if (event.data !== undefined) {
+						position = this.normalize(event.data);
+					}
+
+					this._current = position;
+
+					this.invalidate('position');
+
+					this.trigger('changed', { property: { name: 'position', value: this._current } });
+				}
+
+				return this._current;
+			};
+
+			/**
+			 * Invalidates the given part of the update routine.
+			 * @param {String} part - The part to invalidate.
+			 */
+			Owl.prototype.invalidate = function(part) {
+				this._invalidated[part] = true;
+			}
+
+			/**
+			 * Resets the absolute position of the current item.
+			 * @public
+			 * @param {Number} position - The absolute position of the new item.
+			 */
+			Owl.prototype.reset = function(position) {
+				position = this.normalize(position);
+
+				if (position === undefined) {
+					return;
+				}
+
+				this._speed = 0;
+				this._current = position;
+
+				this.suppress([ 'translate', 'translated' ]);
+
+				this.animate(this.coordinates(position));
+
+				this.release([ 'translate', 'translated' ]);
+			};
+
+			/**
+			 * Normalizes an absolute or a relative position for an item.
+			 * @public
+			 * @param {Number} position - The absolute or relative position to normalize.
+			 * @param {Boolean} [relative=false] - Whether the given position is relative or not.
+			 * @returns {Number} - The normalized position.
+			 */
+			Owl.prototype.normalize = function(position, relative) {
+				var n = (relative ? this._items.length : this._items.length + this._clones.length);
+
+				if (!$.isNumeric(position) || n < 1) {
+					return undefined;
+				}
+
+				if (this._clones.length) {
+					position = ((position % n) + n) % n;
+				} else {
+					position = Math.max(this.minimum(relative), Math.min(this.maximum(relative), position));
+				}
+
+				return position;
+			};
+
+			/**
+			 * Converts an absolute position for an item into a relative position.
+			 * @public
+			 * @param {Number} position - The absolute position to convert.
+			 * @returns {Number} - The converted position.
+			 */
+			Owl.prototype.relative = function(position) {
+				position = this.normalize(position);
+				position = position - this._clones.length / 2;
+				return this.normalize(position, true);
+			};
+
+			/**
+			 * Gets the maximum position for an item.
+			 * @public
+			 * @param {Boolean} [relative=false] - Whether to return an absolute position or a relative position.
+			 * @returns {Number}
+			 */
+			Owl.prototype.maximum = function(relative) {
+				var maximum, width, i = 0, coordinate,
+					settings = this.settings;
+
+				if (relative) {
+					return this._items.length - 1;
+				}
+
+				if (!settings.loop && settings.center) {
+					maximum = this._items.length - 1;
+				} else if (!settings.loop && !settings.center) {
+					maximum = this._items.length - settings.items;
+				} else if (settings.loop || settings.center) {
+					maximum = this._items.length + settings.items;
+				} else if (settings.autoWidth || settings.merge) {
+					revert = settings.rtl ? 1 : -1;
+					width = this.$stage.width() - this.$element.width();
+					while (coordinate = this.coordinates(i)) {
+						if (coordinate * revert >= width) {
+							break;
+						}
+						maximum = ++i;
+					}
+				} else {
+					throw 'Can not detect maximum absolute position.'
+				}
+
+				return maximum;
+			};
+
+			/**
+			 * Gets the minimum position for an item.
+			 * @public
+			 * @param {Boolean} [relative=false] - Whether to return an absolute position or a relative position.
+			 * @returns {Number}
+			 */
+			Owl.prototype.minimum = function(relative) {
+				if (relative) {
+					return 0;
+				}
+
+				return this._clones.length / 2;
+			};
+
+			/**
+			 * Gets an item at the specified relative position.
+			 * @public
+			 * @param {Number} [position] - The relative position of the item.
+			 * @return {jQuery|Array.<jQuery>} - The item at the given position or all items if no position was given.
+			 */
+			Owl.prototype.items = function(position) {
+				if (position === undefined) {
+					return this._items.slice();
+				}
+
+				position = this.normalize(position, true);
+				return this._items[position];
+			};
+
+			/**
+			 * Gets an item at the specified relative position.
+			 * @public
+			 * @param {Number} [position] - The relative position of the item.
+			 * @return {jQuery|Array.<jQuery>} - The item at the given position or all items if no position was given.
+			 */
+			Owl.prototype.mergers = function(position) {
+				if (position === undefined) {
+					return this._mergers.slice();
+				}
+
+				position = this.normalize(position, true);
+				return this._mergers[position];
+			};
+
+			/**
+			 * Gets the absolute positions of clones for an item.
+			 * @public
+			 * @param {Number} [position] - The relative position of the item.
+			 * @returns {Array.<Number>} - The absolute positions of clones for the item or all if no position was given.
+			 */
+			Owl.prototype.clones = function(position) {
+				var odd = this._clones.length / 2,
+					even = odd + this._items.length,
+					map = function(index) { return index % 2 === 0 ? even + index / 2 : odd - (index + 1) / 2 };
+
+				if (position === undefined) {
+					return $.map(this._clones, function(v, i) { return map(i) });
+				}
+
+				return $.map(this._clones, function(v, i) { return v === position ? map(i) : null });
+			};
+
+			/**
+			 * Sets the current animation speed.
+			 * @public
+			 * @param {Number} [speed] - The animation speed in milliseconds or nothing to leave it unchanged.
+			 * @returns {Number} - The current animation speed in milliseconds.
+			 */
+			Owl.prototype.speed = function(speed) {
+				if (speed !== undefined) {
+					this._speed = speed;
+				}
+
+				return this._speed;
+			};
+
+			/**
+			 * Gets the coordinate of an item.
+			 * @todo The name of this method is missleanding.
+			 * @public
+			 * @param {Number} position - The absolute position of the item within `minimum()` and `maximum()`.
+			 * @returns {Number|Array.<Number>} - The coordinate of the item in pixel or all coordinates.
+			 */
+			Owl.prototype.coordinates = function(position) {
+				var coordinate = null;
+
+				if (position === undefined) {
+					return $.map(this._coordinates, $.proxy(function(coordinate, index) {
+						return this.coordinates(index);
+					}, this));
+				}
+
+				if (this.settings.center) {
+					coordinate = this._coordinates[position];
+					coordinate += (this.width() - coordinate + (this._coordinates[position - 1] || 0)) / 2 * (this.settings.rtl ? -1 : 1);
+				} else {
+					coordinate = this._coordinates[position - 1] || 0;
+				}
+
+				return coordinate;
+			};
+
+			/**
+			 * Calculates the speed for a translation.
+			 * @protected
+			 * @param {Number} from - The absolute position of the start item.
+			 * @param {Number} to - The absolute position of the target item.
+			 * @param {Number} [factor=undefined] - The time factor in milliseconds.
+			 * @returns {Number} - The time in milliseconds for the translation.
+			 */
+			Owl.prototype.duration = function(from, to, factor) {
+				return Math.min(Math.max(Math.abs(to - from), 1), 6) * Math.abs((factor || this.settings.smartSpeed));
+			};
+
+			/**
+			 * Slides to the specified item.
+			 * @public
+			 * @param {Number} position - The position of the item.
+			 * @param {Number} [speed] - The time in milliseconds for the transition.
+			 */
+			Owl.prototype.to = function(position, speed) {
+				if (this.settings.loop) {
+					var distance = position - this.relative(this.current()),
+						revert = this.current(),
+						before = this.current(),
+						after = this.current() + distance,
+						direction = before - after < 0 ? true : false,
+						items = this._clones.length + this._items.length;
+
+					if (after < this.settings.items && direction === false) {
+						revert = before + this._items.length;
+						this.reset(revert);
+					} else if (after >= items - this.settings.items && direction === true) {
+						revert = before - this._items.length;
+						this.reset(revert);
+					}
+					window.clearTimeout(this.e._goToLoop);
+					this.e._goToLoop = window.setTimeout($.proxy(function() {
+						this.speed(this.duration(this.current(), revert + distance, speed));
+						this.current(revert + distance);
+						this.update();
+					}, this), 30);
+				} else {
+					this.speed(this.duration(this.current(), position, speed));
+					this.current(position);
+					this.update();
+				}
+			};
+
+			/**
+			 * Slides to the next item.
+			 * @public
+			 * @param {Number} [speed] - The time in milliseconds for the transition.
+			 */
+			Owl.prototype.next = function(speed) {
+				speed = speed || false;
+				this.to(this.relative(this.current()) + 1, speed);
+			};
+
+			/**
+			 * Slides to the previous item.
+			 * @public
+			 * @param {Number} [speed] - The time in milliseconds for the transition.
+			 */
+			Owl.prototype.prev = function(speed) {
+				speed = speed || false;
+				this.to(this.relative(this.current()) - 1, speed);
+			};
+
+			/**
+			 * Handles the end of an animation.
+			 * @protected
+			 * @param {Event} event - The event arguments.
+			 */
+			Owl.prototype.transitionEnd = function(event) {
+
+				// if css2 animation then event object is undefined
+				if (event !== undefined) {
+					event.stopPropagation();
+
+					// Catch only owl-stage transitionEnd event
+					if ((event.target || event.srcElement || event.originalTarget) !== this.$stage.get(0)) {
+						return false;
+					}
+				}
+
+				this.state.inMotion = false;
+				this.trigger('translated');
+			};
+
+			/**
+			 * Gets viewport width.
+			 * @protected
+			 * @return {Number} - The width in pixel.
+			 */
+			Owl.prototype.viewport = function() {
+				var width;
+				if (this.options.responsiveBaseElement !== window) {
+					width = $(this.options.responsiveBaseElement).width();
+				} else if (window.innerWidth) {
+					width = window.innerWidth;
+				} else if (document.documentElement && document.documentElement.clientWidth) {
+					width = document.documentElement.clientWidth;
+				} else {
+					throw 'Can not detect viewport width.';
+				}
+				return width;
+			};
+
+			/**
+			 * Replaces the current content.
+			 * @public
+			 * @param {HTMLElement|jQuery|String} content - The new content.
+			 */
+			Owl.prototype.replace = function(content) {
+				this.$stage.empty();
+				this._items = [];
+
+				if (content) {
+					content = (content instanceof jQuery) ? content : $(content);
+				}
+
+				if (this.settings.nestedItemSelector) {
+					content = content.find('.' + this.settings.nestedItemSelector);
+				}
+
+				content.filter(function() {
+					return this.nodeType === 1;
+				}).each($.proxy(function(index, item) {
+					item = this.prepare(item);
+					this.$stage.append(item);
+					this._items.push(item);
+					this._mergers.push(item.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
+				}, this));
+
+				this.reset($.isNumeric(this.settings.startPosition) ? this.settings.startPosition : 0);
+
+				this.invalidate('items');
+			};
+
+			/**
+			 * Adds an item.
+			 * @todo Use `item` instead of `content` for the event arguments.
+			 * @public
+			 * @param {HTMLElement|jQuery|String} content - The item content to add.
+			 * @param {Number} [position] - The relative position at which to insert the item otherwise the item will be added to the end.
+			 */
+			Owl.prototype.add = function(content, position) {
+				position = position === undefined ? this._items.length : this.normalize(position, true);
+
+				this.trigger('add', { content: content, position: position });
+
+				if (this._items.length === 0 || position === this._items.length) {
+					this.$stage.append(content);
+					this._items.push(content);
+					this._mergers.push(content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
+				} else {
+					this._items[position].before(content);
+					this._items.splice(position, 0, content);
+					this._mergers.splice(position, 0, content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
+				}
+
+				this.invalidate('items');
+
+				this.trigger('added', { content: content, position: position });
+			};
+
+			/**
+			 * Removes an item by its position.
+			 * @todo Use `item` instead of `content` for the event arguments.
+			 * @public
+			 * @param {Number} position - The relative position of the item to remove.
+			 */
+			Owl.prototype.remove = function(position) {
+				position = this.normalize(position, true);
+
+				if (position === undefined) {
+					return;
+				}
+
+				this.trigger('remove', { content: this._items[position], position: position });
+
+				this._items[position].remove();
+				this._items.splice(position, 1);
+				this._mergers.splice(position, 1);
+
+				this.invalidate('items');
+
+				this.trigger('removed', { content: null, position: position });
+			};
+
+			/**
+			 * Adds triggerable events.
+			 * @protected
+			 */
+			Owl.prototype.addTriggerableEvents = function() {
+				var handler = $.proxy(function(callback, event) {
+					return $.proxy(function(e) {
+						if (e.relatedTarget !== this) {
+							this.suppress([ event ]);
+							callback.apply(this, [].slice.call(arguments, 1));
+							this.release([ event ]);
+						}
+					}, this);
+				}, this);
+
+				$.each({
+					'next': this.next,
+					'prev': this.prev,
+					'to': this.to,
+					'destroy': this.destroy,
+					'refresh': this.refresh,
+					'replace': this.replace,
+					'add': this.add,
+					'remove': this.remove
+				}, $.proxy(function(event, callback) {
+					this.$element.on(event + '.owl.carousel', handler(callback, event + '.owl.carousel'));
+				}, this));
+
+			};
+
+			/**
+			 * Watches the visibility of the carousel element.
+			 * @protected
+			 */
+			Owl.prototype.watchVisibility = function() {
+
+				// test on zepto
+				if (!isElVisible(this.$element.get(0))) {
+					this.$element.addClass('owl-hidden');
+					window.clearInterval(this.e._checkVisibile);
+					this.e._checkVisibile = window.setInterval($.proxy(checkVisible, this), 500);
+				}
+
+				function isElVisible(el) {
+					return el.offsetWidth > 0 && el.offsetHeight > 0;
+				}
+
+				function checkVisible() {
+					if (isElVisible(this.$element.get(0))) {
+						this.$element.removeClass('owl-hidden');
+						this.refresh();
+						window.clearInterval(this.e._checkVisibile);
+					}
+				}
+			};
+
+			/**
+			 * Preloads images with auto width.
+			 * @protected
+			 * @todo Still to test
+			 */
+			Owl.prototype.preloadAutoWidthImages = function(imgs) {
+				var loaded, that, $el, img;
+
+				loaded = 0;
+				that = this;
+				imgs.each(function(i, el) {
+					$el = $(el);
+					img = new Image();
+
+					img.onload = function() {
+						loaded++;
+						$el.attr('src', img.src);
+						$el.css('opacity', 1);
+						if (loaded >= imgs.length) {
+							that.state.imagesLoaded = true;
+							that.initialize();
+						}
+					};
+
+					img.src = $el.attr('src') || $el.attr('data-src') || $el.attr('data-src-retina');
+				});
+			};
+
+			/**
+			 * Destroys the carousel.
+			 * @public
+			 */
+			Owl.prototype.destroy = function() {
+
+				if (this.$element.hasClass(this.settings.themeClass)) {
+					this.$element.removeClass(this.settings.themeClass);
+				}
+
+				if (this.settings.responsive !== false) {
+					$(window).off('resize.owl.carousel');
+				}
+
+				if (this.transitionEndVendor) {
+					this.off(this.$stage.get(0), this.transitionEndVendor, this.e._transitionEnd);
+				}
+
+				for ( var i in this._plugins) {
+					this._plugins[i].destroy();
+				}
+
+				if (this.settings.mouseDrag || this.settings.touchDrag) {
+					this.$stage.off('mousedown touchstart touchcancel');
+					$(document).off('.owl.dragEvents');
+					this.$stage.get(0).onselectstart = function() {};
+					this.$stage.off('dragstart', function() { return false });
+				}
+
+				// remove event handlers in the ".owl.carousel" namespace
+				this.$element.off('.owl');
+
+				this.$stage.children('.cloned').remove();
+				this.e = null;
+				this.$element.removeData('owlCarousel');
+
+				this.$stage.children().contents().unwrap();
+				this.$stage.children().unwrap();
+				this.$stage.unwrap();
+			};
+
+			/**
+			 * Operators to calculate right-to-left and left-to-right.
+			 * @protected
+			 * @param {Number} [a] - The left side operand.
+			 * @param {String} [o] - The operator.
+			 * @param {Number} [b] - The right side operand.
+			 */
+			Owl.prototype.op = function(a, o, b) {
+				var rtl = this.settings.rtl;
+				switch (o) {
+					case '<':
+						return rtl ? a > b : a < b;
+					case '>':
+						return rtl ? a < b : a > b;
+					case '>=':
+						return rtl ? a <= b : a >= b;
+					case '<=':
+						return rtl ? a >= b : a <= b;
+					default:
+						break;
+				}
+			};
+
+			/**
+			 * Attaches to an internal event.
+			 * @protected
+			 * @param {HTMLElement} element - The event source.
+			 * @param {String} event - The event name.
+			 * @param {Function} listener - The event handler to attach.
+			 * @param {Boolean} capture - Wether the event should be handled at the capturing phase or not.
+			 */
+			Owl.prototype.on = function(element, event, listener, capture) {
+				if (element.addEventListener) {
+					element.addEventListener(event, listener, capture);
+				} else if (element.attachEvent) {
+					element.attachEvent('on' + event, listener);
+				}
+			};
+
+			/**
+			 * Detaches from an internal event.
+			 * @protected
+			 * @param {HTMLElement} element - The event source.
+			 * @param {String} event - The event name.
+			 * @param {Function} listener - The attached event handler to detach.
+			 * @param {Boolean} capture - Wether the attached event handler was registered as a capturing listener or not.
+			 */
+			Owl.prototype.off = function(element, event, listener, capture) {
+				if (element.removeEventListener) {
+					element.removeEventListener(event, listener, capture);
+				} else if (element.detachEvent) {
+					element.detachEvent('on' + event, listener);
+				}
+			};
+
+			/**
+			 * Triggers an public event.
+			 * @protected
+			 * @param {String} name - The event name.
+			 * @param {*} [data=null] - The event data.
+			 * @param {String} [namespace=.owl.carousel] - The event namespace.
+			 * @returns {Event} - The event arguments.
+			 */
+			Owl.prototype.trigger = function(name, data, namespace) {
+				var status = {
+					item: { count: this._items.length, index: this.current() }
+				}, handler = $.camelCase(
+					$.grep([ 'on', name, namespace ], function(v) { return v })
+						.join('-').toLowerCase()
+				), event = $.Event(
+					[ name, 'owl', namespace || 'carousel' ].join('.').toLowerCase(),
+					$.extend({ relatedTarget: this }, status, data)
+				);
+
+				if (!this._supress[name]) {
+					$.each(this._plugins, function(name, plugin) {
+						if (plugin.onTrigger) {
+							plugin.onTrigger(event);
+						}
+					});
+
+					this.$element.trigger(event);
+
+					if (this.settings && typeof this.settings[handler] === 'function') {
+						this.settings[handler].apply(this, event);
+					}
+				}
+
+				return event;
+			};
+
+			/**
+			 * Suppresses events.
+			 * @protected
+			 * @param {Array.<String>} events - The events to suppress.
+			 */
+			Owl.prototype.suppress = function(events) {
+				$.each(events, $.proxy(function(index, event) {
+					this._supress[event] = true;
+				}, this));
+			}
+
+			/**
+			 * Releases suppressed events.
+			 * @protected
+			 * @param {Array.<String>} events - The events to release.
+			 */
+			Owl.prototype.release = function(events) {
+				$.each(events, $.proxy(function(index, event) {
+					delete this._supress[event];
+				}, this));
+			}
+
+			/**
+			 * Checks the availability of some browser features.
+			 * @protected
+			 */
+			Owl.prototype.browserSupport = function() {
+				this.support3d = isPerspective();
+
+				if (this.support3d) {
+					this.transformVendor = isTransform();
+
+					// take transitionend event name by detecting transition
+					var endVendors = [ 'transitionend', 'webkitTransitionEnd', 'transitionend', 'oTransitionEnd' ];
+					this.transitionEndVendor = endVendors[isTransition()];
+
+					// take vendor name from transform name
+					this.vendorName = this.transformVendor.replace(/Transform/i, '');
+					this.vendorName = this.vendorName !== '' ? '-' + this.vendorName.toLowerCase() + '-' : '';
+				}
+
+				this.state.orientation = window.orientation;
+			};
+
+			/**
+			 * Get touch/drag coordinats.
+			 * @private
+			 * @param {event} - mousedown/touchstart event
+			 * @returns {object} - Contains X and Y of current mouse/touch position
+			 */
+
+			function getTouches(event) {
+				if (event.touches !== undefined) {
+					return {
+						x: event.touches[0].pageX,
+						y: event.touches[0].pageY
+					};
+				}
+
+				if (event.touches === undefined) {
+					if (event.pageX !== undefined) {
+						return {
+							x: event.pageX,
+							y: event.pageY
+						};
+					}
+
+					if (event.pageX === undefined) {
+						return {
+							x: event.clientX,
+							y: event.clientY
+						};
+					}
+				}
+			}
+
+			/**
+			 * Checks for CSS support.
+			 * @private
+			 * @param {Array} array - The CSS properties to check for.
+			 * @returns {Array} - Contains the supported CSS property name and its index or `false`.
+			 */
+			function isStyleSupported(array) {
+				var p, s, fake = document.createElement('div'), list = array;
+				for (p in list) {
+					s = list[p];
+					if (typeof fake.style[s] !== 'undefined') {
+						fake = null;
+						return [ s, p ];
+					}
+				}
+				return [ false ];
+			}
+
+			/**
+			 * Checks for CSS transition support.
+			 * @private
+			 * @todo Realy bad design
+			 * @returns {Number}
+			 */
+			function isTransition() {
+				return isStyleSupported([ 'transition', 'WebkitTransition', 'MozTransition', 'OTransition' ])[1];
+			}
+
+			/**
+			 * Checks for CSS transform support.
+			 * @private
+			 * @returns {String} The supported property name or false.
+			 */
+			function isTransform() {
+				return isStyleSupported([ 'transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ])[0];
+			}
+
+			/**
+			 * Checks for CSS perspective support.
+			 * @private
+			 * @returns {String} The supported property name or false.
+			 */
+			function isPerspective() {
+				return isStyleSupported([ 'perspective', 'webkitPerspective', 'MozPerspective', 'OPerspective', 'MsPerspective' ])[0];
+			}
+
+			/**
+			 * Checks wether touch is supported or not.
+			 * @private
+			 * @returns {Boolean}
+			 */
+			function isTouchSupport() {
+				return 'ontouchstart' in window || !!(navigator.msMaxTouchPoints);
+			}
+
+			/**
+			 * Checks wether touch is supported or not for IE.
+			 * @private
+			 * @returns {Boolean}
+			 */
+			function isTouchSupportIE() {
+				return window.navigator.msPointerEnabled;
+			}
+
+			/**
+			 * The jQuery Plugin for the Owl Carousel
+			 * @public
+			 */
+			$.fn.owlCarousel = function(options) {
+				return this.each(function() {
+					if (!$(this).data('owlCarousel')) {
+						$(this).data('owlCarousel', new Owl(this, options));
+					}
+				});
+			};
+
+			/**
+			 * The constructor for the jQuery Plugin
+			 * @public
+			 */
+			$.fn.owlCarousel.Constructor = Owl;
+
+		})(window.Zepto || window.jQuery, window, document);
+
+		/**
+		 * Lazy Plugin
+		 * @version 2.0.0
+		 * @author Bartosz Wojciechowski
+		 * @license The MIT License (MIT)
+		 */
+		;(function($, window, document, undefined) {
+
+			/**
+			 * Creates the lazy plugin.
+			 * @class The Lazy Plugin
+			 * @param {Owl} carousel - The Owl Carousel
+			 */
+			var Lazy = function(carousel) {
+
+				/**
+				 * Reference to the core.
+				 * @protected
+				 * @type {Owl}
+				 */
+				this._core = carousel;
+
+				/**
+				 * Already loaded items.
+				 * @protected
+				 * @type {Array.<jQuery>}
+				 */
+				this._loaded = [];
+
+				/**
+				 * Event handlers.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._handlers = {
+					'initialized.owl.carousel change.owl.carousel': $.proxy(function(e) {
+						if (!e.namespace) {
+							return;
+						}
+
+						if (!this._core.settings || !this._core.settings.lazyLoad) {
+							return;
+						}
+
+						if ((e.property && e.property.name == 'position') || e.type == 'initialized') {
+							var settings = this._core.settings,
+								n = (settings.center && Math.ceil(settings.items / 2) || settings.items),
+								i = ((settings.center && n * -1) || 0),
+								position = ((e.property && e.property.value) || this._core.current()) + i,
+								clones = this._core.clones().length,
+								load = $.proxy(function(i, v) { this.load(v) }, this);
+
+							while (i++ < n) {
+								this.load(clones / 2 + this._core.relative(position));
+								clones && $.each(this._core.clones(this._core.relative(position++)), load);
+							}
+						}
+					}, this)
+				};
+
+				// set the default options
+				this._core.options = $.extend({}, Lazy.Defaults, this._core.options);
+
+				// register event handler
+				this._core.$element.on(this._handlers);
+			}
+
+			/**
+			 * Default options.
+			 * @public
+			 */
+			Lazy.Defaults = {
+				lazyLoad: false
+			}
+
+			/**
+			 * Loads all resources of an item at the specified position.
+			 * @param {Number} position - The absolute position of the item.
+			 * @protected
+			 */
+			Lazy.prototype.load = function(position) {
+				var $item = this._core.$stage.children().eq(position),
+					$elements = $item && $item.find('.owl-lazy');
+
+				if (!$elements || $.inArray($item.get(0), this._loaded) > -1) {
+					return;
+				}
+
+				$elements.each($.proxy(function(index, element) {
+					var $element = $(element), image,
+						url = (window.devicePixelRatio > 1 && $element.attr('data-src-retina')) || $element.attr('data-src');
+
+					this._core.trigger('load', { element: $element, url: url }, 'lazy');
+
+					if ($element.is('img')) {
+						$element.one('load.owl.lazy', $.proxy(function() {
+							$element.css('opacity', 1);
+							this._core.trigger('loaded', { element: $element, url: url }, 'lazy');
+						}, this)).attr('src', url);
+					} else {
+						image = new Image();
+						image.onload = $.proxy(function() {
+							$element.css({
+								'background-image': 'url(' + url + ')',
+								'opacity': '1'
+							});
+							this._core.trigger('loaded', { element: $element, url: url }, 'lazy');
+						}, this);
+						image.src = url;
+					}
+				}, this));
+
+				this._loaded.push($item.get(0));
+			}
+
+			/**
+			 * Destroys the plugin.
+			 * @public
+			 */
+			Lazy.prototype.destroy = function() {
+				var handler, property;
+
+				for (handler in this.handlers) {
+					this._core.$element.off(handler, this.handlers[handler]);
+				}
+				for (property in Object.getOwnPropertyNames(this)) {
+					typeof this[property] != 'function' && (this[property] = null);
+				}
+			}
+
+			$.fn.owlCarousel.Constructor.Plugins.Lazy = Lazy;
+
+		})(window.Zepto || window.jQuery, window, document);
+
+		/**
+		 * AutoHeight Plugin
+		 * @version 2.0.0
+		 * @author Bartosz Wojciechowski
+		 * @license The MIT License (MIT)
+		 */
+		;(function($, window, document, undefined) {
+
+			/**
+			 * Creates the auto height plugin.
+			 * @class The Auto Height Plugin
+			 * @param {Owl} carousel - The Owl Carousel
+			 */
+			var AutoHeight = function(carousel) {
+				/**
+				 * Reference to the core.
+				 * @protected
+				 * @type {Owl}
+				 */
+				this._core = carousel;
+
+				/**
+				 * All event handlers.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._handlers = {
+					'initialized.owl.carousel': $.proxy(function() {
+						if (this._core.settings.autoHeight) {
+							this.update();
+						}
+					}, this),
+					'changed.owl.carousel': $.proxy(function(e) {
+						if (this._core.settings.autoHeight && e.property.name == 'position'){
+							this.update();
+						}
+					}, this),
+					'loaded.owl.lazy': $.proxy(function(e) {
+						if (this._core.settings.autoHeight && e.element.closest('.' + this._core.settings.itemClass)
+							=== this._core.$stage.children().eq(this._core.current())) {
+							this.update();
+						}
+					}, this)
+				};
+
+				// set default options
+				this._core.options = $.extend({}, AutoHeight.Defaults, this._core.options);
+
+				// register event handlers
+				this._core.$element.on(this._handlers);
+			};
+
+			/**
+			 * Default options.
+			 * @public
+			 */
+			AutoHeight.Defaults = {
+				autoHeight: false,
+				autoHeightClass: 'owl-height'
+			};
+
+			/**
+			 * Updates the view.
+			 */
+			AutoHeight.prototype.update = function() {
+				this._core.$stage.parent()
+					.height(this._core.$stage.children().eq(this._core.current()).height())
+					.addClass(this._core.settings.autoHeightClass);
+			};
+
+			AutoHeight.prototype.destroy = function() {
+				var handler, property;
+
+				for (handler in this._handlers) {
+					this._core.$element.off(handler, this._handlers[handler]);
+				}
+				for (property in Object.getOwnPropertyNames(this)) {
+					typeof this[property] != 'function' && (this[property] = null);
+				}
+			};
+
+			$.fn.owlCarousel.Constructor.Plugins.AutoHeight = AutoHeight;
+
+		})(window.Zepto || window.jQuery, window, document);
+
+		/**
+		 * Video Plugin
+		 * @version 2.0.0
+		 * @author Bartosz Wojciechowski
+		 * @license The MIT License (MIT)
+		 */
+		;(function($, window, document, undefined) {
+
+			/**
+			 * Creates the video plugin.
+			 * @class The Video Plugin
+			 * @param {Owl} carousel - The Owl Carousel
+			 */
+			var Video = function(carousel) {
+				/**
+				 * Reference to the core.
+				 * @protected
+				 * @type {Owl}
+				 */
+				this._core = carousel;
+
+				/**
+				 * Cache all video URLs.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._videos = {};
+
+				/**
+				 * Current playing item.
+				 * @protected
+				 * @type {jQuery}
+				 */
+				this._playing = null;
+
+				/**
+				 * Whether this is in fullscreen or not.
+				 * @protected
+				 * @type {Boolean}
+				 */
+				this._fullscreen = false;
+
+				/**
+				 * All event handlers.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._handlers = {
+					'resize.owl.carousel': $.proxy(function(e) {
+						if (this._core.settings.video && !this.isInFullScreen()) {
+							e.preventDefault();
+						}
+					}, this),
+					'refresh.owl.carousel changed.owl.carousel': $.proxy(function(e) {
+						if (this._playing) {
+							this.stop();
+						}
+					}, this),
+					'prepared.owl.carousel': $.proxy(function(e) {
+						var $element = $(e.content).find('.owl-video');
+						if ($element.length) {
+							$element.css('display', 'none');
+							this.fetch($element, $(e.content));
+						}
+					}, this)
+				};
+
+				// set default options
+				this._core.options = $.extend({}, Video.Defaults, this._core.options);
+
+				// register event handlers
+				this._core.$element.on(this._handlers);
+
+				this._core.$element.on('click.owl.video', '.owl-video-play-icon', $.proxy(function(e) {
+					this.play(e);
+				}, this));
+			};
+
+			/**
+			 * Default options.
+			 * @public
+			 */
+			Video.Defaults = {
+				video: false,
+				videoHeight: false,
+				videoWidth: false
+			};
+
+			/**
+			 * Gets the video ID and the type (YouTube/Vimeo only).
+			 * @protected
+			 * @param {jQuery} target - The target containing the video data.
+			 * @param {jQuery} item - The item containing the video.
+			 */
+			Video.prototype.fetch = function(target, item) {
+
+				var type = target.attr('data-vimeo-id') ? 'vimeo' : 'youtube',
+					id = target.attr('data-vimeo-id') || target.attr('data-youtube-id'),
+					width = target.attr('data-width') || this._core.settings.videoWidth,
+					height = target.attr('data-height') || this._core.settings.videoHeight,
+					url = target.attr('href');
+
+				if (url) {
+					id = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
+
+					if (id[3].indexOf('youtu') > -1) {
+						type = 'youtube';
+					} else if (id[3].indexOf('vimeo') > -1) {
+						type = 'vimeo';
+					} else {
+						throw new Error('Video URL not supported.');
+					}
+					id = id[6];
+				} else {
+					throw new Error('Missing video URL.');
+				}
+
+				this._videos[url] = {
+					type: type,
+					id: id,
+					width: width,
+					height: height
+				};
+
+				item.attr('data-video', url);
+
+				this.thumbnail(target, this._videos[url]);
+			};
+
+			/**
+			 * Creates video thumbnail.
+			 * @protected
+			 * @param {jQuery} target - The target containing the video data.
+			 * @param {Object} info - The video info object.
+			 * @see `fetch`
+			 */
+			Video.prototype.thumbnail = function(target, video) {
+
+				var tnLink,
+					icon,
+					path,
+					dimensions = video.width && video.height ? 'style="width:' + video.width + 'px;height:' + video.height + 'px;"' : '',
+					customTn = target.find('img'),
+					srcType = 'src',
+					lazyClass = '',
+					settings = this._core.settings,
+					create = function(path) {
+						icon = '<div class="owl-video-play-icon"></div>';
+
+						if (settings.lazyLoad) {
+							tnLink = '<div class="owl-video-tn ' + lazyClass + '" ' + srcType + '="' + path + '"></div>';
+						} else {
+							tnLink = '<div class="owl-video-tn" style="opacity:1;background-image:url(' + path + ')"></div>';
+						}
+						target.after(tnLink);
+						target.after(icon);
+					};
+
+				// wrap video content into owl-video-wrapper div
+				target.wrap('<div class="owl-video-wrapper"' + dimensions + '></div>');
+
+				if (this._core.settings.lazyLoad) {
+					srcType = 'data-src';
+					lazyClass = 'owl-lazy';
+				}
+
+				// custom thumbnail
+				if (customTn.length) {
+					create(customTn.attr(srcType));
+					customTn.remove();
+					return false;
+				}
+
+				if (video.type === 'youtube') {
+					path = "http://img.youtube.com/vi/" + video.id + "/hqdefault.jpg";
+					create(path);
+				} else if (video.type === 'vimeo') {
+					$.ajax({
+						type: 'GET',
+						url: 'http://vimeo.com/api/v2/video/' + video.id + '.json',
+						jsonp: 'callback',
+						dataType: 'jsonp',
+						success: function(data) {
+							path = data[0].thumbnail_large;
+							create(path);
+						}
+					});
+				}
+			};
+
+			/**
+			 * Stops the current video.
+			 * @public
+			 */
+			Video.prototype.stop = function() {
+				this._core.trigger('stop', null, 'video');
+				this._playing.find('.owl-video-frame').remove();
+				this._playing.removeClass('owl-video-playing');
+				this._playing = null;
+			};
+
+			/**
+			 * Starts the current video.
+			 * @public
+			 * @param {Event} ev - The event arguments.
+			 */
+			Video.prototype.play = function(ev) {
+				this._core.trigger('play', null, 'video');
+
+				if (this._playing) {
+					this.stop();
+				}
+
+				var target = $(ev.target || ev.srcElement),
+					item = target.closest('.' + this._core.settings.itemClass),
+					video = this._videos[item.attr('data-video')],
+					width = video.width || '100%',
+					height = video.height || this._core.$stage.height(),
+					html, wrap;
+
+				if (video.type === 'youtube') {
+					html = '<iframe width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/'
+						+ video.id + '?autoplay=1&v=' + video.id + '" frameborder="0" allowfullscreen></iframe>';
+				} else if (video.type === 'vimeo') {
+					html = '<iframe src="http://player.vimeo.com/video/' + video.id + '?autoplay=1" width="' + width
+						+ '" height="' + height
+						+ '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
+				}
+
+				item.addClass('owl-video-playing');
+				this._playing = item;
+
+				wrap = $('<div style="height:' + height + 'px; width:' + width + 'px" class="owl-video-frame">'
+					+ html + '</div>');
+				target.after(wrap);
+			};
+
+			/**
+			 * Checks whether an video is currently in full screen mode or not.
+			 * @todo Bad style because looks like a readonly method but changes members.
+			 * @protected
+			 * @returns {Boolean}
+			 */
+			Video.prototype.isInFullScreen = function() {
+
+				// if Vimeo Fullscreen mode
+				var element = document.fullscreenElement || document.mozFullScreenElement
+					|| document.webkitFullscreenElement;
+
+				if (element && $(element).parent().hasClass('owl-video-frame')) {
+					this._core.speed(0);
+					this._fullscreen = true;
+				}
+
+				if (element && this._fullscreen && this._playing) {
+					return false;
+				}
+
+				// comming back from fullscreen
+				if (this._fullscreen) {
+					this._fullscreen = false;
+					return false;
+				}
+
+				// check full screen mode and window orientation
+				if (this._playing) {
+					if (this._core.state.orientation !== window.orientation) {
+						this._core.state.orientation = window.orientation;
+						return false;
+					}
+				}
+
+				return true;
+			};
+
+			/**
+			 * Destroys the plugin.
+			 */
+			Video.prototype.destroy = function() {
+				var handler, property;
+
+				this._core.$element.off('click.owl.video');
+
+				for (handler in this._handlers) {
+					this._core.$element.off(handler, this._handlers[handler]);
+				}
+				for (property in Object.getOwnPropertyNames(this)) {
+					typeof this[property] != 'function' && (this[property] = null);
+				}
+			};
+
+			$.fn.owlCarousel.Constructor.Plugins.Video = Video;
+
+		})(window.Zepto || window.jQuery, window, document);
+
+		/**
+		 * Animate Plugin
+		 * @version 2.0.0
+		 * @author Bartosz Wojciechowski
+		 * @license The MIT License (MIT)
+		 */
+		;(function($, window, document, undefined) {
+
+			/**
+			 * Creates the animate plugin.
+			 * @class The Navigation Plugin
+			 * @param {Owl} scope - The Owl Carousel
+			 */
+			var Animate = function(scope) {
+				this.core = scope;
+				this.core.options = $.extend({}, Animate.Defaults, this.core.options);
+				this.swapping = true;
+				this.previous = undefined;
+				this.next = undefined;
+
+				this.handlers = {
+					'change.owl.carousel': $.proxy(function(e) {
+						if (e.property.name == 'position') {
+							this.previous = this.core.current();
+							this.next = e.property.value;
+						}
+					}, this),
+					'drag.owl.carousel dragged.owl.carousel translated.owl.carousel': $.proxy(function(e) {
+						this.swapping = e.type == 'translated';
+					}, this),
+					'translate.owl.carousel': $.proxy(function(e) {
+						if (this.swapping && (this.core.options.animateOut || this.core.options.animateIn)) {
+							this.swap();
+						}
+					}, this)
+				};
+
+				this.core.$element.on(this.handlers);
+			};
+
+			/**
+			 * Default options.
+			 * @public
+			 */
+			Animate.Defaults = {
+				animateOut: false,
+				animateIn: false
+			};
+
+			/**
+			 * Toggles the animation classes whenever an translations starts.
+			 * @protected
+			 * @returns {Boolean|undefined}
+			 */
+			Animate.prototype.swap = function() {
+
+				if (this.core.settings.items !== 1 || !this.core.support3d) {
+					return;
+				}
+
+				this.core.speed(0);
+
+				var left,
+					clear = $.proxy(this.clear, this),
+					previous = this.core.$stage.children().eq(this.previous),
+					next = this.core.$stage.children().eq(this.next),
+					incoming = this.core.settings.animateIn,
+					outgoing = this.core.settings.animateOut;
+
+				if (this.core.current() === this.previous) {
+					return;
+				}
+
+				if (outgoing) {
+					left = this.core.coordinates(this.previous) - this.core.coordinates(this.next);
+					previous.css( { 'left': left + 'px' } )
+						.addClass('animated owl-animated-out')
+						.addClass(outgoing)
+						.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', clear);
+				}
+
+				if (incoming) {
+					next.addClass('animated owl-animated-in')
+						.addClass(incoming)
+						.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', clear);
+				}
+			};
+
+			Animate.prototype.clear = function(e) {
+				$(e.target).css( { 'left': '' } )
+					.removeClass('animated owl-animated-out owl-animated-in')
+					.removeClass(this.core.settings.animateIn)
+					.removeClass(this.core.settings.animateOut);
+				this.core.transitionEnd();
+			}
+
+			/**
+			 * Destroys the plugin.
+			 * @public
+			 */
+			Animate.prototype.destroy = function() {
+				var handler, property;
+
+				for (handler in this.handlers) {
+					this.core.$element.off(handler, this.handlers[handler]);
+				}
+				for (property in Object.getOwnPropertyNames(this)) {
+					typeof this[property] != 'function' && (this[property] = null);
+				}
+			};
+
+			$.fn.owlCarousel.Constructor.Plugins.Animate = Animate;
+
+		})(window.Zepto || window.jQuery, window, document);
+
+		/**
+		 * Autoplay Plugin
+		 * @version 2.0.0
+		 * @author Bartosz Wojciechowski
+		 * @license The MIT License (MIT)
+		 */
+		;(function($, window, document, undefined) {
+
+			/**
+			 * Creates the autoplay plugin.
+			 * @class The Autoplay Plugin
+			 * @param {Owl} scope - The Owl Carousel
+			 */
+			var Autoplay = function(scope) {
+				this.core = scope;
+				this.core.options = $.extend({}, Autoplay.Defaults, this.core.options);
+
+				this.handlers = {
+					'translated.owl.carousel refreshed.owl.carousel': $.proxy(function() {
+						this.autoplay();
+					}, this),
+					'play.owl.autoplay': $.proxy(function(e, t, s) {
+						this.play(t, s);
+					}, this),
+					'stop.owl.autoplay': $.proxy(function() {
+						this.stop();
+					}, this),
+					'mouseover.owl.autoplay': $.proxy(function() {
+						if (this.core.settings.autoplayHoverPause) {
+							this.pause();
+						}
+					}, this),
+					'mouseleave.owl.autoplay': $.proxy(function() {
+						if (this.core.settings.autoplayHoverPause) {
+							this.autoplay();
+						}
+					}, this)
+				};
+
+				this.core.$element.on(this.handlers);
+			};
+
+			/**
+			 * Default options.
+			 * @public
+			 */
+			Autoplay.Defaults = {
+				autoplay: false,
+				autoplayTimeout: 5000,
+				autoplayHoverPause: false,
+				autoplaySpeed: false
+			};
+
+			/**
+			 * @protected
+			 * @todo Must be documented.
+			 */
+			Autoplay.prototype.autoplay = function() {
+				if (this.core.settings.autoplay && !this.core.state.videoPlay) {
+					window.clearInterval(this.interval);
+
+					this.interval = window.setInterval($.proxy(function() {
+						this.play();
+					}, this), this.core.settings.autoplayTimeout);
+				} else {
+					window.clearInterval(this.interval);
+				}
+			};
+
+			/**
+			 * Starts the autoplay.
+			 * @public
+			 * @param {Number} [timeout] - ...
+			 * @param {Number} [speed] - ...
+			 * @returns {Boolean|undefined} - ...
+			 * @todo Must be documented.
+			 */
+			Autoplay.prototype.play = function(timeout, speed) {
+				// if tab is inactive - doesnt work in <IE10
+				if (document.hidden === true) {
+					return;
+				}
+
+				if (this.core.state.isTouch || this.core.state.isScrolling
+					|| this.core.state.isSwiping || this.core.state.inMotion) {
+					return;
+				}
+
+				if (this.core.settings.autoplay === false) {
+					window.clearInterval(this.interval);
+					return;
+				}
+
+				this.core.next(this.core.settings.autoplaySpeed);
+			};
+
+			/**
+			 * Stops the autoplay.
+			 * @public
+			 */
+			Autoplay.prototype.stop = function() {
+				window.clearInterval(this.interval);
+			};
+
+			/**
+			 * Pauses the autoplay.
+			 * @public
+			 */
+			Autoplay.prototype.pause = function() {
+				window.clearInterval(this.interval);
+			};
+
+			/**
+			 * Destroys the plugin.
+			 */
+			Autoplay.prototype.destroy = function() {
+				var handler, property;
+
+				window.clearInterval(this.interval);
+
+				for (handler in this.handlers) {
+					this.core.$element.off(handler, this.handlers[handler]);
+				}
+				for (property in Object.getOwnPropertyNames(this)) {
+					typeof this[property] != 'function' && (this[property] = null);
+				}
+			};
+
+			$.fn.owlCarousel.Constructor.Plugins.autoplay = Autoplay;
+
+		})(window.Zepto || window.jQuery, window, document);
+
+		/**
+		 * Navigation Plugin
+		 * @version 2.0.0
+		 * @author Artus Kolanowski
+		 * @license The MIT License (MIT)
+		 */
+		;(function($, window, document, undefined) {
+			'use strict';
+
+			/**
+			 * Creates the navigation plugin.
+			 * @class The Navigation Plugin
+			 * @param {Owl} carousel - The Owl Carousel.
+			 */
+			var Navigation = function(carousel) {
+				/**
+				 * Reference to the core.
+				 * @protected
+				 * @type {Owl}
+				 */
+				this._core = carousel;
+
+				/**
+				 * Indicates whether the plugin is initialized or not.
+				 * @protected
+				 * @type {Boolean}
+				 */
+				this._initialized = false;
+
+				/**
+				 * The current paging indexes.
+				 * @protected
+				 * @type {Array}
+				 */
+				this._pages = [];
+
+				/**
+				 * All DOM elements of the user interface.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._controls = {};
+
+				/**
+				 * Markup for an indicator.
+				 * @protected
+				 * @type {Array.<String>}
+				 */
+				this._templates = [];
+
+				/**
+				 * The carousel element.
+				 * @type {jQuery}
+				 */
+				this.$element = this._core.$element;
+
+				/**
+				 * Overridden methods of the carousel.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._overrides = {
+					next: this._core.next,
+					prev: this._core.prev,
+					to: this._core.to
+				};
+
+				/**
+				 * All event handlers.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._handlers = {
+					'prepared.owl.carousel': $.proxy(function(e) {
+						if (this._core.settings.dotsData) {
+							this._templates.push($(e.content).find('[data-dot]').andSelf('[data-dot]').attr('data-dot'));
+						}
+					}, this),
+					'add.owl.carousel': $.proxy(function(e) {
+						if (this._core.settings.dotsData) {
+							this._templates.splice(e.position, 0, $(e.content).find('[data-dot]').andSelf('[data-dot]').attr('data-dot'));
+						}
+					}, this),
+					'remove.owl.carousel prepared.owl.carousel': $.proxy(function(e) {
+						if (this._core.settings.dotsData) {
+							this._templates.splice(e.position, 1);
+						}
+					}, this),
+					'change.owl.carousel': $.proxy(function(e) {
+						if (e.property.name == 'position') {
+							if (!this._core.state.revert && !this._core.settings.loop && this._core.settings.navRewind) {
+								var current = this._core.current(),
+									maximum = this._core.maximum(),
+									minimum = this._core.minimum();
+								e.data = e.property.value > maximum
+									? current >= maximum ? minimum : maximum
+									: e.property.value < minimum ? maximum : e.property.value;
+							}
+						}
+					}, this),
+					'changed.owl.carousel': $.proxy(function(e) {
+						if (e.property.name == 'position') {
+							this.draw();
+						}
+					}, this),
+					'refreshed.owl.carousel': $.proxy(function() {
+						if (!this._initialized) {
+							this.initialize();
+							this._initialized = true;
+						}
+						this._core.trigger('refresh', null, 'navigation');
+						this.update();
+						this.draw();
+						this._core.trigger('refreshed', null, 'navigation');
+					}, this)
+				};
+
+				// set default options
+				this._core.options = $.extend({}, Navigation.Defaults, this._core.options);
+
+				// register event handlers
+				this.$element.on(this._handlers);
+			}
+
+			/**
+			 * Default options.
+			 * @public
+			 * @todo Rename `slideBy` to `navBy`
+			 */
+			Navigation.Defaults = {
+				nav: false,
+				navRewind: true,
+				navText: [ 'prev', 'next' ],
+				navSpeed: false,
+				navElement: 'div',
+				navContainer: false,
+				navContainerClass: 'owl-nav',
+				navClass: [ 'owl-prev', 'owl-next' ],
+				slideBy: 1,
+				dotClass: 'owl-dot',
+				dotsClass: 'owl-dots',
+				dots: true,
+				dotsEach: false,
+				dotData: false,
+				dotsSpeed: false,
+				dotsContainer: false,
+				controlsClass: 'owl-controls'
+			}
+
+			/**
+			 * Initializes the layout of the plugin and extends the carousel.
+			 * @protected
+			 */
+			Navigation.prototype.initialize = function() {
+				var $container, override,
+					options = this._core.settings;
+
+				// create the indicator template
+				if (!options.dotsData) {
+					this._templates = [ $('<div>')
+						.addClass(options.dotClass)
+						.append($('<span>'))
+						.prop('outerHTML') ];
+				}
+
+				// create controls container if needed
+				if (!options.navContainer || !options.dotsContainer) {
+					this._controls.$container = $('<div>')
+						.addClass(options.controlsClass)
+						.appendTo(this.$element);
+				}
+
+				// create DOM structure for absolute navigation
+				this._controls.$indicators = options.dotsContainer ? $(options.dotsContainer)
+					: $('<div>').hide().addClass(options.dotsClass).appendTo(this._controls.$container);
+
+				this._controls.$indicators.on('click', 'div', $.proxy(function(e) {
+					var index = $(e.target).parent().is(this._controls.$indicators)
+						? $(e.target).index() : $(e.target).parent().index();
+
+					e.preventDefault();
+
+					this.to(index, options.dotsSpeed);
+				}, this));
+
+				// create DOM structure for relative navigation
+				$container = options.navContainer ? $(options.navContainer)
+					: $('<div>').addClass(options.navContainerClass).prependTo(this._controls.$container);
+
+				this._controls.$next = $('<' + options.navElement + '>');
+				this._controls.$previous = this._controls.$next.clone();
+
+				this._controls.$previous
+					.addClass(options.navClass[0])
+					.html(options.navText[0])
+					.hide()
+					.prependTo($container)
+					.on('click', $.proxy(function(e) {
+						this.prev(options.navSpeed);
+					}, this));
+				this._controls.$next
+					.addClass(options.navClass[1])
+					.html(options.navText[1])
+					.hide()
+					.appendTo($container)
+					.on('click', $.proxy(function(e) {
+						this.next(options.navSpeed);
+					}, this));
+
+				// override public methods of the carousel
+				for (override in this._overrides) {
+					this._core[override] = $.proxy(this[override], this);
+				}
+			}
+
+			/**
+			 * Destroys the plugin.
+			 * @protected
+			 */
+			Navigation.prototype.destroy = function() {
+				var handler, control, property, override;
+
+				for (handler in this._handlers) {
+					this.$element.off(handler, this._handlers[handler]);
+				}
+				for (control in this._controls) {
+					this._controls[control].remove();
+				}
+				for (override in this.overides) {
+					this._core[override] = this._overrides[override];
+				}
+				for (property in Object.getOwnPropertyNames(this)) {
+					typeof this[property] != 'function' && (this[property] = null);
+				}
+			}
+
+			/**
+			 * Updates the internal state.
+			 * @protected
+			 */
+			Navigation.prototype.update = function() {
+				var i, j, k,
+					options = this._core.settings,
+					lower = this._core.clones().length / 2,
+					upper = lower + this._core.items().length,
+					size = options.center || options.autoWidth || options.dotData
+						? 1 : options.dotsEach || options.items;
+
+				if (options.slideBy !== 'page') {
+					options.slideBy = Math.min(options.slideBy, options.items);
+				}
+
+				if (options.dots || options.slideBy == 'page') {
+					this._pages = [];
+
+					for (i = lower, j = 0, k = 0; i < upper; i++) {
+						if (j >= size || j === 0) {
+							this._pages.push({
+								start: i - lower,
+								end: i - lower + size - 1
+							});
+							j = 0, ++k;
+						}
+						j += this._core.mergers(this._core.relative(i));
+					}
+				}
+			}
+
+			/**
+			 * Draws the user interface.
+			 * @todo The option `dotData` wont work.
+			 * @protected
+			 */
+			Navigation.prototype.draw = function() {
+				var difference, i, html = '',
+					options = this._core.settings,
+					$items = this._core.$stage.children(),
+					index = this._core.relative(this._core.current());
+
+				if (options.nav && !options.loop && !options.navRewind) {
+					this._controls.$previous.toggleClass('disabled', index <= 0);
+					this._controls.$next.toggleClass('disabled', index >= this._core.maximum());
+				}
+
+				this._controls.$previous.toggle(options.nav);
+				this._controls.$next.toggle(options.nav);
+
+				if (options.dots) {
+					difference = this._pages.length - this._controls.$indicators.children().length;
+
+					if (options.dotData && difference !== 0) {
+						for (i = 0; i < this._controls.$indicators.children().length; i++) {
+							html += this._templates[this._core.relative(i)];
+						}
+						this._controls.$indicators.html(html);
+					} else if (difference > 0) {
+						html = new Array(difference + 1).join(this._templates[0]);
+						this._controls.$indicators.append(html);
+					} else if (difference < 0) {
+						this._controls.$indicators.children().slice(difference).remove();
+					}
+
+					this._controls.$indicators.find('.active').removeClass('active');
+					this._controls.$indicators.children().eq($.inArray(this.current(), this._pages)).addClass('active');
+				}
+
+				this._controls.$indicators.toggle(options.dots);
+			}
+
+			/**
+			 * Extends event data.
+			 * @protected
+			 * @param {Event} event - The event object which gets thrown.
+			 */
+			Navigation.prototype.onTrigger = function(event) {
+				var settings = this._core.settings;
+
+				event.page = {
+					index: $.inArray(this.current(), this._pages),
+					count: this._pages.length,
+					size: settings && (settings.center || settings.autoWidth || settings.dotData
+						? 1 : settings.dotsEach || settings.items)
+				};
+			}
+
+			/**
+			 * Gets the current page position of the carousel.
+			 * @protected
+			 * @returns {Number}
+			 */
+			Navigation.prototype.current = function() {
+				var index = this._core.relative(this._core.current());
+				return $.grep(this._pages, function(o) {
+					return o.start <= index && o.end >= index;
+				}).pop();
+			}
+
+			/**
+			 * Gets the current succesor/predecessor position.
+			 * @protected
+			 * @returns {Number}
+			 */
+			Navigation.prototype.getPosition = function(successor) {
+				var position, length,
+					options = this._core.settings;
+
+				if (options.slideBy == 'page') {
+					position = $.inArray(this.current(), this._pages);
+					length = this._pages.length;
+					successor ? ++position : --position;
+					position = this._pages[((position % length) + length) % length].start;
+				} else {
+					position = this._core.relative(this._core.current());
+					length = this._core.items().length;
+					successor ? position += options.slideBy : position -= options.slideBy;
+				}
+				return position;
+			}
+
+			/**
+			 * Slides to the next item or page.
+			 * @public
+			 * @param {Number} [speed=false] - The time in milliseconds for the transition.
+			 */
+			Navigation.prototype.next = function(speed) {
+				$.proxy(this._overrides.to, this._core)(this.getPosition(true), speed);
+			}
+
+			/**
+			 * Slides to the previous item or page.
+			 * @public
+			 * @param {Number} [speed=false] - The time in milliseconds for the transition.
+			 */
+			Navigation.prototype.prev = function(speed) {
+				$.proxy(this._overrides.to, this._core)(this.getPosition(false), speed);
+			}
+
+			/**
+			 * Slides to the specified item or page.
+			 * @public
+			 * @param {Number} position - The position of the item or page.
+			 * @param {Number} [speed] - The time in milliseconds for the transition.
+			 * @param {Boolean} [standard=false] - Whether to use the standard behaviour or not.
+			 */
+			Navigation.prototype.to = function(position, speed, standard) {
+				var length;
+
+				if (!standard) {
+					length = this._pages.length;
+					$.proxy(this._overrides.to, this._core)(this._pages[((position % length) + length) % length].start, speed);
+				} else {
+					$.proxy(this._overrides.to, this._core)(position, speed);
+				}
+			}
+
+			$.fn.owlCarousel.Constructor.Plugins.Navigation = Navigation;
+
+		})(window.Zepto || window.jQuery, window, document);
+
+		/**
+		 * Hash Plugin
+		 * @version 2.0.0
+		 * @author Artus Kolanowski
+		 * @license The MIT License (MIT)
+		 */
+		;(function($, window, document, undefined) {
+			'use strict';
+
+			/**
+			 * Creates the hash plugin.
+			 * @class The Hash Plugin
+			 * @param {Owl} carousel - The Owl Carousel
+			 */
+			var Hash = function(carousel) {
+				/**
+				 * Reference to the core.
+				 * @protected
+				 * @type {Owl}
+				 */
+				this._core = carousel;
+
+				/**
+				 * Hash table for the hashes.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._hashes = {};
+
+				/**
+				 * The carousel element.
+				 * @type {jQuery}
+				 */
+				this.$element = this._core.$element;
+
+				/**
+				 * All event handlers.
+				 * @protected
+				 * @type {Object}
+				 */
+				this._handlers = {
+					'initialized.owl.carousel': $.proxy(function() {
+						if (this._core.settings.startPosition == 'URLHash') {
+							$(window).trigger('hashchange.owl.navigation');
+						}
+					}, this),
+					'prepared.owl.carousel': $.proxy(function(e) {
+						var hash = $(e.content).find('[data-hash]').andSelf('[data-hash]').attr('data-hash');
+						this._hashes[hash] = e.content;
+					}, this)
+				};
+
+				// set default options
+				this._core.options = $.extend({}, Hash.Defaults, this._core.options);
+
+				// register the event handlers
+				this.$element.on(this._handlers);
+
+				// register event listener for hash navigation
+				$(window).on('hashchange.owl.navigation', $.proxy(function() {
+					var hash = window.location.hash.substring(1),
+						items = this._core.$stage.children(),
+						position = this._hashes[hash] && items.index(this._hashes[hash]) || 0;
+
+					if (!hash) {
+						return false;
+					}
+
+					this._core.to(position, false, true);
+				}, this));
+			}
+
+			/**
+			 * Default options.
+			 * @public
+			 */
+			Hash.Defaults = {
+				URLhashListener: false
+			}
+
+			/**
+			 * Destroys the plugin.
+			 * @public
+			 */
+			Hash.prototype.destroy = function() {
+				var handler, property;
+
+				$(window).off('hashchange.owl.navigation');
+
+				for (handler in this._handlers) {
+					this._core.$element.off(handler, this._handlers[handler]);
+				}
+				for (property in Object.getOwnPropertyNames(this)) {
+					typeof this[property] != 'function' && (this[property] = null);
+				}
+			}
+
+			$.fn.owlCarousel.Constructor.Plugins.Hash = Hash;
+
+		})(window.Zepto || window.jQuery, window, document);
+	});
\ No newline at end of file
diff --git a/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/js/owl.config.js b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/js/owl.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..f56f7092801cd924deca879b4373c53914dc4a3f
--- /dev/null
+++ b/app/code/WeltPixel/OwlCarouselSlider/view/frontend/web/js/owl.config.js
@@ -0,0 +1,74 @@
+var OWL = {
+	init: function () {
+	},
+
+	load: function () {
+		this.arrows();
+	},
+
+	resize: function () {
+		this.arrows();
+	},
+
+	ajaxComplete: function () {
+		this.loader();
+	},
+
+	arrows: function () {
+		var carouselElement = jQuery('[class*="owl-carousel-products-"]'),
+			windowWidth = jQuery(window).width(),
+			carouselWidth = carouselElement.width(),
+			carouselContainer = carouselWidth + 120,
+			carouselControls = carouselElement.find('.owl-nav');
+
+		var rowParent = jQuery('.owl-prev').parents().find('.row').get(0);
+		var leftPosition = 0,
+			rightPosition = 0;
+		if (rowParent) {
+            leftPosition = Math.abs(parseInt(jQuery(rowParent).css('margin-left')));
+            rightPosition = Math.abs(parseInt(jQuery(rowParent).css('margin-right')));
+		}
+
+		if (carouselContainer >= windowWidth) {
+			carouselControls.addClass('fullscreen').find('.owl-prev').css({
+				'left': leftPosition,
+				'top': 0
+			});
+			carouselControls.addClass('fullscreen').find('.owl-next').css({
+				'right': rightPosition,
+				'top': 0
+			});
+		} else {
+			carouselControls.find('.owl-prev').removeClass('fullscreen').removeAttr('style');
+			carouselControls.find('.owl-next').removeClass('fullscreen').removeAttr('style');
+		}
+	},
+
+	loader: function () {
+			jQuery('.custom-slider #pre-div, .products.products-grid #pre-div').each(function(){
+				jQuery(this).fadeOut('slow');
+			});
+	}
+};
+
+require(['jquery'],
+	function ($) {
+		$(document).ready(function () {
+			OWL.init();
+		});
+
+		$(window).load(function () {
+			OWL.load();
+		});
+
+		$(document).ready(function(){
+			OWL.ajaxComplete();
+		});
+
+		var reinitTimer;
+		$(window).on('resize', function () {
+			clearTimeout(reinitTimer);
+			reinitTimer = setTimeout(OWL.resize(), 100);
+		});
+	}
+);
diff --git a/pub/media/weltpixel/owlcarouselslider/images/e/_/e.png b/pub/media/weltpixel/owlcarouselslider/images/e/_/e.png
new file mode 100644
index 0000000000000000000000000000000000000000..32a14f720f2e8543d03d36d7a62c3c40f59f59fa
Binary files /dev/null and b/pub/media/weltpixel/owlcarouselslider/images/e/_/e.png differ
diff --git a/pub/media/weltpixel/owlcarouselslider/images/i/m/images-9.jpg b/pub/media/weltpixel/owlcarouselslider/images/i/m/images-9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..72180509be9d156b38d1ab1a51b23fee7fcfa87c
Binary files /dev/null and b/pub/media/weltpixel/owlcarouselslider/images/i/m/images-9.jpg differ
diff --git a/pub/media/weltpixel/owlcarouselslider/images/m/a/magento1.jpg b/pub/media/weltpixel/owlcarouselslider/images/m/a/magento1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cb9d5961fa797e9e8262b3a00e96202bf232b2ae
Binary files /dev/null and b/pub/media/weltpixel/owlcarouselslider/images/m/a/magento1.jpg differ
diff --git a/pub/media/weltpixel/owlcarouselslider/images/m/a/magento2.jpg b/pub/media/weltpixel/owlcarouselslider/images/m/a/magento2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2478ff0f0b3fd1de95506f6fd0e8615b2619ff0f
Binary files /dev/null and b/pub/media/weltpixel/owlcarouselslider/images/m/a/magento2.jpg differ