Today, we’re saying you how to create divi carousel layout or section without any plugin! Not only, do you not need to purchase any plugin and this create divi carousel layout tutorial resources won’t slow down your website or your landing page.
BONUS: You can buy a Premium Divi Carousel Layout Pack when you’ll submit A Quote at our website. Buy A Divi Carousel Layout
What do create Divi Carousel Layout without any plugin?
An advanced form of slider called a “Divi carousel” may display numerous slides of content at once and automatically scroll from one set of images to the next. A create Divi carousel layout, as opposed to a conventional Divi slider module, frequently has a more realistic 3D appearance and lets you display any number of the preceding and following slides in the carousel set.
A Create Divi carousel layout differs from a Divi slider in that it shows numerous slides at once as opposed to the slider’s single presentation of material.
How to Create Divi Carousel Section without any plugin?
Pretty Do you need to add slick slider on your divi landing page? Okay let’s start how to create divi carousel layout team member section or layout. There are some of steps to acquiring the carousel:
First Step:
You create a page on your divi website then enable visual builder If you need more help, please contact us.
Second Step:
Not so hard, right? There is nothing to fear. After that you create a section and again create a row on your page then add an ID in your row [themomarket_team_slider_1]
Third Step:
Then you create some module between the columns. 1. Image module, 2. Text Module, 3. Text module 4. Social media follow module. Design them your way. I designed it my way, then you copy and past a column until there are 5 columns, ok now
Four Step:
Add a new row again, then add code module in your landing page. The row must only have one column and add some CSS and JavaScript code. I use a jQuery plugin into my carousel. See the jquery slick slider plugin
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<style>
.slick-slider {
overflow: hidden;
}
.slick-list {
margin: 0 -24px;
}
.slick-slide{
padding: 0 24px;
margin:0!important;
}
.slick-arrow {
cursor: pointer;
color: transparent;
background: transparent;
position: absolute;
top: 50%;
margin-top: 0px;
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
z-index:10;
}
#themomarket_team_slider_1 .slick-prev {
left: 0px;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 25px solid #0b3d2c;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#themomarket_team_slider_1 .slick-next {
right: 0px;
width: 0;
height: 0;
border-right: 0 solid transparent;
border-left: 25px solid #0b3d2c;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#themomarket_team_slider_1:hover .slick-arrow {
opacity: 1;
visibility: visible;
margin-top: -15px;
}
#themomarket_team_1 .et_pb_image_wrap .box-shadow-overlay{
border-radius:100%;
transition: all 600ms ease-in;
border:4px solid transparent;
}
#themomarket_team_slider_1 #themomarket_team_1.slick-center .et_pb_image_wrap .box-shadow-overlay,
#themomarket_team_1:hover .et_pb_image_wrap .box-shadow-overlay{
box-shadow:inset 0px 0px 0px 20px #ffffff;
border:4px solid #0b3d2c;
}
</style>
<script>
(function($) {
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$('#themomarket_team_slider_1').slick({
dots: false,
arrow:true,
autoplay: true,
autoplaySpeed: 1000,
infinite: true,
speed: 1000,
centerMode: true,
centerPadding: '0',
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
})(jQuery);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
Five Step:
Save your page, then we’re done! It should look like my own design to create Divi Carousel Layout. see the first Divi Carousel Section
How to add carousel in divi theme with our live supporting?
If you let us know via message, we will make you a slider with Divi theme. Before that, you need to open account from Divi official site and buy Divi theme.
I have briefed you very shortly. If you are happy with it, I will be happy too. If you need more help, let me showing your problem. Thank you so much!