Swiper

Dangerous swiper

by QMaster

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/js/swiper.jquery.js"></script>
<div class="swiper-container s1">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">lkk</div>
    <div class="swiper-slide">mnmcn</div>
    <div class="swiper-slide">klkd</div>
    <div class="swiper-slide">lkk</div>
    <div class="swiper-slide">mnmcn</div>
    <div class="swiper-slide">klkd</div>
  </div>
  <!-- If we need pagination -->
  <!--<div class="swiper-pagination"></div>-->
  <!-- If we need navigation buttons -->
  <!--<div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>-->
  <!-- If we need scrollbar -->
  <!--<div class="swiper-scrollbar"></div>-->
</div>
<br/>
<div class="swiper-container s2">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">jkjf</div>
    <div class="swiper-slide">kjfk</div>
    <div class="swiper-slide">klklk</div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination2"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev2"></div>
  <div class="swiper-button-next2"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar2"></div>
</div>

CSS

.s1 {
  width: 600px;
  height: 38px;
  background-color: yellow;
}

.s2 {
  width: 800px;
  height: 400px;
}
/* Arrows */

.swiper-button-prev2,
.swiper-button-next2 {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  -moz-background-size: 27px 44px;
  -webkit-background-size: 27px 44px;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-prev2.swiper-button-disabled,
.swiper-button-next2.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev2,
.swiper-container-rtl .swiper-button-next2 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

.swiper-button-prev2.swiper-button-black,
.swiper-container-rtl .swiper-button-next2.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev2.swiper-button-white,
.swiper-container-rtl .swiper-button-next2.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next2,
.swiper-container-rtl .swiper-button-prev2 {
  background-image:...

JavaScript

var mySwiper = new Swiper ('.s1', {
      //loop: true,
      slidesPerView: 'auto',
      freeMode: true,
      //pagination: '.swiper-pagination',
      //nextButton: '.swiper-button-next',
      //prevButton: '.swiper-button-prev',
      //scrollbar: '.swiper-scrollbar'
    });
    var mySwiper2 = new Swiper ('.s2', {
      loop: true,
      pagination: '.swiper-pagination2',
      nextButton: '.swiper-button-next2',
      prevButton: '.swiper-button-prev2',
      scrollbar: '.swiper-scrollbar2'
    });