Develop Reference

How to make one row in first slide and two rows in all other slides in Slick Slider?

I want to configure Slick Slider to have one row in first slide and two rows in all others, like this -> desired result.
These are current settings of the slideshow:
$('#our-team-slider').slick({
rows: 2,
dots: true,
arrows: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1600,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 1205,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true
}
}
]
});
How can it be done?

One solution would be to create a slide with one "card" in it and subsequent slides with two "cards" each, and then setting rows: 1. For example:
<div id="our-team-slider">
<div class="slide">
<div class="card">...</div>
</div>
<div class="slide">
<div class="card">...</div>
<div class="card">...</div>
</div>
<div class="slide>
<div class="card">...</div>
<div class="card">...</div>
</div>
</div>
You could then style the slides with two cards so that the cards are stacked.

React slick stop going passed end

I'm using React slick and if I have a bunch of small boxes and I scroll by 3 by setting slidesToScroll it shoots passed the width of my container.
https://codepen.io/e-man/pen/jvJdjY
if you look at the right side when you keep clicking until you reached 10 you will see all the empty space on the right. I want it to stop so the last item is flush up against the right.
Anyway to stop this from over shooting the bounds.
class SliderApp extends React.Component {
render() {
const options = {
infinite: false,
arrows: true,
slidesToShow: 6,
slidesToScroll: 3,
speed: 300,
};
return (
<div className="container">
<Slider {...options}>
<div className='box'>
<div className="inner-box">1</div>
</div>
<div className='box'>
<div className="inner-box">2</div>
</div>
<div className='box'>
<div className="inner-box">3</div>
</div>
<div className='box'>
<div className="inner-box">4</div>
</div>
<div className='box'>
<div className="inner-box">5</div>
</div>
<div className='box'>
<div className="inner-box">6</div>
</div>
<div className='box'>
<div className="inner-box">7</div>
</div>
<div className='box'>
<div className="inner-box">8</div>
</div>
<div className='box'>
<div className="inner-box">9</div>
</div>
<div className='box'>
<div className="inner-box">10</div>
</div>
</Slider>
</div>
)
}
}

Seems like a bug that has already been resolved here. You are probably using an older version of react-slick. Try updating that package.
I tested with 0.28.1 and this behaviour (called edgefriction) works (now) as you want it to.

Slick slider - Adding active class to first < a > in currently open foundation tab

Trying to add an active class to the first a tag within a selected tab.
My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view.
JS
$(document).ready(function(){
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function( e ) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
//Re draw slider when data tabs change
$('[data-tabs]').on('change.zf.tabs', function() {
$('.slider').slick("setPosition", 0);
$('.slider').slick("slickGoTo", 0);
});
$('.slider').on('afterChange', function(event,slick,i){
$('.links li a').removeClass('slick-current');
$('.links li a').eq(i).addClass('slick-current');
});
// document ready
$('.links li a').eq(0).addClass('slick-current');
});
HTML
<div class="sidebar-nav">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab2</li>
</ul>
</div>
<div class="tabs-panel is-active" id="panel1v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider2">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>

Your problem is that the listeners are set for both sliders. You have to create each slider individually. I'd say the simplest solution is to create a jQuery function that handles all that.
So with your HTML, the code necessary would about look like so (it's not perfectly optimized but easy to read)
// create a new jQuery function
$.fn.extend({
createTabSlider: function() {
var $self = $(this)
// $self is the tab, to get an element you DONT use $('something')
// you use $self.find("something")
var $slideshow = $self.find(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
})
$self.find(".links").on("click", "a", function(e) {
var slideIndex = $(this).closest("li").index()
$slideshow.slick("slickGoTo", slideIndex)
})
$slideshow.on("afterChange", function(event, slick, i) {
$self.find(".links li a").removeClass("slick-current")
$self.find(".links li a").eq(i).addClass("slick-current")
})
$self.find(".links li a").eq(0).addClass("slick-current")
}
})
// create a slider for each tab
$("#panel1v").createTabSlider()
$("#panel2v").createTabSlider()

You can try using on function in id rather than class and remove and add class referring from parent element i.e. panel2v or panel1v. and dont forget to use on function for both slider. Hope it works.

Slick can't handle multiple sliders being instantiated together. You need to instantiate the sliders individually using ids.
var $slideshow1 = $("#slider1").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
var $slideshow2 = $("#slider2").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
You should still be able to hook in your events to both at once using the classes though.

Sync slider with slick ignore specific slide in syncing

I have 2 sync slider in the top slider I need to add at a specific place informations which is not in the bottom slider. How could I still keep this in sync correctly?
HTML:
<div class="example example1">
<div class="slider slider-for">
<div>1</div>
<div>2</div>
<div>3</div>
<div>
Only exist here
</div>
<div>4</div>
</div>
<div class="slider slider-nav">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
</div>
</div>
Javascript:
jQuery('.example1 .slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: false,
asNavFor: '.example1 .slider-nav',
dots: false,
arrows:true,
appendArrows: '.pr_images',
prevArrow:'<i class="fa fa-angle-left slick-prev"></i>',
nextArrow:'<i class="fa fa-angle-right slick-next"></i>'
});
jQuery('.example1 .slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.example1 .slider-for',
dots: false,
arrows:false,
centerMode: false,
focusOnSelect: true
});
Fiddle: http://jsfiddle.net/45w9k4qb/

Have you tried the option
slide: '.slide'
As shown here:
https://codepen.io/quarkus/pen/JKPgza
So If you give all the slide you want visible the class .slide it might work?

How to Slide all visible items in Owl Carousel instead of one using prev/next button

in latest owlCarousel v 2.0.0 , I want to slide all items visible in viewport, clicking on prev/next buttons like the dots nav do . However I want the same functionality in prev/next button while loop value is true. I have created a pen : Codepen Please look into. Anyhelp using available option will be great help.
HTML:
<div class="owl-carousel">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
})

slideBy option in owl carosel is handy. It solves the issues.
Included it as follows.
Updated JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1,
slideBy: 1
},
600: {
items: 2,
slideBy: 2
},
1000: {
items: 5,
slideBy: 5
}
}
})