There are a lot of different slider and carousel options. If you use a frontend framework like Bootstrap or Foundation, you'll see some native solutions. Plenty of libraries and addons as well: Owl Carousel, Ember Carousel, etc.
We will be using the multi-purpose Slick Slider
HTML:
This is relatively the simplest step here. However, the main gotcha was where the script tag was placed. It had to be at the very bottom before the closing <body> tag. If you have multiple vendor scripts then the order is relevant in how it all loads. In Ember, it should be placed below your rootURL and vendor assets.
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js">
</script>
Now you can create a basic ember component that you can add the slider in any of your templates.
JavaScript:
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
this._super(...arguments);
return this.$('.fade').slick({
accessibility: true,
adaptiveHeight: true,
autoplay: false,
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
});
},
});
You can check out the Slick documentation for other variables and settings like arrows, asNavFor, prevArrow, nextArrow, centerMode, lazyload, easing, mobileFirst, rows, slidesPerRow, etc.
CSS:
.fade {
color: white;
width: auto;
margin: 30px 50px 50px;
.slick-slide {
text-align: center;
font-size: 20px;
}
img {
margin: auto;
height: 80vh;
display: flex;
background-size: cover;
}
.box {
h1 {
margin-top: 9.5%
}
p {
margin-top: 10%;
justify-content: left;
}
}
.slider_content {
position: absolute;
bottom: 20px;
right: 20px;
padding-left: 20px;
padding-right: 20px;
background-color: #fff;
color: black;
width: 55%;
padding-left: 2rem;
padding-right: 2rem;
height: 22.5vh;
display: flex;
justify-content: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
font-style: 30px;
}
.slick-dots {
bottom: -30px;
}
}
And that's it. You now have a slick carousel in Ember.js.