A slideshow component for cycling through elements (images or slides with any content) like a carousel.
Carousel component depends on Swiper plugin. Make sure to link to Swiper css and js files in your document:
Use this page as a reference.
You can pass almost any slider option to data-swiper-options='{}'
Usefull links
<!-- Pagination: Bullets -->
<div class="swiper swiper-nav-onhover" data-swiper-options='{
"spaceBetween": 20,
"loop": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Prev button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-left"></i>
</button>
<!-- Next button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-right"></i>
</button>
<!-- Bullets -->
<div class="swiper-pagination"></div>
</div>
<!-- Pagination: Progress bar -->
<div class="swiper swiper-nav-onhover" data-swiper-options='{
"spaceBetween": 20,
"pagination": {
"el": ".swiper-pagination",
"type": "progressbar"
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Prev button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-left"></i>
</button>
<!-- Next button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-right"></i>
</button>
<!-- Progress bar -->
<div class="swiper-pagination"></div>
</div>
<!-- Pagination: Fraction -->
<div class="swiper swiper-nav-onhover" data-swiper-options='{
"spaceBetween": 20,
"pagination": {
"el": ".swiper-pagination",
"type": "fraction"
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Prev button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-left"></i>
</button>
<!-- Next button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-rigsht"></i>
</button>
<!-- Fraction -->
<div class="swiper-pagination text-muted fs-5 lh-1 opacity-50 fw-semibold"></div>
</div>
<!-- Pagination: Scrollbar -->
<div class="ratio ratio-16x9">
<div class="swiper" data-swiper-options='{
"direction": "vertical",
"mousewheel": true,
"spaceBetween": 20,
"scrollbar": {
"el": ".swiper-scrollbar"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-secondary">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
</div>
</div>
</div>
<!-- Scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>// Pagination: Bullets
.swiper.swiper-nav-onhover(
data-swiper-options=`{
"spaceBetween": 20,
"loop": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}`
)
.swiper-wrapper
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 1
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 2
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 3
// Prev button
button(type="button").btn.btn-prev.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-left
// Next button
button(type="button").btn.btn-next.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-right
// Bullets
.swiper-pagination
// Pagination: Progress bar
.swiper.swiper-nav-onhover(
data-swiper-options=`{
"spaceBetween": 20,
"pagination": {
"el": ".swiper-pagination",
"type": "progressbar"
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}`
)
.swiper-wrapper
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 1
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 2
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 3
// Prev button
button(type="button").btn.btn-prev.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-left
// Next button
button(type="button").btn.btn-next.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-right
// Progress bar
.swiper-pagination
// Pagination: Fraction
.swiper.swiper-nav-onhover(
data-swiper-options=`{
"spaceBetween": 20,
"pagination": {
"el": ".swiper-pagination",
"type": "fraction"
},
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}`
)
.swiper-wrapper
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 1
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 2
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 3
// Prev button
button(type="button").btn.btn-prev.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-left
// Next button
button(type="button").btn.btn-next.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-right
// Fraction
.swiper-pagination.text-muted.fs-5.lh-1.opacity-50.fw-semibold
// Pagination: Scrollbar
.ratio.ratio-16x9
.swiper(
data-swiper-options=`{
"direction": "vertical",
"mousewheel": true,
"spaceBetween": 20,
"scrollbar": {
"el": ".swiper-scrollbar"
}
}`
)
.swiper-wrapper
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 1
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 2
// Item
.swiper-slide
.ratio.ratio-16x9.bg-secondary
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-4
| 3
// Scrollbar
.swiper-scrollbar
<!-- Multiple slides responsive slider with external Prev / Next buttons and bullets outside -->
<div class="position-relative px-5">
<!-- External slider prev/next buttons -->
<button type="button" id="prev" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle position-absolute top-50 start-0 translate-middle-y mt-n3">
<i class="ai-arrow-left"></i>
</button>
<button type="button" id="next" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle position-absolute top-50 end-0 translate-middle-y mt-n3">
<i class="ai-arrow-right"></i>
</button>
<!-- Slider -->
<div class="swiper" data-swiper-options='{
"slidesPerView": 1,
"spaceBetween": 16,
"loop": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"navigation": {
"prevEl": "#prev",
"nextEl": "#next"
},
"breakpoints": {
"600": {
"slidesPerView": 2
},
"1000": {
"slidesPerView": 3
}
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-faded-info">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-faded-success">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-faded-danger">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-4x3 bg-faded-warning">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
</div>
</div>
</div>
<!-- Pagination (Bullets) -->
<div class="swiper-pagination position-relative bottom-0 mt-4"></div>
</div>
</div>// Multiple slides responsive slider with external Prev / Next buttons and bullets outside
.position-relative.px-5
// External slider prev/next buttons
button(type="button")#prev.btn.btn-prev.btn-icon.btn-sm.btn-outline-primary.rounded-circle.position-absolute.top-50.start-0.translate-middle-y.mt-n3
i.ai-arrow-left
button(type="button")#next.btn.btn-next.btn-icon.btn-sm.btn-outline-primary.rounded-circle.position-absolute.top-50.end-0.translate-middle-y.mt-n3
i.ai-arrow-right
// Slider
.swiper(
data-swiper-options=`{
"slidesPerView": 1,
"spaceBetween": 16,
"loop": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"navigation": {
"prevEl": "#prev",
"nextEl": "#next"
},
"breakpoints": {
"600": {
"slidesPerView": 2
},
"1000": {
"slidesPerView": 3
}
}
}`
)
.swiper-wrapper
// Item
.swiper-slide
.ratio.ratio-4x3.bg-faded-info
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| 1
// Item
.swiper-slide
.ratio.ratio-4x3.bg-faded-success
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| 2
// Item
.swiper-slide
.ratio.ratio-4x3.bg-faded-danger
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| 3
// Item
.swiper-slide
.ratio.ratio-4x3.bg-faded-warning
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| 4
// Pagination (Bullets)
.swiper-pagination.position-relative.bottom-0.mt-4
<!-- Slider with fade transition between slides -->
<div class="swiper" data-swiper-options='{
"effect": "fade",
"loop": true,
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide bg-light">
<div class="ratio ratio-16x9 bg-faded-info">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">First</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide bg-light">
<div class="ratio ratio-16x9 bg-faded-danger">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Second</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide bg-light">
<div class="ratio ratio-16x9 bg-faded-warning">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Third</div>
</div>
</div>
</div>
<!-- Prev button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-left"></i>
</button>
<!-- Next button -->
<button type="button" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle">
<i class="ai-arrow-rigsht"></i>
</button>
</div>// Slider with fade transition between slides
.swiper.swiper-nav-onhover(
data-swiper-options=`{
"effect": "fade",
"loop": true,
"navigation": {
"prevEl": ".btn-prev",
"nextEl": ".btn-next"
}
}`
)
.swiper-wrapper
// Item
.swiper-slide.bg-light
.ratio.ratio-16x9.bg-faded-info
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| First
// Item
.swiper-slide.bg-light
.ratio.ratio-16x9.bg-faded-danger
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| Second
// Item
.swiper-slide.bg-light
.ratio.ratio-16x9.bg-faded-warning
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| Third
// Prev button
button(type="button").btn.btn-prev.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-left
// Next button
button(type="button").btn.btn-next.btn-icon.btn-sm.btn-outline-primary.rounded-circle
i.ai-arrow-right
<!-- Swiper slider with thumbnails example -->
<div class="swiper" data-swiper-options='{
"loop": true,
"thumbnails": {
"el": "#thumbnails",
"images": [
"assets/img/components/thumb01.png",
"assets/img/components/thumb02.png",
"assets/img/components/thumb03.png"
]
}
}'>
<div class="swiper-wrapper">
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-faded-warning">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">First</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-faded-success">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Second</div>
</div>
</div>
<!-- Item -->
<div class="swiper-slide">
<div class="ratio ratio-16x9 bg-faded-danger">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Third</div>
</div>
</div>
</div>
</div>
<!-- Thumbnails -->
<div id="thumbnails" class="swiper-thumbnails flex-nowrap"></div>// Swiper slider with thumbnails example
.swiper(
data-swiper-options=`{
"loop": true,
"thumbnails": {
"el": "#thumbnails",
"images": [
"assets/img/components/thumb01.png",
"assets/img/components/thumb02.png",
"assets/img/components/thumb03.png"
]
}
}`
)
.swiper-wrapper
// Item
.swiper-slide
.ratio.ratio-16x9.bg-faded-warning
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| First
// Item
.swiper-slide
.ratio.ratio-16x9.bg-faded-success
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| Second
// Item
.swiper-slide
.ratio.ratio-16x9.bg-faded-danger
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
| Third
// Thumbnails
#thumbnails.swiper-thumbnails.flex-nowrap
<!-- Link swiper slides to any content via binded-content -->
<div class="row align-items-center">
<div class="col-md-5 mb-4 mb-md-0 pb-1 pb-md-0">
<!-- Binded items -->
<div class="binded-content">
<!-- Item -->
<div id="item1" class="binded-item active">
<div class="ratio ratio-4x3 bg-faded-danger">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
<i class="ai-image text-danger opacity-80"></i>
</div>
</div>
</div>
<!-- Item -->
<div id="item2" class="binded-item">
<div class="ratio ratio-4x3 bg-faded-success">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
<i class="ai-image text-success opacity-80"></i>
</div>
</div>
</div>
<!-- Item -->
<div id="item3" class="binded-item">
<div class="ratio ratio-4x3 bg-faded-warning">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
<i class="ai-image text-warning opacity-80"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 ps-xl-5">
<!-- Swiper slider -->
<div class="swiper" data-swiper-options='{
"spaceBetween": 30,
"loop": true,
"bindedContent": true,
"navigation": {
"prevEl": "#prev-btn",
"nextEl": "#next-btn"
}
}'>
<div class="swiper-wrapper text-center text-md-start">
<!-- Item -->
<div class="swiper-slide" data-swiper-binded="#item1">
<h3> First slide</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
</div>
<!-- Item -->
<div class="swiper-slide" data-swiper-binded="#item2">
<h3> Second slide</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
</div>
<!-- Item -->
<div class="swiper-slide" data-swiper-binded="#item3">
<h3> Third slide</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
</div>
</div>
<!-- Slider controls (Prev / next) -->
<div class="d-flex justify-content-center justify-content-md-start pt-2">
<button type="button" id="prev-btn" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle me-2">
<i class="ai-arrow-left"></i>
</button>
<button type="button" id="next-btn" class="btn btn-prev btn-icon btn-sm btn-outline-primary rounded-circle ms-2">
<i class="ai-arrow-rigsht"></i>
</button>
</div>
</div>
</div>
</div>// Link swiper slides to any content via binded-content
.row.align-items-center
.col-md-5.mb-4.mb-md-0.pb-1.pb-md-0
// Binded items
.binded-content
// Item
#item1.binded-item.active
.ratio.ratio-4x3.bg-faded-danger
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
i.ai-image.text-danger.opacity-80
// Item
#item2.binded-item
.ratio.ratio-4x3.bg-faded-success
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
i.ai-image.text-success.opacity-80
// Item
#item3.binded-item
.ratio.ratio-4x3.bg-faded-warning
.position-absolute.top-0.start-0.w-100.h-100.d-flex.align-items-center.justify-content-center.display-5
i.ai-image.text-warning.opacity-80
.col-md-7.ps-xl-5
// Swiper slider
.swiper(
data-swiper-options=`{
"spaceBetween": 30,
"loop": true,
"bindedContent": true,
"navigation": {
"prevEl": "#prev-btn",
"nextEl": "#next-btn"
}
}`
)
.swiper-wrapper.text-center.text-md-start
// Item
.swiper-slide(data-swiper-binded="#item1")
h3 First slide
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.
// Item
.swiper-slide(data-swiper-binded="#item2")
h3 Second slide
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.
// Item
.swiper-slide(data-swiper-binded="#item3")
h3 Third slide
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.
// Slider controls (Prev / next)
.d-flex.justify-content-center.justify-content-md-start.pt-2
button(type="button")#prev-btn.btn.btn-prev.btn-icon.btn-sm.btn-outline-primary.rounded-circle.me-2
i.ai-arrow-left
button(type="button")#next-btn.btn.btn-next.btn-icon.btn-sm.btn-outline-primary.rounded-circle.ms-2
i.ai-arrow-right