This Carousel Slider can be produced a slider anywhere on your site. Owl Carousel is a famous touch facilitated jQuery plugin that allows you effortlessly to build a responsive carousel slider.
Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, you can easily create a tabbed interface. With this plug-in, you can transition through panes of local content in tabs or pills, even via drop-down menus.
You May Also like owl carousel with thumbnails
Usage
You can enable tabs in the following two ways −
- Via data attributes − you need to add data-toggle = “tab” or data-toggle = “pill” to the anchors. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling while adding the nav and nav-pills classes will apply pill styling.
when we use bootstrap tabs inside owl slider then the active class applies all the li elements then tabs not working properly so I got a solution for this. I use jquery custom code. a made an onClick function, on this function a removed all active class. by this solution tabs working fine in the slider.
Example of tabs in slide view
HTML
<ul class="nav nav-tabs">
<div class="owl_1 owl-carousel owl-theme">
<div class="item">
<li class="active"><a data-toggle="tab" href="#home">1</a></li>
</div>
<div class="item">
<li><a data-toggle="tab" href="#menu1">2</a></li>
</div>
<div class="item">
<li><a data-toggle="tab" href="#menu2">3</a></li>
</div>
<div class="item">
<li><a data-toggle="tab" href="#menu3">4</a></li>
</div>
<div class="item">
<li><a data-toggle="tab" href="#menu4">5</a></li>
</div>
</div>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>1</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>2</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>3</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3> 4</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="menu4" class="tab-pane fade">
<h3>5</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
SCSS
body {
background: rgb(0,42,255);
background: -moz-linear-gradient(162deg, rgba(0,42,255,1) 0%, rgba(255,0,52,1) 100%);
background: -webkit-linear-gradient(162deg, rgba(0,42,255,1) 0%, rgba(255,0,52,1) 100%);
background: linear-gradient(162deg, rgba(0,42,255,1) 0%, rgba(255,0,52,1) 100%);
padding: 30px 10px; height:100vh;
.nav-tabs {
border-bottom: none;
}
button.owl-prev {
position: absolute;
left: 0px;
top: 37%;
transform: translateY(-50%);
background-color: white!important;
width: 20px;
height: 20px;
border-radius: 100%!important;
color: #000!important;
}
button.owl-next {
position: absolute;
right: 0px;
top: 37%;
transform: translateY(-50%);
background-color: white!important;
width: 20px;
height: 20px;
border-radius: 100%!important;
color: #000!important;
}
.owl-dots {
display: none;
}
.item {
display: flex;
justify-content: center;
li{
a {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background-color: #fff;
border-radius: 100%;
color: #000;
text-transform: uppercase;
flex-wrap: wrap;
text-align: center;
font-size: 20px; text-decoration: none;
font-weight: 700;
}
&.active{a
{ background-color: #009688;
color: #fff;}}
}
}
.tab-content {
padding: 20px;
background-color: #fff;
font-size: 17px;
text-align: center;
line-height: 25px;
margin-top: 30px;
border-radius: 19px;
h3 {
font-size: 40px;
font-weight: bold;
}
}
}
JAVASCRIPT
$(' .owl_1').owlCarousel({
loop:false,
margin:2,
responsiveClass:true,autoplayHoverPause:true,
autoplay:true,
slideSpeed: 400,
paginationSpeed: 400,
autoplayTimeout:3000,
responsive:{
0:{
items:3,
nav:true,
loop:false
},
600:{
items:3,
nav:true,
loop:false
},
1000:{
items:3,
nav:true,
loop:false
}
}
})
$(document) .ready(function(){
var li = $(".owl-item li ");
$(".owl-item li").click(function(){
li.removeClass('active');
});
});
You may also like:
- medical biller interview questions
- slider tab
- mobile screen resolution list
- html interview questions
- Most Common Screen Resolutions In 2020