fix(carousel): change properties' names;

update lit and ig versions

Author: RivaIvanova

samples/layouts/carousel/animations/index.html

@@ -27,7 +27,7 @@
             <igc-switch label-position="before">Vertical alignment</igc-switch>
           </div>
         </div>
-        <igc-carousel skip-indicator>
+        <igc-carousel hide-indicators>
           <igc-carousel-slide>
             <div class="slide-wrapper">
               <igc-card>

samples/layouts/carousel/animations/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-carousel-animations",
   "version": "1.0.0",
-  "description": "This project provides example of button group using IgniteUI for Web Components",
+  "description": "This project provides example of carousel animations using IgniteUI for Web Components",
   "main": "src/index.ts",
   "scripts": {
     "build": "npm run build:prod",
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.11.1",
-    "lit": "^2.0.2",
-    "lit-html": "^2.2.0",
+    "igniteui-webcomponents": "5.1.1",
+    "lit": "^3.2.1",
+    "lit-html": "^3.2.1",
     "tslib": "^2.6.3"
   },
   "devDependencies": {

samples/layouts/carousel/components/index.html

@@ -25,9 +25,7 @@
                 <igc-input type="password" placeholder="Password">
                   <igc-icon slot="prefix" name="password"></igc-icon>
                 </igc-input>
-                <div class="btn">
-                  <igc-button type="reset">Sign In</igc-button>
-                </div>
+                <igc-button type="reset">Sign In</igc-button>
               </form>
             </div>
           </igc-carousel-slide>
@@ -38,9 +36,7 @@
                 <igc-input type="text" placeholder="Search">
                   <igc-icon slot="prefix" name="search"></igc-icon>
                 </igc-input>
-                <div class="btn">
-                  <igc-button type="reset">Search</igc-button>
-                </div>
+                <igc-button type="reset">Search</igc-button>
               </form>
             </div>
           </igc-carousel-slide>

samples/layouts/carousel/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-carousel-with-components",
   "version": "1.0.0",
-  "description": "This project provides example of button group using IgniteUI for Web Components",
+  "description": "This project provides example of carousel with components using IgniteUI for Web Components",
   "main": "src/index.ts",
   "scripts": {
     "build": "npm run build:prod",
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.11.1",
-    "lit": "^2.0.2",
-    "lit-html": "^2.2.0",
+    "igniteui-webcomponents": "5.1.1",
+    "lit": "^3.2.1",
+    "lit-html": "^3.2.1",
     "tslib": "^2.6.3"
   },
   "devDependencies": {

samples/layouts/carousel/components/src/index.css

@@ -13,14 +13,16 @@ igc-carousel {
     height: 500px;
 }
 
-igc-carousel-slide::part(base) {
+igc-carousel-slide {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 igc-carousel-slide div {
     text-align: center;
+    max-width: 40%;
+    margin-inline: auto;
 }
 
 igc-carousel-slide div * {

samples/layouts/carousel/overview/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-carousel-overview",
   "version": "1.0.0",
-  "description": "This project provides example of button group using IgniteUI for Web Components",
+  "description": "This project provides example of carousel overview using IgniteUI for Web Components",
   "main": "src/index.ts",
   "scripts": {
     "build": "npm run build:prod",
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.11.1",
-    "lit": "^2.0.2",
-    "lit-html": "^2.2.0",
+    "igniteui-webcomponents": "5.1.1",
+    "lit": "^3.2.1",
+    "lit-html": "^3.2.1",
     "tslib": "^2.6.3"
   },
   "devDependencies": {

samples/layouts/carousel/thumbnail/index.html

@@ -15,10 +15,9 @@
     <div id="root">
       <div class="container sample">
         <igc-carousel
-          skip-pause-on-interaction
-          skip-navigation
+          disable-pause-on-interaction
+          hide-navigation
           interval="2000"
-          animation-type="fade"
           vertical
         >
           <igc-carousel-indicator>

samples/layouts/carousel/thumbnail/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-carousel-thumbnail",
   "version": "1.0.0",
-  "description": "This project provides example of button group using IgniteUI for Web Components",
+  "description": "This project provides example of carousel advanced example using IgniteUI for Web Components",
   "main": "src/index.ts",
   "scripts": {
     "build": "npm run build:prod",
@@ -23,9 +23,9 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "4.11.1",
-    "lit": "^2.0.2",
-    "lit-html": "^2.2.0",
+    "igniteui-webcomponents": "5.1.1",
+    "lit": "^3.2.1",
+    "lit-html": "^3.2.1",
     "tslib": "^2.6.3"
   },
   "devDependencies": {

samples/layouts/carousel/thumbnail/src/index.css

@@ -2,7 +2,6 @@
 /* https://static.infragistics.com/xplatform/css/samples */
 
 igc-carousel {
-
     width: 60%
 }