@everymatrix/casino-slider 0.0.156 → 0.0.160

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "0.0.156",
+  "version": "0.0.160",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "910a5693b7608de8ffbb75ae3bb7f3317be7fe63"
+  "gitHead": "ef0d20b327a832c6afb156f4c964240ed12b3ae9"
 }

package/src/CasinoSlider.svelte

@@ -2,6 +2,7 @@
 
 <script lang="typescript">
   import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
 
   export let sliderdata:Array<any> = [];
   export let onclickeventname:string = 'defaultEvent';
@@ -10,6 +11,10 @@
   export let clientstyling:string = '';
   export let clientstylingurl:string = '';
   export let identity:string = '';
+  export let containermaxwidth:string = '';
+
+  let userAgent:String = window.navigator.userAgent;
+  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
 
   let carousel:any;
   let active:number;
@@ -79,8 +84,8 @@
   $: clientstylingurl && setClientStylingURL();
 </script>
 
-<div bind:this={customStylingContainer}>
-  <div class="CarouselContainer { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }">
+<div class="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" bind:this={customStylingContainer}>
+  <div class="CarouselContainer {isMobile ? 'CarouselContainerMobile' : ''} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" style="{ (location === 'headerMain') ? 'max-width: auto' : `max-width: ${containermaxwidth}px` }">
     <div class="CarouselLeftArrow" on:click="{() => scrollLeft()}">
       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
@@ -125,16 +130,27 @@
     font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
   }
 
+  .CarouselWrapper {
+    background: #D0046C;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to left, #FD2839, #D0046C);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to left, #FD2839, #D0046C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    &.CarouselWrapperHeaderMain {
+      background: transparent;
+    }
+  }
+
   .CarouselContainer {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    justify-content: space-between;
+    justify-content: center;
     width: 100%;
-    background: #D0046C;  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to left, #FD2839, #D0046C);  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to left, #FD2839, #D0046C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     color: #ffffff;
+    margin: 0 auto;
+    padding: 0 10px;
+    &.CarouselContainerMobile {
+      padding: 0;
+    }
 
     .CarouselItems {
       display: flex;
@@ -159,6 +175,7 @@
         text-align: center;
         line-height: ttp(1.6);
         transition: all 150ms ease-in-out;
+        white-space: nowrap;
 
         &:hover,
         &.active {
@@ -206,6 +223,8 @@
 
   .CarouselContainerHeaderMain {
     background: transparent;
+    margin: 0;
+    padding: 0;
     .CarouselLeftArrow, .CarouselRightArrow {
       background: transparent;
       width: unset;