Slick slider, padding in the first slide - javascript

My idea is the following one:
I would like to put a padding in the first slide from slick.js, and yes, i already tried the :first element in css.. But what I really wanted is: put an css class in the first ever element and then change the class when its not appearing
What I've so far:
$(document).ready(function () {
$('.slider1').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4
});
$('.slider1').on('click', function (event, slick, currentSlide) {
if (currentSlide === 0) {
console.log('First element');
$(this).eq(currentSlide).addClass('first-slide-is-active111');
} else {
$(this).eq(currentSlide).removeClass('first-slide-is-active111');
}
});
});
but doesnt work.. any help?
JS Fiddle demo
edit: to make me clear what i would like to do is like a netflix slider.. with space in the first slide..

Fixed your code
$(document).ready(function () {
$('.slider1').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
});
$('.slide:first').addClass('first-slide-is-active111');
$('.slider1').on('afterChange', function (event, slick, currentSlide) {
if (currentSlide === 0) {
console.log('First element');
$('.slide:first').addClass('first-slide-is-active111');
} else {
$('.slide:first').removeClass('first-slide-is-active111');
}
});
});
js fiddle with fixed code
You had to bind your handler to 'afterChange' not to 'click'. And some logic fixes are aplied too.
If this logic is not what you want just let me know in comments below and I will try to help.

you need to add class to the first slide and give padding.
$(document).ready(function () {
$('.slider1').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
});
$('.slider1').on('click', function (event, slick, currentSlide) {
if (currentSlide === 0) {
console.log('First element');
$(this).eq(currentSlide).addClass('first-slide-is-active111');
} else {
$(this).eq(currentSlide).removeClass('first-slide-is-active111');
}
});
});
.s1 {
padding: 50px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
<div class="s1 slide"><span>Slide1</span></div>
<div class="slide"><span>Slide2</span></div>
<div class="slide"><span>Slide3</span></div>
<div class="slide"><span>Slide4</span></div>
<div class="slide"><span>Slide5</span></div>
<div class="slide"><span>Slide6</span></div>
</div>

Related

How to disable animation while animating using mousewheel and slick slider?

I have a slick slider on my website, and i'm using also jquery-mousewheel to switch slides. The issue is that i want to disable the mousewheel while it's sliding.
Do you know how i can do this ?
function detectScroll() {
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
detectScroll()
I found a solution!
The thing is that I had to declare a boolean that i called animating. Then I used the on('beforeChange') and on('afterChange') of slick to detect rather the animation is finished or not. And I just had to check if the the animating is true or false in the beginning of the mousewheel function and return false if it's true.
I hope it would help a lot of people!
var animating = false;
function detectScroll() {
$('body').bind('mousewheel', function(e){
//If animated than we wait the animation to be over
if (animating) {
return false;
}
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
$('.slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){
animating = true;
}).on('afterChange', function(event, slick, currentSlide, nextSlide){
animating = false
});
detectScroll()

Pause button not working in slick carousel when opened new tab and coming back to the existing tab

Found jsfiddle online having same issue I am facing:
JSfiddle Link
Steps to reproduce:
1) click on pause
2) open new tab or go to an existing tab
3) coming back to the jsfiddle link
Auto play starts even when pause was clicked before. Not maintaining its current state when coming back from the new tab.
$(".slider").slick({
autoplay: true,
dots: true,
pauseOnDotsHover: true,
autoplaySpeed: 1000,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true);
});
I have used following code to make it work and solve my issue.
I have also stopped auto play when paused which worked perfectly.
$( document ).ready(function() {
$(".slider").slick({
autoplay: true,
dots: true,
pauseOnDotsHover: true,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false)
.slick('slickSetOption', 'autoplay', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true)
.slick('slickSetOption', 'autoplay', true);
});
$('.slider').slick('slickPlay');
});
Looks like the script is listening for some event. Best workaround I can think of is to disable autoplay, then use $.ready to trigger a click on .play:
$(function() {
$(".play").click();
});
A valid solution to your problem is to initialize the carousel with autoplay: false and after that call the function $('.slider').slick('slickPlay'); manually inside the $( document ).ready function to play the carousel, like:
$( document ).ready(function() {
$(".slider").slick({
autoplay: false,
dots: true,
pauseOnDotsHover: true,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true);
});
$('.slider').slick('slickPlay');
});
I tested it and is working as you want. I hope that can help you.
if ($('.slide_home').length) {
$('.slide_home').slick({
arrows: true,
dots: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 1200,
fade: true,
swipe: false
});
$('.slide_home .slick-dots').append('<span class="pause float-right mt-1"><i class="fas fa-pause" style="color: #2e4486"></i></span>');
$('.slide_home .slick-dots').append('<span class="play float-right mt-1 d-none"><i class="fas fa-play" style="color: #2e4486"></i></span>');
$('.pause').on('click', function(e) {
e.preventDefault();
$('.slide_home')
.slick('slickPause')
$('.play')
.removeClass('d-none');
$('.pause')
.addClass('d-none')
});
$('.play').on('click', function(e) {
e.preventDefault();
$('.slide_home')
.slick('slickPlay');
$('.pause')
.removeClass('d-none');
$('.play')
.addClass('d-none')
});
}

OWL Carousel 2 adding class to item

Im working on a slider that contains two synced owl-sliders.
sync1 is main slider and sync2 is thumbnails slider. When I click on one of elements of second slider sync1 goes to proper slide.
Now goes my issue:
When user clicks on any of thumbnail a green border should appear on clicked elemment and should stay there until another element is clicked.
I've tried to use jquery .addClass and .css but nothing happens.
I think that I should add div with "position: absolute" that holds up to clicked element, but I don't know how to do it. Please help! :)
Here is my js
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var index2=0;
var flag=true;
var slides = sync1.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout:5000,
autoplayHoverPause:true,
nav: false,
mousedrag: false,
touchdrag: false,
pulldrag: false
});
$(document).on('click', '.prevbutton, .nextbutton',function() {
sync1.trigger('stop.owl.autoplay');
});
sync1.on('changed.owl.carousel', function(event) {
var index1=event.item.index;
var index11 = index1-2;
//console.log("index1", index1)
//console.log("index11", index11);
sync2.trigger("to.owl.carousel", [index11, 100, true]);
});
$('.nextbutton').click(function() {
//console.log(sync1);
sync1.trigger('next.owl.carousel');
});
$('.prevbutton').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
//console.log(sync1);
sync1.trigger('prev.owl.carousel', [500]);
});
/* thumbnails*/
var thumbnails= sync2.owlCarousel({
items: 6,
loop: true,
autoplay: false,
mousedrag: false,
touchdrag: false,
pulldrag: false,
addClassActive: true
});
/*buttons*/
$('.nextbutton2').click(function() {
sync2.trigger('next.owl.carousel');
});
$('.prevbutton2').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
sync2.trigger('prev.owl.carousel', [500]);
});
sync2.trigger("to.owl.carousel", [index2, 100, true]);
sync2.on('changed.owl.carousel', function(event) {
index2=event.item.index;
//console.log("index2", index2);
index22=index2-1;
// sync1.trigger("to.owl.carousel", [index22, 100, true]);
});
// console.log("index2", index2);
sync2.on('click', '.item', function(e) {
e.preventDefault();
sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index()-6, 300, true]);
// console.log("clicked index", $(e.target).parents('.owl-item').index())
});
$('#stopcontainer').on('mouseover', function(){
if ($('#stopcontainer:hover').length != 0) {
flag=true;
console.log("flaga", flag);
}
if (flag==true) {
sync1.trigger('stop.owl.autoplay');
console.log("mousein");
}
}).on('mouseleave', function() {
setTimeout(
function()
{
if ($('#stopcontainer:hover').length == 0) {
flag=false;
console.log("flaga", flag);
}
if(flag==false){
console.log('mouse leave');
sync1.trigger('play.owl.autoplay');
}
}, 5000)}
);
});
Here is the solution:
sync2.on('click', '.owl-item', function(e) {
e.preventDefault();
$('.some-class').removeClass('active');
$(this).find('.some-class:first').addClass('active');
});
There is empty div with "some-class" inside carousel item, and when you click on this element class "active" is added

Slide out division zooming

$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
}else {
$(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
});
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){
e.stopPropagation();
});
});
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
</div>
</div>
Its for slide out a div. But when i use this scripts, on zooming the website- the horizontal scroller not displayed. How can it solve?
Thanks.
You can try something like this:-
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
JS FIDDLE
$(document).on('click',function(e){ /* Hide on Outside Click*/
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){ /*Ignore 'Hide on Outside Click' on clicking #slideout element*/
e.stopPropagation();
});
This code should work
Your final code will be :
$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
}else {
$(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
});
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){
e.stopPropagation();
});
});
JS FIDDLE

jquery fade issue

I'm trying to implement an image slider that displays some text on hover. It's working fine except in IE8 where there is a flash of text everytime the slider changes images.
Here's the current js code:
<script type="text/javascript">
$(document).ready(function() {
/* Hide descriptions. */
$('.description').fadeTo(0, 0);
/* Show descriptions on hover. */
$('.description').hover(
function() { $(this).fadeTo(400, 1); },
function() { $(this).fadeTo(400, 0); }
);
$('#slider').after('<div id="pager">').cycle({
fx: 'fade',
timeout: 5000,
speed: 700,
pager: '#pager',
pause: 1
})
});
</script>
A link to a live example here
A Link to jsFiddle
It seems to work if you force the description to hide during the transition:
$(document).ready(function() {
/* Hide descriptions. */
$('.description').fadeTo(0, 0);
/* Show descriptions on hover. */
$('.description').hover(
function() { $(this).fadeTo(400, 1); },
function() { $(this).fadeTo(400, 0); }
);
$('#slider').after('<div id="pager">').cycle({
fx: 'fade',
timeout: 5000,
speed: 700,
pager: '#pager',
pause: 1,
cleartypeNoBg: true,
before: function() { $('.description').css('display', 'none'); },
after: function() { $('.description').css('display', 'block'); }
});
});

Categories

Resources