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 Bilder-Slider

Verwendung

Zur Darstellung einer Bildersammlung.

Vorschau

HTML

                
                  <div class="container">
  <div class="schoeck_slider schoeck_basic_slider">
    <div class="basic_slider_owl image_slider_owl slider_controls_above_on_mobile">
      <div class="element_wrapper">
        <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
        </div>
        <div class="content cms_content">
          <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="schoeck_slider schoeck_basic_slider schoeck_slider_align_controls schoeck_basic_slider_outer_controls schoeck_slider_images_outer_arrows">
    <div class="ce_header">
      <h2 class="header">Slider - Bilder (Pfeile Außen)</h2>
    </div>
    <div class="slider_wrapper">
      <div class="basic_slider_owl slider_controls_above_on_mobile">
        <div class="element_wrapper">
          <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
          </div>
        </div>
        <div class="element_wrapper">
          <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
          </div>
        </div>
        <div class="element_wrapper">
          <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
          </div>
        </div>
        <div class="element_wrapper">
          <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
          </div>
        </div>
        <div class="element_wrapper">
          <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
          </div>
        </div>
        <div class="element_wrapper">
          <div class="image_wrapper">
          <span>
            <img src="/img/dummy/1140x640.png" height="640" width="1140"/>
          </span>
          </div>
          <div class="content cms_content">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      </div>
    </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%);
}

/* schoeck basic slider */
.schoeck_basic_slider .element_wrapper .content {
  margin-top: 25px;
  color: #7c7c7b;
  font-family: 'CorpidCd_TT5', Arial;
  font-weight: normal;
  font-style: normal;
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 17px;
  line-height: 1.0625rem;
  margin-top: 10px;
}
.schoeck_basic_slider .element_wrapper .content a {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 18px;
  line-height: 1.125rem;
}
.schoeck_basic_slider .element_wrapper .content a.caret_link:before {
  top: 0;
  margin-right: 2px;
}
.schoeck_basic_slider .element_wrapper .content .cms_content p {
  margin: 9px 0 18px;
  margin: 0.5625rem 0 1.125rem;
}
.schoeck_basic_slider .element_wrapper .content .cms_content ul,
.schoeck_basic_slider .element_wrapper .content .cms_content ol {
  margin: 9px 0 18px;
  margin: 0.5625rem 0 1.125rem;
}
@media screen and (max-width: 767px) {
  .schoeck_basic_slider .element_wrapper .content {
    margin-top: 10px;
  }
}
.schoeck_basic_slider .owl-carousel .owl-controls .owl-nav .owl-prev {
  left: 30px;
}
.schoeck_basic_slider .owl-carousel .owl-controls .owl-nav .owl-next {
  right: 30px;
}
.schoeck_basic_slider .owl-carousel .owl-controls .owl-dots {
  margin-top: 10px;
}
@media print, screen and (min-width: 992px) {
  .schoeck_basic_slider.schoeck_basic_slider_outer_controls .owl-controls .owl-nav .owl-prev {
    left: -55px;
  }
  .schoeck_basic_slider.schoeck_basic_slider_outer_controls .owl-controls .owl-nav .owl-next {
    right: -55px;
  }
}

/* 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();
        }
      }
    }
  }
}

/* schoeck basic slider */

.schoeck_basic_slider {
  .element_wrapper {
    .content {
      @include image-description;
      margin-top:10px;
    }
  }

  .owl-carousel {
    .owl-controls {
      .owl-nav {
        .owl-prev {
          left:30px;

        }
        .owl-next {
          right:30px;
        }
      }

      .owl-dots {
        margin-top:10px;
      }
    }
  }

  &.schoeck_basic_slider_outer_controls {
    .owl-controls {
      @media print, screen and (min-width:$screen-md-min) {
        .owl-nav {
          .owl-prev {
            left:-55px;
          }
          .owl-next {
            right:-55px;
          }
        }
      }
    }
  }
}

/* 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('.basic_slider_owl').each(function() {
    var $owl=jQuery(this),
      articleCount=$owl.find('.element_wrapper').length,
      hasMultipleArticles=(articleCount>1);

    if(articleCount<=1)
      return;

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

    $owl.owlCarousel({
      nav: (hasMultipleArticles),
      navText: ['', ''],
      loop: (hasMultipleArticles),
      dots: (hasMultipleArticles),
      mouseDrag: (hasMultipleArticles),
      touchDrag: (hasMultipleArticles),
      navRewind: false,
      autoHeight: true,
      margin: 15,
      items: 1,
      onResized: function() {
        $owl.data('owlCarousel')._plugins.autoHeight.update();
      }
    });
  });
});

Abhängigkeiten

www.owlcarousel2.github.io