Creating a sliding row on bootstrap - javascript

First of all here is my http://fiddle.jshell.net/clearblue/47r2Ltsk/2/
I'm trying to create an effect very similar to this one. Basically the only difference is that the second layer of columns should not resize like they do right now. I want to achieve an effect where the inner columns keep a fixed width.
For instance, as you can see, when the sliding happens the text is resizing and rewrapping a lot. It should stay fixed, and appear with the same width he has when the animation is complete.
The technique I used doesnt seem to allow that. I'm starting to wonder if it's even possible to do it with such few js.

I've updated your fiddle. You needed to make the third column col-xs-12 to start. Each column size is defined based on the element it is inside. So to fill a col-xs-3 parent, the element needs to be col-xs-12. When it expands to a col-xs-9 parent, you want it to be 1/3 of the total width, or col-xs-4. So I added a toggle for that.

I solved my problem by using slickjs
here is the js part :
$('.top-slider').slick({
dots: true,
speed: 300,
infinite: false,
initialSlide: 3,
slidesToShow: 3,
slidesToScroll: 3,
variableWidth: true,
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});

Related

How to Counting numbers of the Slick Slider thumbnails

in a website that i developed , i using the "Slick Slider" and i want to count the numbers of the thumbnails, in the Jquery / js file i write the thumbnails will show as 5 , with centerMode:true,
i want (with your help, of course) to write a function that count the number of the thumbnails -
When the number is 5 OR LESS than the option of centerMode will be false (so if this 5 thumbnails or 2 thumbnails when this is on false the thumbnails will be centered bottom the big picture),
When this 5 thumbnails an ABOVE this working fine.
Thank you For Advanced...
This is the code what i have (but when the thumbnails is 5 or less they are not centered)
/** Project Slider **/
$('.single-project-slider-wrraper').slick({
rtl: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.single-project-nav-wrraper'
});
$('.single-project-nav-wrraper').slick({
rtl: true,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-project-slider-wrraper',
dots: false,
centerMode: true,
infinite: true,
arrows: true,
focusOnSelect: true
});
OK, if no one answer to me so i give the answer - the solution was that i need to switch between the js files of slick slider. i loaded the minified js ( it turns out that somthing wrong there..i don't know what ) and i needed to load the full/normal js file - slick.js , when i loaded the slick.js file the slider behave as i want (as i ask in the post above exactly ).
maybe it is strange but this is the solution :-)

Is there any way to have both slidesToScroll and swipeToScroll behavior in a slick carousel?

I have a carousel with variable widths, I would like for it to have a behavior of scrolling all displayed blocks and also for the user to swipe to any spot, but no matter how I try, they seem to contradict each other.
Here's my configuration:
$('.carousel').slick({
infinite: false,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 7,
swipe: true,
swipeToSlide: true,
});
Is there any workaround for this problem?
I have a codepen with the example below:
https://codepen.io/vicpantoja/pen/NWxqKzO
The issue is using the swipeToSlide option. Setting swipeToSlide: true overrides slidesToScroll. From the website, "Allow users to drag or swipe directly to a slide irrespective of slidesToScroll" (http://kenwheeler.github.io/slick/).
If you want 7 slides to show at one time and a swipe (or 'next' button click) to show the next set of 7, you can do it by setting these three options and removing swipeToSlide:
slidesToShow: 7
slidesToScroll: 7
swipe: true
In your case:
$('.carousel').slick({
infinite: false,
variableWidth: true,
slidesToShow: 7,
slidesToScroll: 7,
swipe: true
});

Slick Slider with Visual Composer

I want to use slick slider with sync option in my theme. I added js&css files in my functions.php. I created row in VC, then 2 columns. In first column I have 3 paragraphs. On second column I have 3 images. I want to scroll paragraphs and the change images. This is how it looks now
in my custom js I added something like this
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
In result I got something like this
What's wrong wrong with my code? Where I should add classes for slick slider? Thank you for any help!

Disable next/prev partial view in center mode slick slider

I want to use center mode in slick slider but need to avoid partial prev/next slides. (Just show the three main divs only)
My settings is like this,
$('.framefitFacelist').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: false,
centerMode: true
});
Thanks.
Hi you can change this with javascript. You have to set the opacity of the partial slides to 0;
Essentially you can create a variable and set prev and next slide opacity to 0 when concatenating css and then call the beforeChange slick event.
I found this fiddle that seems to achieve what you are looking for.
test it out
https://jsfiddle.net/yassarikhan786/uwgjx6nv/

appendDots with multiple Slick carousels

I have multiple Slick carousels and the appendDots parameter is adding too many navigation dots to each carousel.
e.g. if I have 3 Slick carousels, 3 sets of dots are appearing on each carousel, instead of one set for each.
$('.carousel').each(function() {
$(this).slick({
infinite: true,
speed: 300,
slidesToShow: 1,
dots: true,
appendDots:'dots-container'
});
})
Any idea how to limit the appendDots parameter to just this carousel?
Presumeably your 'dots-container' selector is a class you have multiple times on the page so it's adding the dots to each instance of that class once for each carousel.
Instead of using the same global selector for each carousel make it relative to each instance of the carousel
$('.carousel').each(function() {
$(this).slick({
infinite: true,
speed: 300,
slidesToShow: 1,
dots: true,
appendDots:$(this).siblings('dots-container')
});
})
I don't know where the container is relative to the carousel, this snippet assumes it's a sibling

Categories

Resources