16 instant codes that can insert a slider with jQuery unnecessary “Swiper.js”

16 instant codes that can insert a slider with jQuery unnecessary “Swiper.js”

We provide slider instant code collection which can be realized using slick.js which does not require jQuery and can apply sliders.

“Swiper.js” that can introduce sliders without using jQuery

With Swiper.js, you can easily install sliders on your site.

Since this plugin does not need to use jQuery, jQuery is popular for dislikes.

However, if you do not know how to use it is surprisingly difficult to implement, and since you do not have to use it afterwards, remember that you have instant code so that you can introduce it easily.

Introduction

It is necessary to load the source. Since Bootstrap (CSS file only) is only in consideration of convenience, please respond flexibly.

CSS

html
<!--Only those who need it-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!--Only those who need it-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">

Javscript

css
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>

Code collection (basic)

1:Leave the default setting

1
2
3
4
5
html
<div class="container bg-color my-5 px-5 py-3">
  <div class="swiper-1 swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        1
      </div>
      <div class="swiper-slide">
        2
      </div>
      <div class="swiper-slide">
        3
      </div>
      <div class="swiper-slide">
        4
      </div>
      <div class="swiper-slide">
        5
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.swiper-1 .swiper-slide {
  padding: 1.5em 0;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  outline: 0;
  background-color: #4899DD;
}
javascript
  var swiper = new Swiper('.swiper-1', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
Only those who need it

2: Hide left and right navigation

1
2
3
4
5
html
<div class="container bg-color my-5 px-5 py-3">
  <div class="swiper-2 swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        1
      </div>
      <div class="swiper-slide">
        2
      </div>
      <div class="swiper-slide">
        3
      </div>
      <div class="swiper-slide">
        4
      </div>
      <div class="swiper-slide">
        5
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.swiper-2 div.swiper-slide {
  padding: 3em 0;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  outline: 0;
  background-color: #4899DD;
}
div.swiper-2 .swiper-button-prev {
  background: none;
}
div.swiper-2 .swiper-button-next {
  background: none;
}
javascript
  var swiper = new Swiper('.swiper-2', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
Only those who need it

3: Easy to use by changing the left and right icons to FontAwesome 5

Related Posts

Recent Posts