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.
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>
