Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Elementbaukasten News-Slider

Verwendung

Zur Darstellung von aktuellen Informationen.

Vorschau

HTML

                
                  <div class="schoeck_slider schoeck_slider_news slider_controls_above_on_mobile">
  <div class="container">
    <div class="news_slider_owl slider_controls_above_on_mobile">
      <article class="element_wrapper">
        <div class="row">
          <div class="col-sm-4 col-xs-12 col-image">
            <div class="image">
              <img height="169" width="360" src="/img/dummy/360x202.png"/>
            </div>
          </div>
          <div class="col-sm-8 col-xs-12 col-content">
            <h2 class="header with_subheader">Titel</h2>
            <h3 class="subheader">Untertitel</h3>
            <div class="teaser cms_content">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
            </div>
            <div class="link_wrapper">
              <a href="#" target="_self" class="caret_link">mehr lesen</a>
            </div>
          </div>
        </div>
      </article>
      <article class="element_wrapper">
        <div class="row">
          <div class="col-sm-4 col-xs-12 col-image">
            <div class="image">
              <img height="169" width="360" src="/img/dummy/360x202.png"/>
            </div>
          </div>
          <div class="col-sm-8 col-xs-12 col-content">
            <h2 class="header with_subheader">Titel 2</h2>
            <h3 class="subheader">Untertitel 2</h3>
            <div class="teaser cms_content">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
            </div>
            <div class="link_wrapper">
              <a href="#" target="_self" class="caret_link">mehr lesen</a>
            </div>
          </div>
        </div>
      </article>
      <article class="element_wrapper">
        <div class="row">
          <div class="col-sm-4 col-xs-12 col-image">
            <div class="image">
              <img height="169" width="360" src="/img/dummy/360x202.png"/>
            </div>
          </div>
          <div class="col-sm-8 col-xs-12 col-content">
            <h2 class="header with_subheader">Titel 3</h2>
            <h3 class="subheader">Untertitel 3</h3>
            <div class="teaser cms_content">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
            </div>
            <div class="link_wrapper">
              <a href="#" target="_self" class="caret_link">mehr lesen</a>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>

CSS

              @charset "UTF-8";
/* owlcarousel basic styles */
.owl-carousel .owl-item {
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}
.owl-carousel .owl-item img {
  height: auto;
  width: 100%;
}
.owl-carousel .owl-controls .owl-nav {
  margin: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  padding: 0;
  margin: 0;
}
@media print, screen and (min-width: 768px) {
  .owl-carousel .owl-controls .owl-nav .owl-prev,
  .owl-carousel .owl-controls .owl-nav .owl-next {
    transform: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 40px;
  }
}
.owl-carousel .owl-controls .owl-nav .owl-prev:before,
.owl-carousel .owl-controls .owl-nav .owl-next:before {
  color: #fff;
  font-size: 54px;
  line-height: 54px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  transition: 0.2s color ease;
}
@media screen and (max-width: 767) {
  .owl-carousel .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel .owl-controls .owl-nav .owl-next:before {
    transition: none;
  }
}
@media screen and (min-width: 768px) {
  .owl-carousel .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel .owl-controls .owl-nav .owl-next:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.owl-carousel .owl-controls .owl-nav .owl-next:hover {
  background-color: transparent;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover:not(.disabled):before,
.owl-carousel .owl-controls .owl-nav .owl-next:hover:not(.disabled):before {
  color: #f9b200;
}
.owl-carousel .owl-controls .owl-nav .owl-prev.disabled,
.owl-carousel .owl-controls .owl-nav .owl-next.disabled {
  cursor: auto;
}
.owl-carousel .owl-controls .owl-nav .owl-prev {
  left: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.owl-carousel .owl-controls .owl-nav .owl-next {
  right: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-next:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.owl-carousel .owl-controls .owl-dots {
  margin-top: 40px;
}
@media screen and (max-width: 991px) {
  .owl-carousel .owl-controls .owl-dots {
    margin-top: 20px;
  }
}
.owl-carousel .owl-controls .owl-dots .owl-dot {
  height: 8px;
  width: 8px;
  margin-right: 8px;
}
.owl-carousel .owl-controls .owl-dots .owl-dot:last-child {
  margin-right: 0;
}
.owl-carousel .owl-controls .owl-dots .owl-dot span {
  height: 8px;
  width: 8px;
  background-color: #b3b3b3;
  border-radius: 50%;
  margin: 0;
}
.owl-carousel .owl-controls .owl-dots .owl-dot.active span {
  background-color: #0069b4;
}

/* ie10+11 browser hack */
_:-ms-input-placeholder,
:root .schoeck_slider .owl-carousel .owl-item .owl-lazy {
  transition: none;
}

/* schoeck slider */
.schoeck_slider .element_wrapper .image_wrapper span {
  display: block;
  text-align: center;
}
.schoeck_slider .element_wrapper .image_wrapper img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-block;
}
.schoeck_slider .element_wrapper .image_wrapper img.lazy-srcset {
  width: 100%;
  height: auto;
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper) {
  position: relative;
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper):before {
  top: 0;
  left: 0;
  display: block;
  padding-top: 56.25%;
  /* this forces 16:9 aspect ratio */
  width: 100%;
  content: '';
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper) img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* news slider */
.schoeck_slider_news .owl-stage-outer {
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  border: solid 1px #e6e6e6;
}
@media print {
  .schoeck_slider_news .owl-stage-outer {
    border: none !important;
  }
}
@media screen and (max-width: 767px) {
  .schoeck_slider_news .owl-stage-outer {
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);
  }
}
.schoeck_slider_news .owl-controls .owl-nav .owl-prev,
.schoeck_slider_news .owl-controls .owl-nav .owl-next {
  margin-top: -28px;
}
.schoeck_slider_news .owl-controls .owl-nav .owl-prev.disabled,
.schoeck_slider_news .owl-controls .owl-nav .owl-next.disabled {
  display: none !important;
}
.schoeck_slider_news .owl-controls .owl-nav .owl-prev {
  left: 25px;
}
.schoeck_slider_news .owl-controls .owl-nav .owl-next {
  right: 25px;
}
.schoeck_slider_news .owl-item article {
  padding: 40px 90px;
}
@media screen and (max-width: 767px) {
  .schoeck_slider_news .owl-item article {
    padding: 15px;
  }
}
@media screen and (max-width: 767px) {
  .schoeck_slider_news .owl-item article .col-image {
    margin-bottom: 15px;
  }
}
.schoeck_slider_news .owl-item article .image img {
  width: 100%;
  height: auto;
}
.schoeck_slider_news .owl-item article .header {
  margin: 0;
  font-size: 23px;
  font-size: 1.4375rem;
  line-height: 28px;
  line-height: 1.75rem;
}
@media screen and (max-width: 767px) {
  .schoeck_slider_news .owl-item article .header {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 25px;
    line-height: 1.5625rem;
  }
}
@media screen and (max-width: 400px) {
  .schoeck_slider_news .owl-item article .header {
    font-size: 19px;
    font-size: 1.1875rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 350px) {
  .schoeck_slider_news .owl-item article .header {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
.schoeck_slider_news .owl-item article .subheader {
  margin: 0;
  color: #f9b200;
  font-size: 18.75px;
  font-size: 1.17188rem;
  line-height: 21.75px;
  line-height: 1.35938rem;
}
@media screen and (max-width: 767px) {
  .schoeck_slider_news .owl-item article .subheader {
    font-size: 17.25px;
    font-size: 1.07813rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 400px) {
  .schoeck_slider_news .owl-item article .subheader {
    font-size: 16.5px;
    font-size: 1.03125rem;
    line-height: 20.25px;
    line-height: 1.26563rem;
  }
}
@media screen and (max-width: 350px) {
  .schoeck_slider_news .owl-item article .subheader {
    font-size: 15.75px;
    font-size: 0.98438rem;
    line-height: 19.5px;
    line-height: 1.21875rem;
  }
}
.schoeck_slider_news .owl-item article .teaser {
  margin-top: 15px;
}
.schoeck_slider_news .owl-item article .link_wrapper {
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .schoeck_slider_news .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev {
    left: 15px;
  }
}
@media screen and (max-width: 767px) {
  .schoeck_slider_news .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    right: 15px;
  }
}

/* controls above on mobile */
@media screen and (max-width: 767px) {
  .owl-carousel.slider_controls_above_on_mobile.has_multiple_articles .owl-item .element_wrapper {
    padding-top: 65px;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-dots {
    margin-top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 28px;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev {
    left: 0;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    right: 0;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev,
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    top: 20px;
    transform: translateY(0);
    margin-top: 0;
    z-index: 10;
    opacity: 1;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next:before {
    color: #b3b3b3;
    font-weight: bold !important;
    font-size: 25px;
    line-height: 25px;
    text-shadow: none;
  }
}

SCSS

              @import "../general/_general";

/* owlcarousel basic styles */
.owl-carousel {

  .owl-item {
    background-color:#fff;

    -webkit-backface-visibility:hidden;
    -webkit-transform:translateZ(0) scale(1.0, 1.0);

    img {
      height:auto;
      width:100%;
    }
  }

  .owl-controls {
    .owl-nav {
      margin:0;

      .owl-prev,
      .owl-next {
        @include autocenterY();
        background-color:transparent;
        padding:0;
        margin:0;

        @media print, screen and (min-width:$screen-sm-min) {
          @include transform(none);
          position:absolute;
          top:0;
          height:100%;
          width:40px;
        }

        &:before {
          color:$white;
          font-size:54px;
          line-height:54px;
          text-shadow:0 1px 10px rgba(0, 0, 0, .6);
          @include linkcolor-transition;

          @media screen and (min-width:$screen-sm-min) {
            @include autocenterXY();
          }
        }

        &:hover {
          background-color:transparent;

          &:not(.disabled) {
            &:before {
              color:$orange;
            }
          }
        }

        &.disabled {
          cursor:auto;
        }
      }

      .owl-prev {
        left:0;
        @include schoeck-icon($icon-arrow-left);
      }

      .owl-next {
        right:0;
        @include schoeck-icon($icon-arrow-right);
      }
    }
    .owl-dots {
      margin-top:40px;

      @media screen and (max-width:$screen-sm-max) {
        margin-top:20px;
      }

      .owl-dot {
        height:8px;
        width:8px;
        margin-right:8px;

        &:last-child {
          margin-right:0;
        }

        span {
          height:8px;
          width:8px;
          background-color:$grey;
          @include border-radius(50%);
          margin:0;
        }

        &.active {
          span {
            background-color:$blue;
          }
        }
      }
    }
  }
}

/* ie10+11 browser hack */
_:-ms-input-placeholder,
:root .schoeck_slider .owl-carousel .owl-item .owl-lazy {
  @include transition(none);
}

/* schoeck slider */

.schoeck_slider {
  .element_wrapper {
    .image_wrapper {
      span {
        display:block;
        text-align:center;
      }

      img {
        width:auto;
        height:auto;
        max-width:100%;
        display:inline-block;

        &.lazy-srcset {
          width:100%;
          height:auto;
        }
      }

      &:not(.play_icon_wrapper) {
        position:relative;

        &:before {
          top:0;
          left:0;
          display:block;
          padding-top:(9 / 16) * 100%; /* this forces 16:9 aspect ratio */
          width:100%;
          content:'';
        }

        img {
          @include autocenterXY();
        }
      }
    }
  }
}

/* news slider */
.schoeck_slider_news {
  .owl-stage-outer {
    @include border-radius(6px);
    background-color:#fff;
    @include box-shadow(0 2px rgba(0, 0, 0, .05));
    border:solid 1px $lightgrey;

    @media print {
      border:none !important;
    }

    @media screen and (max-width:$screen-xs-max) {
      @include box-shadow(1px 2px 6px rgba(0, 0, 0, .1));
    }
  }

  .owl-controls {
    .owl-nav {
      .owl-prev,
      .owl-next {
        margin-top:-28px;

        &.disabled {
          display:none !important;
        }
      }
      .owl-prev {
        left:25px;
      }
      .owl-next {
        right:25px;
      }
    }
  }

  .owl-item {
    article {
      padding:40px 90px;

      @media screen and (max-width:$screen-xs-max) {
        padding:15px;
      }

      .col-image {
        @media screen and (max-width:$screen-xs-max) {
          margin-bottom:15px;
        }
      }

      .image {
        img {
          width:100%;
          height:auto;
        }
      }

      .header {
        margin:0;
        @include rem-font-size(23);
        @include rem-line-height(28);

        @media screen and (max-width:$screen-xs-max) {
          @include rem-font-size(20);
          @include rem-line-height(25);
        }

        @media screen and (max-width:400px) {
          @include rem-font-size(19);
          @include rem-line-height(22);
        }

        @media screen and (max-width:350px) {
          @include rem-font-size(18);
          @include rem-line-height(21);
        }
      }

      .subheader {
        $subheader-factor:0.75;

        margin:0;
        color:$orange;
        @include rem-font-size(25 * $subheader-factor);
        @include rem-line-height(29 * $subheader-factor);

        @media screen and (max-width:$screen-xs-max) {
          @include rem-font-size(23 * $subheader-factor);
          @include rem-line-height(28 * $subheader-factor);
        }

        @media screen and (max-width:400px) {
          @include rem-font-size(22 * $subheader-factor);
          @include rem-line-height(27 * $subheader-factor);
        }

        @media screen and (max-width:350px) {
          @include rem-font-size(21 * $subheader-factor);
          @include rem-line-height(26 * $subheader-factor);
        }
      }

      .teaser {
        margin-top:15px;
      }

      .link_wrapper {
        margin-top:5px;
      }
    }
  }
  .owl-carousel {
    &.slider_controls_above_on_mobile {
      .owl-controls {
        .owl-nav {
          .owl-prev {
            @media screen and (max-width:$screen-xs-max) {
              left:15px;
            }
          }
          .owl-next {
            @media screen and (max-width:$screen-xs-max) {
              right:15px;
            }
          }
        }
      }
    }
  }
}

/* controls above on mobile */
.owl-carousel.slider_controls_above_on_mobile {
  @media screen and (max-width:$screen-xs-max) {
    &.has_multiple_articles {
      .owl-item {
        .element_wrapper {
          padding-top:65px;
        }
      }
    }

    .owl-controls {
      .owl-dots {
        margin-top:0;
        @include autocenterX();
        top:28px;
        width:100%;
        padding-left:50px;
        padding-right:50px;
      }

      .owl-nav {
        .owl-prev {
          left:0;
        }
        .owl-next {
          right:0;
        }

        .owl-prev,
        .owl-next {
          top:20px;
          @include translateY(0);
          margin-top:0;
          z-index:10;
          opacity:1;

          &:before {
            color:$grey;
            font-weight:bold !important;
            font-size:25px;
            line-height:25px;
            text-shadow:none;
          }
        }
      }
    }
  }
}

JavaScript

                jQuery(document).ready(function() {
  jQuery('.news_slider_owl').each(function() {
    var $owl=jQuery(this),
      hasMultipleArticles=($owl.find('article').length>1);

    if(hasMultipleArticles)
      $owl.addClass('has_multiple_articles');

    $owl.owlCarousel({
      lazyLoadSrcset: true,
      items: 1,
      nav: (hasMultipleArticles),
      navText: ['', ''],
      dots: (hasMultipleArticles),
      mouseDrag: (hasMultipleArticles),
      touchTrag: (hasMultipleArticles),
      loop: (hasMultipleArticles),
      autoHeight: true,
      onResized: function() {
        $owl.data('owlCarousel')._plugins.autoHeight.update();
      },
      responsive: {
        0: {
          margin: 15
        },
        768: {
          margin: 40
        }
      }
    });
  });
});

Abhängigkeiten

www.owlcarousel2.github.io