CODEWITHSUNDEEP
htmljquerycssflickity
user9437856
user9437856

Reputation: 2388

How to end the cell till right arrow

I am using flickity slider. I am displaying each cell 26% and it's starting like below image which is correct for me.

enter image description here

and it's ending like the below image.

enter image description here

But I want to end my cell like this. Is it possible?

enter image description here

$('.carousel').flickity({
  freeScroll: true,
  prevNextButtons: true,
  pageDots: false,
  draggable: false
});
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 26%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}


/* cell number */

.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Upvotes: 0

Views: 424

Answers (1)

Dathov
Dathov

Reputation: 43

Maybe by using the "contain" property :

$('.carousel').flickity({
  freeScroll: true,
  prevNextButtons: true,
  pageDots: false,
  draggable: false,
  contain: true
});
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 26%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */

.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Upvotes: 0

Related Questions