We Keep Coding

enable vertical scrolling while see the last slide using owl carousel

I disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.and I used the solution Disable vertical scrolling while swiping on touch device using owl carousel in my site.it works well but it has a problem and when I see the last side in owl-carousel I can not scroll vertical to anywhere and I have to go back to the prev slide and then it works correctly and I can move on the page. how can solve this issue ? my website is https://khaaspo.com/Product/ProductDeialsInMob?Code=93&Code=93
$(document).ready(function() {
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function () {
$('body').css('overflow', 'hidden');
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
}
});
owl2.on('drag.owl.carousel', function (event) {
document.ontouchmove = function (e) {
e.preventDefault();
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I changed my code like below and it works correctly and I solved my problem.
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function (e) {
var current = e.item.index + 1;
var total = e.item.count;
if (current === total) {
$('body').css('overflow', 'auto');
}
else {
$('body').css('overflow', 'hidden');
}
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
},
});
owl2.on('drag.owl.carousel', function (e) {
var current = e.item.index + 1;
var total = e.item.count;
document.ontouchmove = function (e) {
if (current !== total) {
e.preventDefault();
}
else {
return true;
}
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});

called a jQuery function only over a specific width of window

I use this code on my site. I want to load this code only in a specific width of window.
For example, in the less than 768 pixels, this script will no longer be called.
jQuery(document).ready(function() {
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
})

You can use jQuery's width function and then do something like this:
jQuery(document).ready(function() {
if (jQuery( window ).width() > 768) {
/// your code here
}
});
.width() Refernece

Try This
jQuery(document).ready(function() {
if ($(window).width() < 768){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
}
})

if ($( window ).width() > 768){//ur code}

Display value of input range slider

I have a simple input slider and I'd like to display the value the slider is currently on below it.
I thought I had this working with the following script but it broke everything else on the page that uses Javascript.
$(document).ready(function(){
var slider = document.getElementById("deposit-input");
var output = document.getElementById("deposit-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
What's wrong with this or is there a better/easier way of displaying the value on the page?
Thanks in advance!
/* ==========================================================================
#NAVIGATION
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
// Wait for the DOM to be ready (all elements printed on page regardless if
// loaded or not).
$(function() {
// Bind a click event to anything with the class "toggle-nav".
$('.page-head__toggle').click(function() {
if ($('body').hasClass('show-nav')) {
$('body').removeClass('show-nav').addClass('hide-nav');
setTimeout(function() {
$('body').removeClass('hide-nav');
}, 800);
} else {
$('body').removeClass('hide-nav').addClass('show-nav');
}
// Deactivate the default behavior of going to the next page on click.
return false;
});
});
/*
* Sliding Line.
*/
$(function() {
var $el,
leftPos,
newWidth,
$mainNav = $(".site-nav__list");
$mainNav.append("<div class='site-nav__line'></div>");
var $magicLine = $(".site-nav__line"),
$currentMenu = $(".current-menu-item");
$magicLine
.width($currentMenu.length ? $currentMenu.width() : 0)
.css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
var hoverOut;
$(".site-nav__list li a").hover(function() {
clearTimeout(hoverOut);
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
if (!$magicLine.width()) {
$magicLine.stop().hide().css({
left: leftPos,
width: newWidth
}).fadeIn(100);
} else {
$magicLine.stop().animate({
opacity: 1,
left: leftPos,
width: newWidth
});
}
},
function() {
hoverOut = setTimeout(function() {
if (!$currentMenu.length) {
$magicLine.fadeOut(100, function() {
$magicLine.css({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
} else {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
}
}, 100);
}
);
});
/* ==========================================================================
#Simple Accordion
========================================================================== */
$('.accordion').find('.accordion__title').click(function(){
$(this).toggleClass('open');
$(this).next().slideToggle('fast');
});
/* ==========================================================================
#INPUT SLIDER
========================================================================== */
/*
* Simple version. This code just uses the `<input type="range" />` element and
* displays the value on the page.
*/
$(document).ready(function(){
var slider = document.getElementById("deposit-input");
var output = document.getElementById("deposit-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
/* ==========================================================================
#SLICK
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
$(document).ready(function(){
$('.slick-slider').slick({
adaptiveHeight: true,
arrows: false,
dots: true,
infinite: false,
fade: true,
cssEase: 'ease-out',
speed: 300
});
});
/*
* Creates classes to enable responsive navigation.
*/
$(document).ready(function(){
$('.slick-carousel').slick({
centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: false,
dots: true,
responsive: [
{
breakpoint: 960,
settings: {
centerMode: true,
centerPadding: '120px',
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
centerPadding: '60px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
centerPadding: '30px',
slidesToShow: 1
}
}
]
});
});
/*
* Slideshow form (for apply page)
*/
$(document).ready(function(){
$('.slick-form').slick({
adaptiveHeight: true,
arrows: true,
appendArrows: $('.slick-form-arrows'),
prevArrow: '<span class="btn">Go Back</span>',
nextArrow: '<span class="btn">Next Slide</span>',
dots: false,
infinite: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="label form-group__title">Slider (browser) <span class="required">*</span></label>
<div class="form-group__controls">
<div class="slider align-center">
<input type="range" min="0" max="100" value="50" class="slider__input" id="deposit-input" />
<p class="slider__value">Amount: <strong>£<span id="deposit-value"></span></strong></p>
</div>
</div>
</div>

Loader while directive is loading

I'm doing a web app with Angular and Angular Material. I have to do a carousel and I found a nice jquery's component. So I made a directive with that. It works, but the problem is that for 1 or 2 seconds I see the elements of the carousel displayed like a <ul> list, so vertically. Then, when the directive is build, I see correctly the carousel.
Is there a way to insert a loader (maybe with angular material) that shows while the directive is not build?
This is the code
angular.module('app').directive("slick", function($timeout) {
return function(scope: any, el: any, attrs: any) {
$timeout((function() {
el.slick({
arrows: true,
autoplay: false,
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
})
}), 100)
}
});

I would use a boolean scope variable that tracks when slick is initialized. Start it at false, and use slick's init event to know when to set to true.
Basically:
angular.module('app').directive("slick", function($timeout) {
return {
restrict: 'E',
replace: true,
scope: true,
templateUrl: 'slick.tpl.html',
link: function(scope: any, el: any, attrs: any) {
scope.slickReady = false;
// use a child element (defined in template) so we can toggle between carousel and spinner
var slickEl = el.children('.slick').first();
if(slickEl){
// listen for slick's init event
slickEl.on('init', function(){
scope.slickReady = true;
});
// initialize slick (not sure why you had it wrapped in $timeout in OP)
slickEl.slick({
...
});
}
};
}
});
slick.tpl.html
<div ng-switch on="slickReady">
<div class="slick" ng-switch-when="true"></div>
<div class="spinner" ng-switch-when="false">
<!-- use whatever kind of spinner you want -->
</div>
</div>

Slick carousel responsive breakpoints

This is the configuration I am using to create a slick carousel on my web page:
$('#carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 1008,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 800,
settings: 'unslick',
},
],
})
It is working the way it is supposed to work except for one thing... when I resize my browser window from width: 1920 to 800, the carousel unslicks it, and the content is displayed like normal divs.
But then when I increase the width of the browser window the carousel doesn't recreate it. It remains like HTML div blocks without carousel.
Any help would be appreciated.

unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.

This is one way to rebuild the carousel after unslick kills it at a breakpoint:
$(window).resize(function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});
$(window).on('orientationchange', function () {
$('.js-slider').not('.slick-initialized').slick('resize');
});

<section class="regular slider" style="direction:ltr">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
<div>
<img src="http://placehold.it/350x300?text=13">
</div>
<div>
<img src="http://placehold.it/350x300?text=14">
</div>
</section>
/////script/////
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 6,
slidesToScroll: 6,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 5,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
});

On each browser resize event you need to do a check and reinitialize the Slick slider if needed (if you are on mobile and Slick slider is not initialized).
/* Get element */
var slider = $('.slider');
/* Slider settings */
var settings = {...}
/* Do this every time window gets resized */
$(window).on('resize', function() {
/* If we are above mobile breakpoint unslick the slider */
if ($(window).width() >= 800)
{
/* Do this only if slider is initialized */
if (slider.hasClass('slick-initialized')) {
slider.slick('unslick');
}
return;
}
/* We are below mobile breakpoint, initialize the slider
if it is not already initialized */
else if (!slider.hasClass('slick-initialized'))
{
return slider.slick(settings);
}
});
$(window).trigger('resize');

I solved the responsive breakpoint issue, recalculating the number of slides at any browser resize.
.testimonialsList: it's the name of the container of my carousel.
// Create carousel
function createTestimonialCarousel(numberOfSlides){
jQuery('.testimonialsList').not('.slick-initialized').slick({
dots: true,
arrows: true,
infinite: true,
slidesToShow: numberOfSlides,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 6000,
pauseOnHover: true
});
}
// Calculate number of slides to show
function calculateNumberOfSlidesToShow(){
var carouselWidth = jQuery(".testimonialsList").width();
var numberOfSlides = 0;
switch (true) {
case (carouselWidth < 767):
numberOfSlides = 1;
break;
case (carouselWidth < 991):
numberOfSlides = 2;
break;
case (carouselWidth < 1199):
numberOfSlides = 3;
break;
case (carouselWidth > 1200):
numberOfSlides = 3;
break;
}
return numberOfSlides;
}
// Reload Carousel on browser resize (to make it responsible)
function reloadCarousel () {
jQuery('.testimonialsList').slick('unslick');
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}
// Call updateMaxHeight when browser resize event fires
jQuery(window).on("resize", reloadCarousel);
jQuery(document).ready(function () {
// Initialize the carousel on page load
if (jQuery(".testimonialsList").length) {
setTimeout(function () {
numberOfSlides = calculateNumberOfSlidesToShow();
createTestimonialCarousel(numberOfSlides);
}, 300);
}
});