We Keep Coding

Add arrows and autoplay to owl carousel template

I downloaded a template for owl.carousel.min.js - I have no idea how to add autoplay and arrows.
It's on a test server on http://testing.r2group.co.za/Test/index.html about halfway down. I would appreciate ANY help, as I'm proficient with HTML, but the JS is beyond me. (why I downloaded a template)

Have you found documentation for how to use the carousel? That is a good place to start.
The owl is part of a theme I am using. Looks like this javascript is included after the carousel.
<script>
jQuery(function($){
$("#latest_news .owl-carousel").owlCarousel({
lazyLoad: true,
responsiveRefreshRate: 50,
slideSpeed: 500,
paginationSpeed: 500,
scrollPerPage: true,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: true,
navigation: false,
autoPlay: true,
singleItem: true
});
});
</script>
This tells the browser to start a new script with jQuery.
jQuery(function($){
//code
});
Inside this function is specific to Owl Carousel.
$("latest_news .owl-carousel") selects the proper element. This is where you will use your own CSS selectors to get your slider.
It is being passed a javascript object of parameters for the slider. For your autoplay, you can give it
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true
});
The arrows are also described by a setting in this object. Looks like the left/right arrows can be added like this:
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
So, at a minimum to get your arrows and autoplay, your script should look like this:
<script>
jQuery(function($){
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true,
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
});
</script>
It would be worth looking at which other settings you can change for greater customization. The slideSpeed and rewindSpeed, for example, could be a good place to get familiar playing with javascript.

Some lazy load background images (b-lazy) not showing in slick carousel

I've been banging my head all long trying to solve this issue.
Basically I'm using Slick Carousel and Blazy lazy load together to display some background images in a carousel.
Now before you answer, I'm well aware Slick comes with lazy loading, but I've run in to problem using it with background images so I'm running with Blazy instead.
The problem
I can get slick and blazy working together https://jsfiddle.net/a4emf9qu/ , no worries, but when you drag (or click on the dot controls) to the third image (or beyond) the background images don't load unless you scroll or resize the window and I just don't know why.
Through some digging on the blazy website I see that this could be a solution but I'm unsure on how to implement it -
Either call revalidate which validates the document again or trigger the newly added item(s) with the .load() method:
var bLazy = new Blazy();
bLazy.functionName(); //bLazy.revalidate(); or bLazy.load(element);
Can anyone out there help me out?
$(document).ready(function(){
$('.slider').slick({
dots: true,
arrows: true,
infinite: false
});
});
;(function() {
// Initialize
var bLazy = new Blazy();
bLazy.revalidate();
})();

Turn's out it was a pretty simple fix. Just had to listen to the afterChange event and then fire bLazy.revalidate(); again. Example here - https://jsfiddle.net/a4emf9qu/1/
$(".hero-slick").slick({
dots: true,
arrows: false,
lazyLoad: 'ondemand',
// autoplay: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
// Init BLazy for lazy loading
// Initialize
var bLazy = new Blazy({
container: '.hero-slick' // Default is window
});
$('.hero-slick').on('afterChange', function(event, slick, direction){
bLazy.revalidate();
// left
});

Just got stuck there and found a cool solution with selector.
HTML
<ul class="slider">
<li class="slide-item">
<img class="b-lazy" data-src="image/imag.jpg">
</li>
</ul>
for Slick slider
var slider = $(".slider");
slider.slick({
lazyLoad: 'ondemand',
});
var bLazy = new Blazy({
selector: '.b-lazy',
});
slider.on('afterChange', bLazy.revalidate);
for owl carousel
var owl = $('.slider');
owl.owlCarousel({
autoplay: false,
});
owl.on('changed.owl.carousel', bLazy.revalidate);
check out the owl live

Center active slide with showing 3 slides in slick.js

I'm using slick.js plugin and I want to make something like on their website. Here is DEMO.
Problem is, that first active slide 1 is not centered. I know I can use
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true,
centerMode: true
});
but then there are not 3 slides, but also parts of another 2 slides, see HERE

Well, this is so embarrassing. All it needs to have is set option centerPadding to 0 (beside setting centerMode to true). I don't know why I haven't seen this before. Anyway, here is my 1-month update:
WORKING DEMO

If I'm understanding your question correctly, you're going to have to programmatically hide the partial slides. It would have been great if this functionality existed natively, but it doesn't. Maybe in a future release.
Please read the comments for a brief outline of what I'm doing:
function setSlideVisibility() {
//Find the visible slides i.e. where aria-hidden="false"
var visibleSlides = $('.slider-nav > .slick-list > .slick-track > .slick-slide[aria-hidden="false"]');
//Make sure all of the visible slides have an opacity of 1
$(visibleSlides).each(function() {
$(this).css('opacity', 1);
console.log($(this).html());
});
//Set the opacity of the first and last partial slides.
$(visibleSlides).first().prev().css('opacity', 0);
$(visibleSlides).last().next().css('opacity', 0);
}
//Execute the function to apply the visibility on dom ready.
$(setSlideVisibility());
//Re-apply the visibility in the beforeChange event.
$('.slider-nav').on('beforeChange', function() {
$('.slick-slide').each(function() {
$(this).css('opacity', 1);
});
});
//After the slide change has completed, call the setSlideVisibility to hide the partial slides.
$('.slider-nav').on('afterChange', function() {
setSlideVisibility();
});
Fiddle Demo

jQuery animation performing strangely due to excessive events?

I have a gallery on my site. Each image is a <div> which has a background image. The overflow is hidden, and I hide a caption div using margin. I then use the following jQuery to animate the captions when the mouse enters and leaves the picture <div>.
$(document).on("mouseenter", ".gallery-image", function(){
$(this).children(".caption").dequeue();
$(this).children(".caption").fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
});
$(document).on("mouseleave", ".gallery-image", function(){
$(this).children(".caption").dequeue();
$(this).children(".caption").fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
});
When I move the mouse in and out too fast weird things start to happen. The caption stays half-faded, or the caption simply stops appearing altogether.
The problem can be seen in this JSFiddle.
Why am I getting this unexpected behavior?

Use .stop(true, true) to stop the pre queues of the animations
$(document).on("mouseenter", ".gallery-image", function(){
$(this).children(".caption").stop(true,true).fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
});
$(document).on("mouseleave", ".gallery-image", function(){
$(this).children(".caption").stop(true,true).fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
});
Fiddle

Why isn't my jQuery Flex Slider pausing?

I've tried all manner of things based on the documentation but no matter what I do, I can't seem to make it pause.
Here's what the documentation says:
slider.pause() //Function: Pause slider slideshow interval
slider.play() //Function: Resume slider slideshow interval
But it doesn't specify how to define the slider variable. I've tried:
var slider = $('.flex-slider').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
animationLoop: true,
slideshow: true,
animationSpeed: 600,
slideshowSpeed: 1200,
controlNav: false,
directionNav: false,
pausePlay: false
});
$('.pause-button').on('click',function({
slider.pause();
});
Which resulted in... http://puu.sh/4qpo3.png
And I've tried:
$('.flex-slider').flexslider().pause();
Which resulted in... http://puu.sh/4qpcS.png
And I've tried:
$('.flex-slider').flexslider().pause(true);
Which resulted in... http://puu.sh/4qpcS.png
And all in all I'm just not seeing what exactly I'm doing wrong here.
Anyone wanna provide some insight? :)

Try $('.flex-slider').flexslider('pause') and $('.flex-slider').flexslider('play').

Hi I see you turned off the option
pausePlay: false
Now edit few thing. first turned on the option
pausePlay: true,
pauseText :"Pause",
playText :"Play",
Now you will see a play pause text comes in the slider, with having two different classes for pay and pause, just add your icon image to that class with css. and you will have you desired functionality.