<https://divilife.com/divi-carousel-without-a-plugin/>

Info on many settings and styling options at <https://kenwheeler.github.io/slick/>

• Add a single column row, with class **hws-slider-column** in the

column

• Add a module in the row and add a new preset to be used for styling,

copy the module as needed

• Add a code module in a new row with the below code
• Then make the following adjustments if needed
  • Column: Make the Width 90%
  • Column: Make the Max Width 1220px
  • Modules (in the preset)
    • Make the Content Width 100%
    • Make the Margin Top/Bottom 50px
    • Make the Margin Left/Right 25px
    • Reduce the Drop Shadow Blur Strength to 20px and decrease the

Shadow Color Opacity to .10

• Slides are top aligned. To vertically center align, replace the

.slick-slide class below with this one;

• .slick-slide {

position: relative; height: 100%; min-height: 1px; float:none; display: inline-block; vertical-align: middle; }

<style>
.slick-slider {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow-x: hidden;
margin: 0;
padding: 0 0 0px;
}
.slick-track:before, .slick-track:after {
display: table;
content: '';
}
.slick-slide {
position: relative;
height: 100%;
min-height: 1px;
float: left;
}
.hws-slider-column .slick-arrow, .hws-slider-column
.slick-arrow:hover, .hws-slider-column .slick-arrow:focus {
position: absolute;
font-size: 0;
line-height: 0;
padding: 0;
color: transparent;
outline: none;
background: rgba(122,105,230,0.3);
border: none;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
z-index: 100;
height: 50px;
vertical-align: middle;
border-radius: 50%;
width: 50px;
}
.hws-slider-column .slick-prev { left: -50px; }
.hws-slider-column .slick-next { right: -50px; }
.hws-slider-column .slick-arrow:before {
font-family: ETmodules;
color: #000;
background: transparent;
opacity: 1;
font-size: 46px;
vertical-align: middle;
color: #7a69e6;
text-align: center;
}
.hws-slider-column .slick-arrow:hover:before { opacity: 0.8; }
.hws-slider-column .slick-prev:before { content: '34'; }
.hws-slider-column .slick-next:before { content: '35'; }
.entry-content ul.slick-dots {
position: absolute;
bottom: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 10px;
height: 10px;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background-color: #B7B7B7;
border-radius: 10px;
}
.slick-dots li.slick-active button { background-color: #f7828e; }
@media(max-width: 980px) {
.hws-slider-column .slick-prev { left: -32px; }
.hws-slider-column .slick-next { right: -30px; }
}
@media(max-width: 499px) {
.hws-slider-column .slick-prev { left: -26px; }
.hws-slider-column .slick-next { right: -24px; }
}
</style>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.hws-slider-column').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1
}
}
]
});
});
</script>
Code language: HTML, XML (xml)

Slick.js versions {#slick.js-versions}

**New from kenwheeler, fixes issue @bakker site**
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">
</script>
**Original from Divi life**
<script
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js">
</script>
Code language: JavaScript (javascript)