Swiper is one of the most popular Slider JS library. Not only it's totally free to use (MIT Licensed), it's still updated regularly.
Check this video to learn how to manually add a Swiper Slider in Oxygen.
If you have Hydrogen Pack (aff link), you can copy and paste the following example (code below the slider).
eyJzb3VyY2UiOiJodHRwczovL294eWdlbjRmdW4uc3VwYWRlemlnbi5jb20iLCJjb21wb25lbnQiOlt7ImlkIjoyLCJuYW1lIjoiY3Rfc2VjdGlvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjIsImN0X3BhcmVudCI6MTAwMDExLCJzZWxlY3RvciI6InNlY3Rpb24tMi0xNjE3IiwibmljZW5hbWUiOiJTZWN0aW9uICgjMikiLCJjdF9kZXB0aCI6Mn0sImNoaWxkcmVuIjpbeyJpZCI6MywibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjMsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJkaXZfYmxvY2stMy0xNjE3IiwibmljZW5hbWUiOiJzd2lwZXIiLCJjbGFzc2VzIjpbInN3aXBlciIsInN3aXBlci1veHkxIl0sImFjdGl2ZXNlbGVjdG9yIjoic3dpcGVyLW94eTEiLCJjdF9kZXB0aCI6M30sImNoaWxkcmVuIjpbeyJpZCI6NCwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjQsImN0X3BhcmVudCI6Mywic2VsZWN0b3IiOiJkaXZfYmxvY2stNC0xNjE3IiwibmljZW5hbWUiOiJzd2lwZXItd3JhcHBlciIsImNsYXNzZXMiOlsic3dpcGVyLXdyYXBwZXIiXSwiYWN0aXZlc2VsZWN0b3IiOiJzd2lwZXItd3JhcHBlciIsImN0X2RlcHRoIjo0fSwiY2hpbGRyZW4iOlt7ImlkIjo1LCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NSwiY3RfcGFyZW50Ijo0LCJzZWxlY3RvciI6ImRpdl9ibG9jay01LTE2MTciLCJuaWNlbmFtZSI6InN3aXBlci1zbGlkZSIsImNsYXNzZXMiOlsic3dpcGVyLXNsaWRlIl0sImFjdGl2ZXNlbGVjdG9yIjoic3dpcGVyLXNsaWRlIiwiY3RfZGVwdGgiOjV9LCJjaGlsZHJlbiI6W3siaWQiOjYsIm5hbWUiOiJjdF9pbWFnZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjYsImN0X3BhcmVudCI6NSwic2VsZWN0b3IiOiJpbWFnZS02LTE2MTciLCJvcmlnaW5hbCI6eyJzcmMiOiJodHRwczovL294eWdlbjRmdW4uc3VwYWRlemlnbi5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMjEvMDEvYXN0cm9uYXV0LWZvb3RiYWxsXzcyMzczLTIxLmpwZyIsImFsdCI6ImFzdHJvbmF1dC1mb290YmFsbF83MjM3My0yMSJ9LCJuaWNlbmFtZSI6IkltYWdlICgjNikiLCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2RlcHRoIjo2LCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjo4fV0sImRlcHRoIjo3fSx7ImlkIjo3LCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NywiY3RfcGFyZW50Ijo0LCJzZWxlY3RvciI6ImRpdl9ibG9jay03LTE2MTciLCJuaWNlbmFtZSI6InN3aXBlci1zbGlkZSIsImNsYXNzZXMiOlsic3dpcGVyLXNsaWRlIl0sImFjdGl2ZXNlbGVjdG9yIjoic3dpcGVyLXNsaWRlIiwiY3RfZGVwdGgiOjV9LCJjaGlsZHJlbiI6W3siaWQiOjgsIm5hbWUiOiJjdF9pbWFnZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjgsImN0X3BhcmVudCI6Nywic2VsZWN0b3IiOiJpbWFnZS04LTE2MTciLCJvcmlnaW5hbCI6eyJzcmMiOiJodHRwczovL294eWdlbjRmdW4uc3VwYWRlemlnbi5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMjEvMDEvYXN0cm9uYXV0cy1lbmpveWluZy1zcGFjZV83MjM3My0zMi1lMTYxMTk4NDI3NzUzNi5qcGciLCJhbHQiOiJhc3Ryb25hdXRzLWVuam95aW5nLXNwYWNlXzcyMzczLTMyIn0sIm5pY2VuYW1lIjoiSW1hZ2UgKCM2KSIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfZGVwdGgiOjYsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjh9XSwiZGVwdGgiOjd9LHsiaWQiOjksIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjo5LCJjdF9wYXJlbnQiOjQsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTktMTYxNyIsIm5pY2VuYW1lIjoic3dpcGVyLXNsaWRlIiwiY2xhc3NlcyI6WyJzd2lwZXItc2xpZGUiXSwiYWN0aXZlc2VsZWN0b3IiOiJzd2lwZXItc2xpZGUiLCJjdF9kZXB0aCI6NX0sImNoaWxkcmVuIjpbeyJpZCI6MTAsIm5hbWUiOiJjdF9pbWFnZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjEwLCJjdF9wYXJlbnQiOjksInNlbGVjdG9yIjoiaW1hZ2UtMTAtMTYxNyIsIm9yaWdpbmFsIjp7InNyYyI6Imh0dHBzOi8vb3h5Z2VuNGZ1bi5zdXBhZGV6aWduLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAyMS8wMS9hc3Ryb25hdXQtcm9ja183MjM3My0zNS1lMTYxMTk4NDMyNDgzMC5qcGciLCJhbHQiOiJhc3Ryb25hdXQtcm9ja183MjM3My0zNSJ9LCJuaWNlbmFtZSI6IkltYWdlICgjNikiLCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2RlcHRoIjo2LCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjo4fV0sImRlcHRoIjo3fSx7ImlkIjoxMSwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjExLCJjdF9wYXJlbnQiOjQsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTExLTE2MTciLCJuaWNlbmFtZSI6InN3aXBlci1zbGlkZSIsImNsYXNzZXMiOlsic3dpcGVyLXNsaWRlIl0sImFjdGl2ZXNlbGVjdG9yIjoic3dpcGVyLXNsaWRlIiwiY3RfZGVwdGgiOjV9LCJjaGlsZHJlbiI6W3siaWQiOjEyLCJuYW1lIjoiY3RfaW1hZ2UiLCJvcHRpb25zIjp7ImN0X2lkIjoxMiwiY3RfcGFyZW50IjoxMSwic2VsZWN0b3IiOiJpbWFnZS0xMi0xNjE3Iiwib3JpZ2luYWwiOnsic3JjIjoiaHR0cHM6Ly9veHlnZW40ZnVuLnN1cGFkZXppZ24uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIxLzAxL2FzdHJvbmF1dC1zdWljaWRlXzcyMzczLTQyLWUxNjExOTg0MzU3NDY3LmpwZyIsImFsdCI6ImFzdHJvbmF1dC1zdWljaWRlXzcyMzczLTQyIn0sIm5pY2VuYW1lIjoiSW1hZ2UgKCM2KSIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfZGVwdGgiOjYsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjh9XSwiZGVwdGgiOjd9LHsiaWQiOjEzLCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6MTMsImN0X3BhcmVudCI6NCwic2VsZWN0b3IiOiJkaXZfYmxvY2stMTMtMTYxNyIsIm5pY2VuYW1lIjoic3dpcGVyLXNsaWRlIiwiY2xhc3NlcyI6WyJzd2lwZXItc2xpZGUiXSwiYWN0aXZlc2VsZWN0b3IiOiJzd2lwZXItc2xpZGUiLCJjdF9kZXB0aCI6NX0sImNoaWxkcmVuIjpbeyJpZCI6MTQsIm5hbWUiOiJjdF9pbWFnZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjE0LCJjdF9wYXJlbnQiOjEzLCJzZWxlY3RvciI6ImltYWdlLTE0LTE2MTciLCJvcmlnaW5hbCI6eyJzcmMiOiJodHRwczovL294eWdlbjRmdW4uc3VwYWRlemlnbi5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMjEvMDEvYmF0dGxlLXNwYWNlXzcyMzczLTQ0LWUxNjExOTg0Mzk3Nzc1LmpwZyIsImFsdCI6ImJhdHRsZS1zcGFjZV83MjM3My00NCJ9LCJuaWNlbmFtZSI6IkltYWdlICgjNikiLCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2RlcHRoIjo2LCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjo4fV0sImRlcHRoIjo3fSx7ImlkIjoxNSwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjE1LCJjdF9wYXJlbnQiOjQsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTE1LTE2MTciLCJuaWNlbmFtZSI6InN3aXBlci1zbGlkZSIsImNsYXNzZXMiOlsic3dpcGVyLXNsaWRlIl0sImFjdGl2ZXNlbGVjdG9yIjoic3dpcGVyLXNsaWRlIiwiY3RfZGVwdGgiOjV9LCJjaGlsZHJlbiI6W3siaWQiOjE2LCJuYW1lIjoiY3RfaW1hZ2UiLCJvcHRpb25zIjp7ImN0X2lkIjoxNiwiY3RfcGFyZW50IjoxNSwic2VsZWN0b3IiOiJpbWFnZS0xNi0xNjE3Iiwib3JpZ2luYWwiOnsic3JjIjoiaHR0cHM6Ly9veHlnZW40ZnVuLnN1cGFkZXppZ24uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIxLzAxL2RhbmNpbmctbW9vbl83MjM3My00NS1lMTYxMTk4NDQxMjMxMS5qcGciLCJhbHQiOiJkYW5jaW5nLW1vb25fNzIzNzMtNDUifSwibmljZW5hbWUiOiJJbWFnZSAoIzYpIiwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9kZXB0aCI6NiwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6OH1dLCJkZXB0aCI6N31dLCJkZXB0aCI6Nn0seyJpZCI6MTcsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoxNywiY3RfcGFyZW50IjozLCJzZWxlY3RvciI6ImRpdl9ibG9jay0xNy0xNjE3IiwibmljZW5hbWUiOiJzd2lwZXItcGFnaW5hdGlvbiIsImNsYXNzZXMiOlsic3dpcGVyLXBhZ2luYXRpb24iXSwiYWN0aXZlc2VsZWN0b3IiOiJzd2lwZXItcGFnaW5hdGlvbiIsImN0X2RlcHRoIjo0LCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjo2fSx7ImlkIjoyMiwibmFtZSI6ImN0X2Rpdl9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjIyLCJjdF9wYXJlbnQiOjMsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTIyLTE2MTciLCJuaWNlbmFtZSI6InN3aXBlci1idXR0b24tcHJldiIsImNsYXNzZXMiOlsic3dpcGVyLWJ1dHRvbi1wcmV2Il0sImFjdGl2ZXNlbGVjdG9yIjoic3dpcGVyLWJ1dHRvbi1wcmV2IiwiY3RfZGVwdGgiOjQsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjZ9LHsiaWQiOjIzLCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6MjMsImN0X3BhcmVudCI6Mywic2VsZWN0b3IiOiJkaXZfYmxvY2stMjMtMTYxNyIsIm5pY2VuYW1lIjoic3dpcGVyLWJ1dHRvbi1uZXh0IiwiY2xhc3NlcyI6WyJzd2lwZXItYnV0dG9uLW5leHQiXSwiYWN0aXZlc2VsZWN0b3IiOiJzd2lwZXItYnV0dG9uLW5leHQiLCJjdF9kZXB0aCI6NCwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6Nn1dLCJkZXB0aCI6NX0seyJpZCI6MTgsIm5hbWUiOiJjdF9jb2RlX2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6MTgsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJjb2RlX2Jsb2NrLTE4LTE2MTciLCJvcmlnaW5hbCI6eyJjb2RlLXBocCI6IiIsImNvZGUtY3NzIjoiLnN3aXBlci1veHkxIC5zd2lwZXItc2xpZGUgaW1nIHtcblx0d2lkdGg6MTAwJTtcblx0aGVpZ2h0OjEwMCU7XG5cdG9iamVjdC1maXQ6Y292ZXI7XG5cdHRyYW5zaXRpb246IDAuNnMgY3ViaWMtYmV6aWVyKDAuMzQsIDEuNTYsIDAuNjQsIDEpO1xuICAgIGZpbHRlcjogZ3JheXNjYWxlKDEwMCUpO1xuICAgIG9wYWNpdHk6IC41O1xufVxuXG4uc3dpcGVyLW94eTEgLnN3aXBlci1zbGlkZS5zd2lwZXItc2xpZGUtYWN0aXZlIGltZyxcbi5zd2lwZXItb3h5MSAuc3dpcGVyLXNsaWRlLnN3aXBlci1zbGlkZS1kdXBsaWNhdGUtYWN0aXZlIGltZ3tcbiAgICB0cmFuc2Zvcm06IHNjYWxlKC45KTtcbiAgICBmaWx0ZXI6IGdyYXlzY2FsZSgwJSk7XG4gICAgb3BhY2l0eTogMTtcbn0iLCJjb2RlLWpzIjoialF1ZXJ5KGRvY3VtZW50KS5yZWFkeSggZnVuY3Rpb24oKSB7XG5jb25zdCBzd2lwZXIgPSBuZXcgU3dpcGVyKCcuc3dpcGVyLW94eTEnLCB7XG4gIC8vIE9wdGlvbmFsIHBhcmFtZXRlcnNcbiAgbG9vcDogdHJ1ZSxcblx0Y2VudGVyZWRTbGlkZXM6dHJ1ZSxcblx0bW91c2V3aGVlbDp0cnVlLFxuXHRwYXJhbGxheDogdHJ1ZSxcblx0Z3JhYkN1cnNvcjogdHJ1ZSxcblxuc2xpZGVzUGVyVmlldzogMSxcbiAgc3BhY2VCZXR3ZWVuOiAwLFxuICAvLyBSZXNwb25zaXZlIGJyZWFrcG9pbnRzXG4gIGJyZWFrcG9pbnRzOiB7XG4gICAgLy8gd2hlbiB3aW5kb3cgd2lkdGggaXMgPj0gNDgwcHhcbiAgICA0ODA6IHtcbiAgICAgIHNsaWRlc1BlclZpZXc6IDMsXG4gICAgICBzcGFjZUJldHdlZW46IDIwXG4gICAgfSxcbiAgICAvLyB3aGVuIHdpbmRvdyB3aWR0aCBpcyA+PSA2NDBweFxuICAgIDY0MDoge1xuICAgICAgc2xpZGVzUGVyVmlldzogNSxcbiAgICAgIHNwYWNlQmV0d2VlbjogMjBcbiAgICB9XG4gIH0sXHRcblx0XG4gIC8vIElmIHdlIG5lZWQgcGFnaW5hdGlvblxuICBwYWdpbmF0aW9uOiB7XG4gICAgZWw6ICcuc3dpcGVyLXBhZ2luYXRpb24nLFxuICB9LFxuXG4gIC8vIE5hdmlnYXRpb24gYXJyb3dzXG4gIG5hdmlnYXRpb246IHtcbiAgICBuZXh0RWw6ICcuc3dpcGVyLWJ1dHRvbi1uZXh0JyxcbiAgICBwcmV2RWw6ICcuc3dpcGVyLWJ1dHRvbi1wcmV2JyxcbiAgfVxufSk7XG59KTsifSwibmljZW5hbWUiOiJDb2RlIEJsb2NrICgjMTgpIiwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9kZXB0aCI6MywiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6NX1dLCJkZXB0aCI6NH1dLCJjbGFzc2VzIjp7InN3aXBlciI6eyJvcmlnaW5hbCI6e319LCJzd2lwZXItb3h5MSI6eyJvcmlnaW5hbCI6eyJ3aWR0aC11bml0IjoiJSIsIndpZHRoIjoiMTAwIiwiaGVpZ2h0IjoiNDAwIn19LCJzd2lwZXItd3JhcHBlciI6eyJrZXkiOiJzd2lwZXItd3JhcHBlciIsInBhcmVudCI6ImNvbXBvc2l0ZS1lbGVtZW50cyIsIm9yaWdpbmFsIjp7ImZsZXgtZGlyZWN0aW9uIjoicm93IiwiZGlzcGxheSI6ImZsZXgifX0sInN3aXBlci1zbGlkZSI6eyJrZXkiOiJzd2lwZXItc2xpZGUiLCJwYXJlbnQiOiJjb21wb3NpdGUtZWxlbWVudHMiLCJvcmlnaW5hbCI6e319LCJzd2lwZXItcGFnaW5hdGlvbiI6eyJvcmlnaW5hbCI6eyJ3aWR0aC11bml0IjoiJSIsImZsZXgtZGlyZWN0aW9uIjoicm93IiwiZGlzcGxheSI6ImZsZXgiLCJ3aWR0aCI6IjEwMCIsImp1c3RpZnktY29udGVudCI6ImNlbnRlciIsInRleHQtYWxpZ24iOiJjZW50ZXIifX0sInN3aXBlci1idXR0b24tcHJldiI6eyJvcmlnaW5hbCI6e319LCJzd2lwZXItYnV0dG9uLW5leHQiOnsib3JpZ2luYWwiOnt9fX0sImNvbG9ycyI6e319
CSS
.swiper-oxy1 .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: grayscale(100%);
opacity: .5;
}
.swiper-oxy1 .swiper-slide.swiper-slide-active img,
.swiper-oxy1 .swiper-slide.swiper-slide-duplicate-active img {
transform: scale(.9);
filter: grayscale(0%);
opacity: 1;
}Javascript
jQuery(document).ready(function() {
const swiper = new Swiper('.swiper-oxy1', {
// Optional parameters
loop: true,
centeredSlides: true,
mousewheel: true,
parallax: true,
grabCursor: true,
slidesPerView: 1,
spaceBetween: 0,
// Responsive breakpoints
breakpoints: {
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 20
},
// when window width is >= 640px
640: {
slidesPerView: 5,
spaceBetween: 20
}
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
});