https://wplabo.idea-hack.com/blog/code-catalog/frontend/23703/
23 instant codes that can insert a slider using “Flickity”

23 instant codes that can insert a slider using “Flickity”

We introduce 22 instant code that can insert a slider using “Flickity”.

“Flickity” which can easily introduce sliders

With “Flickity” you can easily introduce sliders to your site.

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.

So I will introduce some codes.

Introduction

It is necessary to load the source.

Since Bootstrap or jQuery is just put in consideration for 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://unpkg.com/flickity@2/dist/flickity.min.css">

Javascript

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Only those who need it-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!--Only those who need it-->
<script type="text/javascript" src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Code collection

1: Leave the default setting

html
<div class="container bg-color my-5 p-5">
  <div class="flickity-1">
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
</div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.container div.flickity-1 div.carousel-cell {
  width: 100%;
  padding: 1.5em 0;
  background: #8C8;
  font-size: 80px;
  text-align: center;
  color: #fff;
}
JQuery
jQuery(function ($) {
  $('.flickity-1').flickity();
});
Edit on CodePen

2:Try to set the width of each slide to 50%

html
<div class="container bg-color my-5 p-5">
  <div class="flickity-2">
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
</div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.container div.flickity-2 div.carousel-cell {
  width: 50%;
  padding: 1.5em 0;
  background: #8C8;
  font-size: 80px;
  text-align: center;
  color: #fff;
}
JQuery
jQuery(function ($) {
  $('.flickity-2').flickity();
});
Edit on CodePen

3:Set the width of the slide to 50% and align it to the left

If you liked this article
please click on the "Like!".

Follow on Twetter !

Related Posts