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 */
Related
$('.vendor_slider_fixed ').slick({
dots: false,
arrows:false,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3
});
Here I have shared screenshot I have implemented slick slider on my website but it showing unexpected behavior after one time scroll it works completely perfect Can you please help me to get rid of this issue? any help would be appreciated
https://prnt.sc/26np6ld
Try to reinitialize it by adding reInit or some other parameter/method. https://kenwheeler.github.io/slick/
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.
I'm using a slick slider on Center Mode where the number of slidesToShow is an even number.
The requirement i have is for the active slides to be at opacity 1 and the rest at opacity 0.5.
Slick js has a slick-active class that is applied to it automatically. Unfortunately the number of slides being even makes the implenetation wrong.
As seen in the picture the first half inactive slide on the left is at half opacity. I want the same for the 5th slide with 'slide-active' class. Somehow the nth-child and last-child selectors aren't working as I assumed.
What could be a work around?
try adding reduced opacity to slick-slide class and then apply full opacity to active slides.
$('.accom-slider').slick({
centerMode: true,
slidesToShow: 3
});
I've made something like this for my use, hope it can help:
http://test.woolet.co/slick-slider-centered/
$('.center').slick({
speed: 500,
arrows: false,
centerMode: true,
centerPadding: '0px',
slidesToShow: 3
});
I am using slick plugin and I have problem with centering items when there is only one element. My code:
$('#divId').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
If I have few elements in the container everything is OK (centerMode works great) but when I have only one element in slick queue - it goes to the right hand side.
Real example
I couldn't reproduce that problem on jsfiddle. I coppied my code there but everything seems to be ok there: jfFiddle
Does anybody know where is the problem ?
Thanks in advance.
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.