We Keep Coding

Add stationary text next to slick slider (using inline-block or flex messes up slider sizing)

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/.

How to expand width of hovered slide in slick slider and set spacing for the first item?

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/

Using Swiper JS slider - I would like to align first slide left, and show second slide peaking from off screen

I am using swiper JS set to cover flow with following settings.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 1,
loop: true,
coverflow: {
rotate: 40,
stretch: 0,
depth: 50,
modifier: 1,
slideShadows : false
}
});
However I would like to show a portion (maybe 20%) of the next slide peaking from the right hand side of the screen. I do not want the slide to be centred but still want to coverflow 3D effect.
Here is a mockup of how I want the slider to look.
I appreciate any help you can offer :)

Put the swiper in a container, set the swiper width to whatever width you want the active slide to be (80% for example) and don't forget to set the overflow property to visible for the swiper and hidden for the container.
(function($){
$(document).ready(function(){
var swiper = new Swiper('.swiper', {
effect: 'coverflow',
grabCursor: true,
slidesPerView: 1,
loop: true,
coverflow: {
rotate: 40,
stretch: 0,
depth: 50,
modifier: 1,
slideShadows : false
}
})
});
})(jQuery);
.container {
width: 150px;
height: 100px;
padding: 20px 10px;
background-color: lightgrey;
overflow: hidden;
margin: 0 auto;
}
.swiper {
width: 80%;
height: 100%;
}
.swiper-slide {
background: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
</div>
The only problem would be with the loop: true parameter as when on the last slide, the next slide seem to only be added when the slide event occurs.

For https://swiperjs.com/ use below snippet as example. This worked for me.
var swiper = new Swiper('.swiperX', {
initialSlide: 0,
slidesPerGroup: 1, // helps it to align in the left if set to 1
});

Slick slider "position: fixed"

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

Slick carousel has 0px width when loaded in collapsed tab

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
}