slider fix and change

storybook/stories/sections/slider/SliderComponent.js

@@ -16,10 +16,18 @@ export const createSlider =
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
       const outer = createElement('outer', ['outer'], null, slide);
+      const contextBoxContent = slideData.context ? slideData.context : '';
+      const contextBoxContentImg = slideData.contextImg ? slideData.contextImg : '';
 
       if (slideData.imageSrc && slideData.imageSrc.length > 0) {
         const imageBox = createElement('div', ['image-box'], null, outer);
         createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
+        if (contextBoxContentImg) {
+          const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
+          createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
+        } else if (contextBoxContent) {
+          createElement('div', ['context-box'], contextBoxContent, imageBox);
+        }
       }
 
       const textBox = createElement('div', ['text-box'], null, outer);
@@ -40,6 +48,18 @@ export const createSlider =
         });
         buttonP.appendChild(btn);
       }
+
+      if (!slideData.imageSrc || slideData.imageSrc.length <= 0) {
+        if (contextBoxContent) {
+          textBox.classList.add('context');
+          if (contextBoxContentImg) {
+            const contentBox = createElement('div', ['context-box', 'context-box--image'], null, textBox);
+            createImage(contextBoxContentImg, 200, 50, '', [], contentBox);
+          } else if (contextBoxContent) {
+            createElement('div', ['context-box'], contextBoxContent, textBox);
+          }
+        }
+      }
     })
 
     new IHKSlider($(sliderComponent));

storybook/stories/sections/slider/SliderData.js

@@ -6,6 +6,7 @@ export const sliderData = [
     imageSrc: 'https://source.unsplash.com/9_bDrvW7bA8/900x600',
     cta: 'Mehr erfahren',
     link: '#',
+    contextImg: './logos/wirtschaftsdialoge.svg',
   },
   {
     kicker: 'Lorem Ipsum dolor 2',
@@ -14,6 +15,7 @@ export const sliderData = [
     imageSrc: null,
     cta: 'Mehr erfahren',
     link: '#',
+    context: 'Wirtschaftsmagazin',
   },
   {
     kicker: 'Lorem Ipsum dolor 2',

storybook/stories/sections/slider/slider.scss

@@ -261,6 +261,53 @@
     }
   }
 
+  .context-box {
+    position: absolute;
+    right: 0;
+    top: 40px;
+    z-index: 100;
+    min-width: 100px;
+    min-height: 47px;
+    padding: 8px 10px 10px 10px;
+    @include h4();
+    margin: 0;
+    text-align: right;
+    color: var(--theme-color-white);
+    background: linear-gradient(90deg, var(--theme-color-gradient-01) 25%,var(--theme-color-gradient-02) 57%,var(--theme-color-gradient-03) 112%);
+    @media(max-width: 999px) {
+      min-height: auto;
+    }
+    &--image {
+      padding: 4px 10px;
+      display: flex;
+      img {
+        height: 39px;
+      }
+    }
+  }
+  .image-box {
+    .context-box {
+      right: 20px;
+      @media(max-width: 999px) {
+        top: 110px;
+        right: 0;
+      }
+      @media(max-width: 567px) {
+        top: 60px;
+      }
+      @media(max-width: 319px) {
+        top: 40px;
+      }
+    }
+  }
+  .text-box {
+    &.context {
+      @media(max-width: 767px) {
+        padding-top: 100px;
+      }
+    }
+  }
+
   .slider-tabs {
     position: absolute;
     display: flex;