<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="css/owl.theme.default.css" type="text/css">
<section class="testimonials">
<div class="container text-center">
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12">
<div class="testimonial_image">
<img src="images/testimonial-image.png" alt="Testimonials">
<h2 class="mt-20">What Parents Said?</h2>
</div>
<div class="testimonials_section">
<div class="owl-carousel owl-theme" id="testimonial">
<div class="item">
<p>She is very interested in learning and this spell bee contest has helped her developing her skills. As parents, we are grateful.</p>
<div class="bt-position">Parents</div>
</div>
<div class="item">
<p>My daughter and son, both are very happy getting themselves along with spell bee. They got an excellent exposure and proficiency over the English language.</p>
<div class="bt-position">Parents</div>
</div>
<div class="item">
<p>Very well organized professionally and the event strongly motivates developing linguistic capabilities of every child.</p>
<div class="bt-position">Parents</div>
</div>
</div>
<div id="sync2" class="owl-carousel owl-theme mt-40">
<div class="item-s2">
<!-- <div class="bt-thumb"><img src="https://bearsthemespremium.com/theme/educlever/kindergarten/wp-content/uploads/2019/04/tes1.jpg"></div>-->
<div class="name"> <h3 class="bt-title">MR. V. DILLIBABU</h3></div>
</div>
<div class="item-s2">
<!-- <div class="bt-thumb"><img src="https://bearsthemespremium.com/theme/educlever/kindergarten/wp-content/uploads/2019/04/tes1.jpg"></div>-->
<div class="name"> <h3 class="bt-title">MS. DEEPA MAHARAJAN</h3></div>
</div>
<div class="item-s2">
<!-- <div class="bt-thumb"><img src="https://bearsthemespremium.com/theme/educlever/kindergarten/wp-content/uploads/2019/04/tes1.jpg"></div>-->
<div class="name"> <h3 class="bt-title">MR. Shishir Hathwar</h3></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="css/bootstrap/js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
.testimonials{
background-image: url(../images/testimonial.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 100px 0 100px;
}
.testimonial_image h2{
color: #fff;
font-size: 55px;
color: #ffffff;
line-height: 45px;
}
#testimonial p{
color: #ddd;
font-size: 18px;
line-height: 30px;
text-align: center;
margin-top: 30px;
}
#sync2 .owl-item.current .item-s2 {
margin-left: 0;
background: #ef7084;
padding: 10px;
border-radius: 50px;
line-height: 60px;
height: 80px;
position: relative;
}
#sync2 .owl-item.current .item-s2:before {
width: 20px;
height: 20px;
-moz-border-radius: 100px / 100px;
-webkit-border-radius: 100px / 100px;
border-radius: 100px / 100px;
position: absolute;
top: 0;
left: calc(50% - 10px);
z-index: 1;
content: "";
background: #ef7084;
}
#sync2 .owl-item.current .item-s2 .bt-thumb {
display: inline-block;
}
#sync2 .owl-item .item-s2 .bt-thumb {
display: none;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
vertical-align: middle;
margin-right: 5px;
}
#sync2 .owl-item .item-s2 .name {
display: inline-block;
vertical-align: middle;
}
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel, .owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
}
#sync2 .owl-item .item-s2 .name h3.bt-title {
font-size: 22px;
color: #fff;
line-height: 30px;
font-weight: 400;
margin: 0;
}
.bt-position {
font-size: 16px;
color: #ef7084;
line-height: 20px;
margin-top: 15px;
}
.item-s2{
background: rgba(141, 129, 131, 0.2);
padding: 10px;
border-radius: 50px;
line-height: 60px;
height: 80px;
cursor: pointer;
}
#testimonial .owl-prev{
position: absolute;
left: -30px;
top: 178px;
background-color: #fff;
border-radius: 50%;
padding: 10px 12px;
z-index: 1;
}
#testimonial .owl-next{
position: absolute;
right: -30px;
top: 178px;
background-color: #fff;
border-radius: 50%;
padding: 10px 12px;
z-index: 1;
}
.staff{
background-image: url(../images/staff-background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 100px 0;
}
.staff h2{
font-size: 55px;
color: #333333;
line-height: 45px;
}
.staff p{
font-size: 18px;
color: #666666;
line-height: 26px;
}
.staff_image{
height: 314px;
width: 100%;
overflow: hidden;
position: relative;
cursor: pointer;
}
.staff_overlay{
position: absolute;
z-index: 100;
background-color: rgba(0, 0, 0, 0.47);
height: 100%;
width: 100%;
opacity: 0;
top: 0;
}
.staff_hover:hover .staff_overlay{
opacity: 1;
}
.staff_image img{
width: 100%;
}
.staff_content{
margin: 20px 20px;
}
.staff_content h3{
line-height: 26px;
font-size: 17px;
color: #555;
}
.staff_content a{
font-size: 30px;
text-decoration: none;
line-height: 30px;
color: #4b4b4b;
display: block;
}
.staff_content a:hover{
color: #ef7084;
}
.staff_content h5{
font-size: 16px;
color: #ef7084;
}
.staff_social a{
width: 40px;
height: 40px;
text-align: center;
line-height: 37px;
border-radius: 50%;
background: #fff;
display: inline-block;
color: #333;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.32);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.32);
position: relative;
}
.staff_social i{
line-height: 37px;
font-size: 16px;
transform: translate(-50%, 5%);
position: absolute;
}
$(document).ready(function() {
var sync1 = $("#testimonial");
var sync2 = $("#sync2");
var slidesPerPage = 3; //globaly define number of elements per page
var syncedSecondary = true;
sync1.owlCarousel({
items : 1,
slideSpeed : 2000,
nav: true,
autoplay: false,
dots: false,
loop: true,
responsiveRefreshRate : 200,
navText: ['<svg width="20px" height="20px" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="20px" height="20px" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
}).on('changed.owl.carousel', syncPosition);
sync2
.on('initialized.owl.carousel', function () {
sync2.find(".owl-item").eq(0).addClass("current");
})
.owlCarousel({
items : slidesPerPage,
dots: false,
autoplay: false,
nav: true,
smartSpeed: 200,
slideSpeed : 500,
slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate : 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
//if you set loop to false, you have to restore this next line
//var current = el.item.index;
//if you disable loop you have to comment this block
var count = el.item.count-1;
var current = Math.round(el.item.index - (el.item.count/2) - .5);
if(current < 0) {
current = count;
}
if(current > count){
current = 0;
}
//end block
sync2
.find(".owl-item")
.removeClass("current")
.eq(current)
.addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if(syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
});
