Homepage Slider

Hi,

=========================== ANS 1 ================================

Ans 1: Use any custom Js plugin and put below js code snippet into plugin js editor:

jQuery(document).ready(function () {
	jQuery("#kyma_owl_slider").owlCarousel({
		slideSpeed: 100,
		autoPlay: 30000,
		itemsDesktop: false,
		itemsDesktopSmall: false,
		itemsTablet: false,
		itemsTabletSmall: false,
		itemsMobile: false,
		autoHeight: true,
		items: 1,
		afterAction: moved,
		stopOnHover: true,
		navigation: true,
		navigationText: [
			"<span class='kyma_owl_p'><span></span></span>",
			"<span class='kyma_owl_n'><span></span></span>"
		],
		pagination: true,
		transitionStyle: "fade" //fade - fadeUp - backSlide - goDown
	});
	function moved(owl) {
	var o_d = owl.data('owlCarousel');
	var sub_lenght = owl.find('.owl-item.active .owl_slider_con > span').length;
	var sub_current = owl.find('.owl-item.active .owl_slider_con > span');

		if (o_d) {
			owl.find('.owl-item').eq(o_d.currentItem).addClass('active').siblings().removeClass('active');
			owl.find('.owl-item:not(.active) .owl_slider_con > span').removeClass('transform_owl');
			owl.find('.owl-item.active .owl_slider_con > span').each(function (index, element) {
				setTimeout(function () {
					owl.find('.owl-item.active .owl_slider_con > span').eq(index).addClass('transform_owl');
				}, ((index + 1) * 200));
			});

		} else {
			owl.find('.owl-item').eq(0).addClass('active').siblings().removeClass('active');
			owl.find('.owl-item.active .owl_slider_con > span').each(function (index, element) {
				setTimeout(function () {
					owl.find('.owl-item.active .owl_slider_con > span').eq(index).addClass('transform_owl');
				}, ((index + 1) * 200));
			});
		}
	}
});

Save the changes.

Or you can also use it via “Child-Theme”.

Create “Child-Theme” first and Now create any js file and put abobe js code into in it.

Save the changes.

now enqueue above created js file into your “Child-Theme”.

Save the changes again.

=========================== ANS 2 ================================

Ans 2: Put below CSS rules into theme Custom CSS Ediotr:

.owl_text_c > span {
    font-family: cursive;
    font-size: 30px;
    line-height: 30px;
}

Save the changes.

=========================== ANS 3 ================================

Ans 3: Are you want to create “Custom Post”?

Its a part of lot of code customization.

So follow this URL to create a “Custom Post Type”.

Or you can see our theme customization service here

Hope you done.

Let us know for further assistance.

Thank You

• This reply was modified 8 years ago by webhuntsupport.

Thanks for answers 1 and 2
Regarding question three. I already have a Custom Post Type called ‘course’ and is created in a plugin (WP Coursify). I would like to show the posts created from the custom post type in the slider

Hi,

Please tell me which plugin you are using?

(WP Coursify) is not available into WP Plugin directory.

If above plugin generate a shortcode you can insert it into any post and select post

into slider option.

If not, then its a part of code customization.

Or you can see theme customization service here

Thank You

• This reply was modified 8 years ago by webhuntsupport.

Didnt think of shortcodes! Great idea and all perfect, please mark this as resolved

Most Welcome ??

Thank You for contacting us.