The plugin used in this tutorial is jQuery UI widget.
You can download from repository directly or from the following link
Following code will go into integration section;
Divi > Integration > Above Head
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Following code will go into jQuesy script;
Dashboard > Settings > Jquery UI widget
jQuery(document).ready(function($) { $('.blog_carousel .et_pb_ajax_pagination_container').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 968, settings: { slidesToShow: 2 } }, { breakpoint: 680, settings: { slidesToShow: 1 } } ] }); });
Following CSS will go under custom CSS
Divi > Custom CSS
.blog_carousel .et_pb_post { padding:20px !important; margin:0px 10px !important; border: 1px solid #eee; } .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: -5%; width: 20px; height: 20px; margin-top: -10px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background: transparent; display: inline-block; width: 20px; height: 20px; line-height: 1; font-family: dashicons; text-decoration: inherit; font-weight: 400; font-style: normal; vertical-align: top; text-align: center; -webkit-transition: color .1s ease-in 0; transition: color .1s ease-in 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 9; } .slick-next { left: 20px; } .slick-prev:before { color: #000; font-size: 35px; content: "\f341"; } .slick-next:before { color: #000; font-size: 35px; content: "\f345"; }
Nice! Some little errors (?) occours: divi custom css says “outline should only be modified using :focus
Thanks! Can I see any example where you get error??