We Keep Coding

Slick Slide Carousel showing parts of neighbor images

I have a portfolio website (http://viktorjorneryd.com/?pid=4) where on mobile devices I have the slick slide carousel limited down to one image showing. If it's a wide picture it is shown on its own, and if it's a vertical one they are previewed two at a time. On the computer (and when resizing) it's fine, but on mobile devices it shows a small portion of the vertical photos next to the wide one, which breaks the design.
https://www.dropbox.com/s/wpsjavhxlbp67if/Screenshot_20190311-175421_Chrome.jpg?dl=0
Here is a picture of how it looks. I've tried to make the picture wider to match two vertical photos next to each other - to no avail. I'm out of the ideas and I'm not even sure why it causes this..
Here is the slick slide config.
$(document).ready(function(){
$('.slider_image_wrap_mobile').slick({
infinite: true,
speed: 100,
fade: false,
cssEase: 'linear',
arrows: true,
nextArrow: "<img class='slider_control_right' src='images/webinterface/arrow_png.png'>",
prevArrow: "<img class='slider_control_left' src='images/webinterface/arrow_png.png'>"
});
});

I would take a look into the responsive aspect
http://kenwheeler.github.io/slick/
You can define breakpoints and limit the slides that are shown.
responsive: [
{
breakpoint: 1024, // The media breakpoint
settings: {
slidesToShow: 3, // how many images you want to show in your case 1
slidesToScroll: 3,
infinite: true,
dots: true
}
},
I took a further look into this and it seems this fixed it.
.slider_image_single {
...
padding: 1px; /* this one */

Slick slider next and prev slides css

I have slick slider and I want to add some styles to the next and prev slides, but I don't know how.
Here is js
$('.works-slider').slick({
centerMode: true,
centerPadding: '200px',
slidesToScroll: 1,
slidesToShow: 1
})
There are some mothods to get prev and next slides, but it is not what I want.
https://github.com/kenwheeler/slick
ANd here is an old issue, but I can't make the same now
https://github.com/kenwheeler/slick/issues/317

Slick adds the class slick-center to the centered element, so if you just want to style the other elements, you could achieve this in CSS with this selector:
.slick-slide:not(.slick-center){
/* your custom style */
}
This will have an effect on all slider-elements except the center one. Since you have slidesToShow set to 1 that should work for the previous and next slide.

slick.js: Slider Arrows and Dots not appearing on WordPress site

Having a difficult time trying to decipher this. Recently, I took over two websites. Both use the same custom coded WordPress theme. Recently, I changed one of the hero areas to a slider using the pre-existing slick.js script the previous developer installed. After I did that, the left and right arrows, nor the dots would appear. They're supposed to appear dynamically like at http://dermalinfusion.com/. The code it would generate would be something like:
<button class="slick-prev slick-arrow" type-"button" data-role="none" aria-label="Previous" role="button" style="display: block;"></button>
However, on https://envymedical.com, they simply don't appear at all. I changed around the settings in the plugins.js file because I saw arrows: was set to false, but no luck there either. Here's the code:
jQuery('.block-heroslider').each(function() {
var $this = jQuery(this);
var $imagesSlider = $this.children('.hero-images-slider');
var $blurbsSlider = $this.children('.hero-blurbs-slider');
$imagesSlider.slick({
dots: true,
autoplay: true,
autoplaySpeed: 6000,
asNavFor: '.hero-blurbs-slider',
slidesToShow: 1,
slidesToScroll: 1,
arrows: true
});
$blurbsSlider.slick({
asNavFor: '.hero-images-slider',
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
});
});
The slider does overall work. It does move from slide one to two and back again every few seconds. I'd just to figure out why the navigation does not appear.
NOTE: I should mention we've got a ZenDesk script running that somehow is throwing an error. I deleted that code from my header.php file in my WP theme and after reloading the page, the arrows still do not appear. So that is not the cause.

How to disable Slick Slider arrows?

I'm using Slick sliders with two different styles, for my web page but I'm having a problem with arrows.
Can you please help me?
This is my main .slider, I've styled it's prev and next arrows using CSS
http://prntscr.com/7kdpgo
And here I used .filtering class of Slick, but I don't want these arrows. How can I disable them here and add those in the design?
http://prntscr.com/7kdq03

<script>
$('#carouselclass').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows : false,
});
</script>

Just set them to null. Job done!
<script>
$('#carouselclass').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
prevArrow: null,
nextArrow: null,
});
</script>

From what I see the slider generates with js its own arrows (the ones you want to remove from what i understand). But they have the functionality linked to them, so you want to make them look like those from above the slider and then replace the ones on top with them.
$(document).ready(function(){
$('.your-class-reg').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: '<a class="your-class-btn-back">Back</a>',
nextArrow: '<a class="your-class-btn-forward">Forward</a>',
rows: 1
});
});
You will have to use the same css class you used for the small top arrows instead of .your-class-btn-back and .your-class-btn-forward. After that you can move them with absolute position, overlapping the ones you initially made, and then get read of the initial ones.
This way they will look like the ones you have on top of your print-screen, and have the necessary functionality.

Carousel inside tabs

I have 4 tabs, each containing a carousel. The problem is that only the carousel in the first tab works fine. If you activate the second tabs, the carousel divs are all collapsed.
Here is an example with bootstrap 3 tabs and 'slick' plugin for the carousel: http://www.example.design-way.ro/
I tried multiple tabbing scripts and it's the same problem no matter what I use.
The carousel works fine in the second tab if you try to move it a bit..then it somehow activates.
Is this a plugin initialization problem? Here's how I do it:
$('.carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true
});
Please give me some solution or idea to get this carousel working properly. I tried tweaking the css but I got no result.

I have meet this issue When have 3 tabs, each containing a carousel.
PROBLEM:
The problem is that only the carousel in the first tab works fine.
If you activate the second tabs, the carousel divs are all collapsed.
SOLUTION:
After mail to auther of script for help. We have the resolve:
Moved all CSS files first, followed by all js files
Started javascript of Carousel first and Tabs next
For my sample has used script from:
+ TABs script: Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent
demo: http://www.racotecnic.com/tutorials/tabbedcontent/demo.html
download: http://www.jqueryscript.net/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1
+ Carousel script: als.musings.it

I'm not familiar with the tabs plugin you used, but you should enable carousel only on active (and visible) tabs only (you should have a callback for tab switching)

I also faced the same problem. The best ever solution I have found in this: http://jsfiddle.net/phpdeveloperrahul/bejFM/
Not only that. bxSlider offers a lot of options those are easy to understand and use. Some of the options I am mentioning in the following section:
mode: 'horizontal',
auto: true,
autoControls: true,
pause: 2000,
maxSlides: 4,
minSlides: 1,
controls: true,
infiniteLoop: true,
moveSlideQty: 1,
slideWidth: 200,
responsive: true,
Hope this will fulfill your need.