I'm using slick.js and trying to position the slider at the bottom of the page.
I'm using position:fixed but it simply breaks the slider, meaning every movement causes each cell to grow, double in size I think.
Is there a workaround for this?
Here's my code:
<div class="cappa__holder">
<div class="cappa">111</div>
<div class="cappa">222</div>
<div class="cappa">333</div>
<div class="cappa">444</div>
<div class="cappa">555</div>
<div class="cappa">666</div>
<div class="cappa">777</div>
</div>
.cappa__holder {
/* uncomment next line to see it break */
//position: fixed;
bottom: 0;
}
.cappa {
text-align: center;
background:#f1f1f1;
margin: 4px;
border: 1px solid blue;
}
$(document).ready(function(){
$('.cappa__holder').slick({
infinite: true,
arrows: true,
slidesToShow: 4,
slidesToScroll: 4,
speed: 600
});
});
Here's a fiddle to show the problem
Problem: when .cappa__holder has position:fixed; and does not have height, the slick can not calculate the size of slides. However, you only need to give width to the .cappa__holder to solve your problem(for example width:100%).
Jsfiddle
Related
Using Slick slider to make a changing/fading line of text. I want stationary text to the left of it and display the dynamic text to the right in the slider. When I try to use inline-block on both elements, the slider does not size down correctly to allow it to join the stationary text on the same line. When I use display: flex; on the .slider-container, it makes the slider be insanely wide and thus makes the .stationary text tiny, and doesn't allow it to resize even with flex-grow. Please advise!
See here (and comment/uncomment to see inline-block and flex behaviors:
( function( $ ) {
// Add slick slider
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 200,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000
});
} )( jQuery );
/* INLINE-BLOCK: Does not allow slider to resize smaller */
.stationary, .slider {
display: inline-block;
}
/* FLEX: Results in extremely wide slider and crunches down the .stationary block */
/* .slider-container {
display: flex;
align-items: center;
}
.stationary {
flex-grow: 1;
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet"/>
<div class="slider-container">
<div class="stationary">You can: </div>
<div class="slider">
<div class="item">do this</div>
<div class="item">make that</div>
<div class="item">win this</div>
<div class="item">give this</div>
</div>
</div>
So I tested out your code in JSFiddle and ran into the issues you presented, and it rattled by brain to find a truly dynamic solution but couldn't atm. However i did find a solution in which i just set a width on the slider and a max-width on the container.
You can see the Fiddle here with the solution using your code.
// Add slick slider
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 200,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000
});
.slider-container {
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 500px;
overflow: hidden;
}
.stationary {
flex-shrink: 0;
flex-grow: 1;
flex-basis: auto;
margin-right: 10px;
}
.slider {
flex-shrink: 1;
flex-grow: 0;
flex-basis: 100%;
text-align: left;
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider-container">
<div class="stationary">You can: </div>
<div class="slider">
<div class="item">do this</div>
<div class="item">make that</div>
<div class="item">win this</div>
<div class="item">give this</div>
</div>
</div>
Additionally i'd ask, if you needed to use slick to accomplish that at all and would alternatively use a lighter weight approach as seen in this simple pure JS (jquery) based solution.
const answers = ['do this', 'make that', 'win this', 'give that'];
let activeIndex = 0;
$('.answer').text(answers[activeIndex]);
setInterval(() => {
if (activeIndex === answers.length) {
activeIndex = 0
} else {
activeIndex++
}
$('.answer').text(answers[activeIndex]);
}, 1500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<h1>
You can: <span class="answer"></span>
</h1>
Lastly, there is already a plugin out there that I've used in the past to achieve what you're trying to do with minimal effort. It's called "Typed", here is their site https://mattboldt.com/demos/typed-js/.
Am trying to do a netflix like slider but with different hover effect. Here's how the mockups look https://pasteboard.co/IGwDwLE.png
I also wonder why it gets off once I set the variablewidth:true for slidesToShow config.
I'd also like to have a spacing for the first item and when the user hit the next item i'll fill up that space like so https://pasteboard.co/IGwFVmy.png
I have this config of slick slider.
$('.slider-inner').slick({
dots: true,
infinite: true,
cssEase: 'linear',
slidesToShow: 5,
slidesToScroll: 5,
arrows: true,
});
The CSS pseudo class :hover can be used to define the style of elements in the slider on hover, and a negative right margin can achieve the positioning effect for the first element.
When using slick.js, note the following:
The items in the slider are given a class slick-slide. Use it to target the slider elements in your stylesheets.
Insert your own CSS after slick-min.css and slick-theme-min.css so that your custom styles override the default.
Define the width of slide elements if you are using variableWidth: true.
Here's an example:
$('.slider-inner').slick({
dots: true,
infinite: true,
cssEase: 'linear',
arrows: true,
variableWidth: true,
});
.slider-outer {
margin: 0 auto;
padding: 30px;
width: 70%;
background: #ccc;
}
.slick-slide {
text-align: center;
color: #ccc;
background: white;
border-left: 2px solid #ccc;
width: 91px;
}
.slick-slide:hover {
width: 130px;
color: red;
transition: .5s linear;
}
.first {
margin-right: -50px;
}
.first:hover {
margin-right: 0px;
transition: .5s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<div class='slider-outer'>
<div class='slider-inner'>
<div class='first'><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
<div><h3>7</h3></div>
<div><h3>8</h3></div>
<div><h3>9</h3></div>
<div><h3>10</h3></div>
</div>
</div>
Try This
centerMode: true,
centerPadding: '60px'
Live slick Demo
You can achieve the mockup design by using below settings of slick js
centerMode -
Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding -
Side padding when in center mode (px or %) and by default value is set to 50px.
You can find all slick configurations in below link
https://kenwheeler.github.io/slick#settings
Example
$(".single-item").slick({
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
});
You can check the live example in below link
https://jsfiddle.net/afz0os4w/
hope you can help with this...
I'm using Slick slider to display some images. The images on the slider should change size dependent on the size of the screen, this works fine on Chrome and Firefox but when I try to view on MS Edge The full size layout works but the layout which has been optimized for tablets and phones shows the slider images sitting in the top left corner of the available space. I can't work out why they wouldn't take up 100% of the available width as they do on the other browsers.
The code I'm using is as follows:
HTML
<!--Image slider-->
<div id="portfolio-container" class="slider">
<div class="slide"><img src="graphics/example01.svg" alt="Example" title="Example"></div>
<div class="slide"><img src="graphics/example02.svg" alt="Example" title="Example"></div>
<div class="slide"><img src="graphics/example03.svg" alt="Example" title="Example"></div>
</div>
CSS
#portfolio-container {
width: 80%;
margin: 0 auto;
}
#portfolio-container img{
max-width: 100%;
padding: 5px;
margin: 0 auto;
text-align: center;
}
Javascript
$(document).ready(function(){
$('.slider').slick({
autoplay: true,
autoplaySpeed: 3500,
infinity: true,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [
{
breakpoint: 600,
settings: {
autoplay: true,
autoplaySpeed: 3500,
infinity: true,
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
When loading slick slider in collapsed content (angular-bootstrap collapse plugin in this case) the .slick-track div gets 0px width, resulting in the slider trying to fit all slides on top of eachother. When pressing arrow to see next slide, the slides go back to normal. If I select the slider and want to check the components in my browser, it also goes back to normal.
Please see this example:
http://plnkr.co/edit/iw9f2alEnK0HFkv1eq16?p=preview
This is the slick configuration I'm using:
$(document).ready(function(){
$('.tourImageSlider').slick({
dots: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1500,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 1000,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}]
});
});
Would anyone have an idea of how to solve this?
Finally I got the answer by slick creator Ken Wheeler himself. When collapsable content is triggered open, simply call the following line:
$('.slider-class').slick('setPosition');
...and replace "slider-class" with the class name of your slider.
Personally I created an angular function with this line, and triggered it with ng-open.
Problem related to the reason that slick carousel cannot get correct width from block that has {display: none} or small width like {width: 1px}.
This situation is often occurring when content is hidden with styles like in example below:
.product.data.items>.item.content~.content {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The idea is to use {overflow-y: hidden} and {height: 0} for content hiding instead of {display: none}. And after tab activation, it is needed to set {height: auto;} for content.
// fix for slick carousel that initializes with zero width in collapsed tab
// it happens in tab with {display: none;} + small width like {width: 1px;}
.tab-content-selector {
width: 100%;
display: block !important; // if it set to display: none by script
overflow-y: hidden;
height: 0;
padding: 0 15px; // can be adjusted according to needs, but top and bottom padding must be zero
}
.tab-title-selector.active + .tab-content-selector {
height: auto;
padding: 10px 15px 30px; // can be adjusted according to needs
}
I have started using the Slick Carousel plugin for a website I am working on and for some reason, if I set a wrapper around the targeted element for the Slick Carousel, the width is not honoured unless I set it with pixels which is not an option when I need the width to only grow to the size of the parent element.
I am using Bootstrap as well in case this helps.
HTML
<div class="col-md-6 col-xs-12">
<div class="group-filter">
<span class="title">Group Filter</span>
<div class="group-slick-cell">
<div class="group-slick-wrapper">
<div class="group-slick">
<div><button class="btn btn-groups">Group 1</button></div>
<div><button class="btn btn-groups">Group 2 more text</button></div>
<div><button class="btn btn-groups">Group 3</button></div>
<div><button class="btn btn-groups">Group 4 text</button></div>
</div>
</div>
</div>
</div>
LESS:
.group-filter {
display: table;
width: 100%;
.title {
display: table-cell;
font-size: 16px;
color: #text-color;
padding: 0 5px;
vertical-align: middle;
width: 1%;
}
.group-slick-cell {
display: table-cell;
width: 100%;
height: 31px;
.group-slick-wrapper {
margin-left: 17px;
width: 100%
.btn {
margin: 0 5px;
}
}
}
}
JS:
groupSlick.slick({
infinite: true,
dots: false,
speed: 200,
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true,
centerMode: true,
draggable: false,
accessibility: false
});
Here's a JSFiddle of the actual issue. The child of the parent container is pushing the width out to 20,000px which is wider than what Bootstrap should be going to.
https://jsfiddle.net/wqvth9ms/
For someone that might be looking for a similar fix to this, I have created an update to the original jsFiddle below that might be able to help you out.
I changed the display: table-cell into a float: left and also added the table-layout: fixed to the wrapper element.
https://jsfiddle.net/wqvth9ms/1/
The markup had the class group-slick-cell for one of the parents. group-slick-cell is a class used by slick-carousel. Just change it to something and you will be alright
Fiddle - https://jsfiddle.net/y3vs6h9q/
Note that I renamed the class to group-slick-cell1 only in the markup. I wasn't sure which of the styles in the CSS came from your customizations and which from slick-carousel.