I’m trying to create a tile-like content carousel for a website I’m creating. Basically I need the ordinary content carousel functionality that comes in a lot of different jQuery plug-ins etc. – but instead of the slider being linear, I need the items to shift tiles in a circular manner like this:
I tried creating the setup using Flexbox and some simple jQuery:
$(document).ready(function () {
$(".item").each(function (index) {
$(this).css("order", index);
});
$(".prev").on("click", function () {
// Move all items one order back
$(".item").each(function (index) {
var currentOrder = parseInt($(this).css("order"));
if (currentOrder == undefined) {
currentOrder = index;
}
var newOrder = currentOrder - 1;
if (newOrder < 0) {
newOrder = 5;
}
$(this).css("order", newOrder);
});
});
$(".next").on("click", function () {
// Move all items one order forward
$(".item").each(function (index) {
var currentOrder = parseInt($(this).css("order"));
var newOrder = currentOrder + 1;
if (newOrder > 5) {
newOrder = 0;
}
$(this).css("order", newOrder);
});
});
});
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
}
.item {
width: 125px;
height: 75px;
color: white;
text-align: center;
font-size: 24px;
border: 1px solid white;
padding-top: 50px;
box-sizing: content-box;
background-color: rgb(42, 128, 185);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="prev">Prev</button>
<button class="next">Next</button>
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
<div class="item five">5</div>
<div class="item six">6</div>
</div>
but this leaves me with some unresolved issues:
- How do I animate the tiles when changing the order (when clicking next/prev)?
- How do I fix the order so that the items move in a continuous line instead of wrapping to the start of next line (I’d like the order to be like displayed in step 2 -> 3)?
Any existing plug-in (I’ve looked but can’t find any) or codepen etc. would be very much appreciated as I’m not sure if my approach is maintainable (or even doable).
Thanks a bunch 🙂
2
Answers
This kind of carousel ?
I’ve used absolute position formula from
index
to(top, left)
. Then i’ve used jQuery to animate that. That’s lame but can be improved if that’s an issue. It looks nice.