Putting Dots onto Owl Carousel Instead of below specialtouchgifts.com.au (ok)
https://stackoverflow.com/questions/43900737/putting-dots-onto-owl-carousel-instead-of-below
ar owl = $('.custom1').owlCarousel({
animateOut: 'slideOutDown',
animateIn: 'flipInX',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450,
loop: true,
dots: true,
autoplay: true,
});
// Clone dots into slide
var dots = $('.owl-dots');
$('h4').after(dots.clone().addClass('owl-dot-clone'));
dots.hide(); // hide orginal dots
// Set active
owl.on('changed.owl.carousel', function (event) {
var index = event.page.index;
$('.owl-dot-clone .owl-dot', this).removeClass('active');
$('.owl-dot-clone', this).each(function () {
$('.owl-dot', this).eq(index).addClass('active');
})
});
// Create on click event for clone
$('.owl-dot-clone .owl-dot').on('click', function () {
var owl = $(this).closest('.custom1');
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});Đã làm
C:\xampp\htdocs\specialtouchgifts\wp-content\themes\woovina-child\assets\js\custom.js
jQuery(document).ready(function($) {
$.scrollIt();
var owl = $('.carousel--home').owlCarousel({
animateOut: 'slideOutDown',
animateIn: 'flipInX',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450,
loop: true,
dots: true,
nav: false,
autoplay: false,
});
// Clone dots into slide
var dots = $('.owl-dots');
$('.itemhome').after(dots.clone().addClass('owl-dot-clone'));
dots.hide(); // hide orginal dots
// Set active
owl.on('changed.owl.carousel', function(event) {
var index = event.page.index;
$('.owl-dot-clone .owl-dot', this).removeClass('active');
$('.owl-dot-clone', this).each(function() {
$('.owl-dot', this).eq(index).addClass('active');
})
});
// Create on click event for clone
$('.owl-dot-clone .owl-dot').on('click', function() {
var owl = $(this).closest('.carousel--home');
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});
});C:\xampp\htdocs\specialtouchgifts\wp-content\themes\woovina-child\page-home.php
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme and one of the
* two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package WooVina WordPress theme
*/
get_header(); ?>
<?php do_action('woovina_before_content_wrap'); ?>
<div id="content-wrap" class="container clr">
<?php do_action('woovina_before_primary'); ?>
<div id="primary" class="content-area clr">
<?php do_action('woovina_before_content'); ?>
<div id="content" class="site-content clr">
<?php do_action('woovina_before_content_inner'); ?>
<div class="container-fluid">
<div class="row">
<div class="carousel--home owl-carousel owl-theme">
<div class="itemhome">
<img src="https://cdn.pixabay.com/photo/2022/05/19/08/11/plane-7206856_960_720.jpg" alt="">
<div class="o-container o-container--tablet-collapsed">
<div class="c-carousel__content">
<header class="c-carousel__box">
<div>
<p class="c-carousel__pretitle">Franchise Opportunities</p>
<h3 class="c-carousel__title">Join the Ferguson Plarre Family</h3>
<div class="c-carousel__text"> A Ferguson Plarre Franchise could be perfect for you! </div>
<a href="https://www.fergusonplarre.com.au/franchising/" class="c-btn c-btn--outline-light">Learn More</a>
</div>
<span class="c-carousel__box-bgcolor" style="background-color:#d0ae84"></span>
</header>
</div>
</div>
</div>
<div class="itemhome">
<img src="https://cdn.pixabay.com/photo/2017/08/07/16/36/cat-2605502_960_720.jpg" alt="">
<div class="o-container o-container--tablet-collapsed">
<div class="c-carousel__content">
<header class="c-carousel__box">
<div>
<p class="c-carousel__pretitle">Franchise Opportunities</p>
<h3 class="c-carousel__title">Join the Ferguson Plarre Family</h3>
<div class="c-carousel__text"> A Ferguson Plarre Franchise could be perfect for you! </div>
<a href="https://www.fergusonplarre.com.au/franchising/" class="c-btn c-btn--outline-light">Learn More</a>
</div>
<span class="c-carousel__box-bgcolor" style="background-color:#d0ae84"></span>
</header>
</div>
</div>
</div>
<div class="itemhome">
<img src="https://cdn.pixabay.com/photo/2022/05/19/08/11/plane-7206856_960_720.jpg" alt="">
<div class="o-container o-container--tablet-collapsed">
<div class="c-carousel__content">
<header class="c-carousel__box">
<div>
<p class="c-carousel__pretitle">Franchise Opportunities</p>
<h3 class="c-carousel__title">Join the Ferguson Plarre Family</h3>
<div class="c-carousel__text"> A Ferguson Plarre Franchise could be perfect for you! </div>
<a href="https://www.fergusonplarre.com.au/franchising/" class="c-btn c-btn--outline-light">Learn More</a>
</div>
<span class="c-carousel__box-bgcolor" style="background-color:#d0ae84"></span>
</header>
</div>
</div>
</div>
<div class="itemhome">
<img src="https://cdn.pixabay.com/photo/2017/08/07/16/36/cat-2605502_960_720.jpg" alt="">
<div class="o-container o-container--tablet-collapsed">
<div class="c-carousel__content">
<header class="c-carousel__box">
<div>
<p class="c-carousel__pretitle">Franchise Opportunities</p>
<h3 class="c-carousel__title">Join the Ferguson Plarre Family</h3>
<div class="c-carousel__text"> A Ferguson Plarre Franchise could be perfect for you! </div>
<a href="https://www.fergusonplarre.com.au/franchising/" class="c-btn c-btn--outline-light">Learn More</a>
</div>
<span class="c-carousel__box-bgcolor" style="background-color:#d0ae84"></span>
</header>
</div>
</div>
</div>
<div class="itemhome">
<img src="https://cdn.pixabay.com/photo/2022/05/19/08/11/plane-7206856_960_720.jpg" alt="">
<div class="o-container o-container--tablet-collapsed">
<div class="c-carousel__content">
<header class="c-carousel__box">
<div>
<p class="c-carousel__pretitle">Franchise Opportunities</p>
<h3 class="c-carousel__title">Join the Ferguson Plarre Family</h3>
<div class="c-carousel__text"> A Ferguson Plarre Franchise could be perfect for you! </div>
<a href="https://www.fergusonplarre.com.au/franchising/" class="c-btn c-btn--outline-light">Learn More</a>
</div>
<span class="c-carousel__box-bgcolor" style="background-color:#d0ae84"></span>
</header>
</div>
</div>
</div>
<div class="itemhome">
<img src="https://cdn.pixabay.com/photo/2017/08/07/16/36/cat-2605502_960_720.jpg" alt="">
<div class="o-container o-container--tablet-collapsed">
<div class="c-carousel__content">
<header class="c-carousel__box">
<div>
<p class="c-carousel__pretitle">Franchise Opportunities</p>
<h3 class="c-carousel__title">Join the Ferguson Plarre Family</h3>
<div class="c-carousel__text"> A Ferguson Plarre Franchise could be perfect for you! </div>
<a href="https://www.fergusonplarre.com.au/franchising/" class="c-btn c-btn--outline-light">Learn More</a>
</div>
<span class="c-carousel__box-bgcolor" style="background-color:#d0ae84"></span>
</header>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" >
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<section class="elementor-section elementor-top-section elementor-element elementor-element-22758fe elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="22758fe" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-26e22df" data-id="26e22df" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-27abeac elementor-widget elementor-widget-heading" data-id="27abeac" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<style>
/*! elementor - v3.6.5 - 27-04-2022 */
.elementor-heading-title {
padding: 0;
margin: 0;
line-height: 1
}
.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a {
color: inherit;
font-size: inherit;
line-height: inherit
}
.elementor-widget-heading .elementor-heading-title.elementor-size-small {
font-size: 15px
}
.elementor-widget-heading .elementor-heading-title.elementor-size-medium {
font-size: 19px
}
.elementor-widget-heading .elementor-heading-title.elementor-size-large {
font-size: 29px
}
.elementor-widget-heading .elementor-heading-title.elementor-size-xl {
font-size: 39px
}
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
font-size: 59px
}
span.c-icon.c-icon--circled {
align-items: center;
border: 2px solid #b03844;
display: flex;
font-weight: 600;
height: 34px;
justify-content: center;
width: 34px;
border-radius: 100%;
margin-right: 15px;
color: #b03844;
}
.elementor-heading-title-custom {
display: flex;
align-items: center;
}
.elementor-heading-title-custom {
font-size: 18px;
}
</style>
<h2 class="elementor-heading-title elementor-size-default">Ordering is simple</h2>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-51c6b4a" data-id="51c6b4a" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-d74d895 elementor-widget elementor-widget-heading" data-id="d74d895" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-heading-title-custom elementor-size-default"><span class="c-icon c-icon--circled u-tc--brand-red">1</span>Choose your treats</h2>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-3a801a9" data-id="3a801a9" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-561571b elementor-widget elementor-widget-heading" data-id="561571b" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-heading-title-custom elementor-size-default"><span class="c-icon c-icon--circled u-tc--brand-red">2</span>Choose a pickup location</h2>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-d685937" data-id="d685937" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-2866430 elementor-widget elementor-widget-heading" data-id="2866430" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-heading-title-custom elementor-size-default"><span class="c-icon c-icon--circled u-tc--brand-red">3</span>Click & collect or get it delivered!</h2>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="container" >
<div data-scroll-index="2812" class="story-sec">
<h2 class="title title-left"><span>SERVER 1</span></h2>
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-8 col-lg-8">
<h2 class="titlethree titlethree-story titlethree titlethree-benefet">MỖI CHẾ TÁC TRANG SỨC LUÔN GẮN LIỀN VỚI NHỮNG CÂU CHUYỆN</h2>
<div class="hr hr-right"></div>
<p class="desc desc-store">ANN Jewellery tin rằng vẻ đẹp của trang sức không chỉ đến từ giá trị thẩm mĩ mà còn ẩn trong ý nghĩa của từng khoảnh khắc, và đại diện cho chính chủ nhân của chúng. Bởi vì từng điểm nhấn nhỏ bé, dù là nhẫn, dây chuyền hay bông tai đều đang tinh tế nói lên bạn là ai, bạn đã rực rỡ thế nào vào những giây phút vô giá trong đời. Khi kỷ niệm hay cá tính ấy được khắc ghi trọn vẹn vào chế tác, chúng trở thành món trang sức hoàn hảo của riêng bạn - một biểu tượng chỉ thuộc về bạn mà không phải là ai khác.</p>
</div>
</div>
</div>
</div>
<div class="container" >
<div data-scroll-index="2813" class="story-sec">
<h2 class="title title-left"><span>SERVER 2</span></h2>
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-8 col-lg-8">
<h2 class="titlethree titlethree-story titlethree titlethree-benefet">MỖI CHẾ TÁC TRANG SỨC LUÔN GẮN LIỀN VỚI NHỮNG CÂU CHUYỆN</h2>
<div class="hr hr-right"></div>
<p class="desc desc-store">ANN Jewellery tin rằng vẻ đẹp của trang sức không chỉ đến từ giá trị thẩm mĩ mà còn ẩn trong ý nghĩa của từng khoảnh khắc, và đại diện cho chính chủ nhân của chúng. Bởi vì từng điểm nhấn nhỏ bé, dù là nhẫn, dây chuyền hay bông tai đều đang tinh tế nói lên bạn là ai, bạn đã rực rỡ thế nào vào những giây phút vô giá trong đời. Khi kỷ niệm hay cá tính ấy được khắc ghi trọn vẹn vào chế tác, chúng trở thành món trang sức hoàn hảo của riêng bạn - một biểu tượng chỉ thuộc về bạn mà không phải là ai khác.</p>
</div>
</div>
</div>
</div>
<section class="container">
<?php echo do_shortcode('[recent_products orderby="date" order="desc" columns="4" rows="2" class="h-tablet" ]'); ?>
</section>
<?php do_action('woovina_after_content_inner'); ?>
</div><!-- #content -->
<?php do_action('woovina_after_content'); ?>
</div><!-- #primary -->
<?php do_action('woovina_after_primary'); ?>
<?php do_action('woovina_display_sidebar'); ?>
</div><!-- #content-wrap -->
</div>
<?php do_action('woovina_after_content_wrap'); ?>
<?php get_footer(); ?>Last updated
