Free Download My Bakkery Single page website Responsive HTML5 Template

My Bakery is a Responsive HTML theme for Bakery websites.  which helps you to build your own site. My Bakery perfectly fits the trendy cakery & bakery website with a strong, sweet, and elegant style. It embodies a sensible design with a product-centered layout to captivate every customer’s heart. 

Key Features

• Bootstrap 
• Developer-friendly  & Clean HTML5 and CSS3 code
• Google Fonts Support
• Single page theme
• Fully Customization
• Unique Bakery
• Responsive layout
• 
  

Download free HTML: My Bakery

Created by: Web Code Addict

Synchronization of two Owl Carousel for same post type

 Make sure to add OWL CAROUSEL css and js file

<div class="work-slider">
      <?php $query = new WP_Query( array(
        'post_type' => 'your post type name',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date',
        'menu_order'=>'ASC',
    ) );

   if ( $query->have_posts() ) { ?>
<div id="work-text" class="owl-carousel owl-theme">
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
  <div class="item">
    <h4><?php the_title(); ?></h4> 
    <?php the_content();?>
    </div>
    <?php endwhile; ?>
        <?php wp_reset_query(); ?>
  
</div>
<?php } ?>

<?php $query = new WP_Query( array(
        'post_type' => 'your post type name',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'date',
        'menu_order'=>'ASC',
    ) );

   if ( $query->have_posts() ) { ?>
<div id="work-videos" class="owl-carousel owl-theme">
     <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="item">
        <div class="work-video">
            <?php the_post_thumbnail(); ?>
            <video width="320" height="240" controls="false" 

autoplay="autoplay" loop autoplay muted> 
                <source src="video.mp4" type="video/mp4">
                <source src="movie.ogg" type="video/ogg">
            </video>
        </div>
    </div>
  <?php endwhile; ?>
        <?php wp_reset_query(); ?>
  
</div>
<?php                          } ?>
</div>

<script>
jQuery(document).ready(function() {

  var slide1 = jQuery("#work-text");
  var slide2 = jQuery("#work-videos");
  var slideSecondary = true;

  slide1.owlCarousel({
    items : 1,
    slideSpeed : 2000,
    nav: false,
    autoplay: false,
    dots: false,
    loop: true,
    responsiveRefreshRate : 200,

  }).on('changed.owl.carousel', slidePosition);

  slide2
    .on('initialized.owl.carousel', function () {
      slide2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
    items : 1,
    dots: false,
    nav: false,
    loop: true,
    stagePadding: 50,
    smartSpeed: 200,
    slideSpeed : 500,
    slideBy: slidesPerPage, 
    responsiveRefreshRate : 100
  }).on('changed.owl.carousel', slidePosition2);

  function slidePosition(el) {
   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;
    }
    
   slide2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = slide2.find('.owl-item.active').length - 1;
    var start = slide2.find('.owl-item.active').first().index();
    var end = slide2.find('.owl-item.active').last().index();
    
    if (current > end) {
      slide2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      slide2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }
  
  function slidePosition2(el) {
    if(slideSecondary) {
      var number = el.item.index;
      slide1.data('owl.carousel').to(number, 100, true);
    }
  }
  
  slide2.on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = jQuery(this).index();
    slide1.data('owl.carousel').to(number, 300, true);
  });
});

</script>