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.
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/
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 */
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 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 use the slick slider on my site. And no matter how much I was pulling the slider to the left or to the right, it just runs only on the number of slides that is specified in the property slidesToScroll. Is it possible to do something with slick slider that it worked like this slider http://www.owlcarousel.owlgraphic.com/demos/mousewheel.html. How much do you pulling - it scroll the same distance. Sorry for my english. Thanks you.
There is my code for init slick slide:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1
});
Just add the swipeToSlide setting, which enables swiping to any slide irrespectively to slidesToScroll
Your initializing script should look like this:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1,
swipeToSlide: true
});
In case it doesn't work, remove the slidesToScroll option. Please comment how it worked so I can edit my answer.
swipeToSlide: true
Adding swipeToSlide option does the job, even with slidesToScroll enabled. No need to disable slidesToScroll.