Bootstrap Snippet Anirudha Bhowmik bind owl carousel using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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;
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Anirudha Bhowmik bind owl carousel"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik bind owl carousel" Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik bind owl carousel"
Bootstrap 4.1.1 Snippet by anirudhabhowmik