I use click slider http://kenwheeler.github.io/slick/, main display size for slider is 1920 px, but if size becomes smaller images become cropped.
here is my code
<div id = "main-slider">
<div class = "main-slider__slide">
<div class = "main-slider__slide_img">
<img src="" alt = "">
</div>
</div>
</div>
But I think better to see on the url http://evrika.tests1.enlight.studio/ because plugin ads lots of additional html and css
$('#main-slider').slick({
dots: true,
slidesToShow: 1,
arrows: false,
slidesToScroll: 1,
centerMode: true,
centerPadding: '0px',
});
How can I make images centered?
Related
I have implemented a slick slider which works fine in 1200px, but as soon I resize, it breaks down. I need to implement 3 slides in 1200px, 2 slides in 786px and 1 slide in 576px screen with equal space between each slide. When I tried to put a margin between each slide, the first slide, cuts off. Here is my code.
JQUERY
jQuery('.multiple-items').slick({
prevArrow: '<button class="image-prev w-30 w-md-40 w-lg-50 h-25 h-lg-50 h-md-40 border-0 bg-bfp-primary position-absolute rotate180"></button>',
nextArrow: '<button class="image-next w-30 w-md-40 w-lg-50 h-25 h-lg-50 h-md-40 border-0 bg-bfp-primary position-absolute "></button>',
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false,
mobileFirst: true,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
mobileFirst: true,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
mobileFirst: true,
}
}
]
});
jQuery('.slick-list').find('.slick-active').addClass('slick-slide-margin');
PHP
<div class="ml-7 ml-xl-24 mr-0">
<div class="pt-6.8 pb-9">
<h2 class="font-inter-medium fz-20 text-theme-blue-dark leading-24">Photo Gallery</h2>
<div class="multiple-items pt-4" >
<?php
while ($photo_gallery_query->have_posts()) : $photo_gallery_query->the_post();
$featured_image_url = get_the_post_thumbnail_url(get_the_ID(),'full');?>
<div>
<img src="<?php echo $featured_image_url; ?>">
</div>
<?php endwhile;
wp_reset_postdata();?>
</div>
</div>
</div>
SASS
.slick-slide-margin {
#extend .w-270;
#extend .mr-xl-7;
#extend .mr-3;
}
Hi #Kuldeep Upreti and welcome to Stackoverflow.
Just to make sure, have you tried to compare your solution to their demos?
http://kenwheeler.github.io/slick/
Also this thread might be helpful,
Slick slider not being responsive when resizing the window
Often, the kind of problem you describe, is pretty easy to solve once you figure it out. Most of the times it's just a minor fix, like a missing configuration, event and so on.
To make it easier to help, you can also set up a demo using a service like CodePen (or any other similar service),
https://codepen.io/
Let us know if you're not being able to solve your problem with these links. :-)
I just created a sample slick slider with fadein and fadeout effect. I want to add a once second delay between fadein and fadeout effect of these slider images. i.e after fadeout of once slide image there should be one second gap to the next slider image fadein. Below is my code and code pen link.
Here is Code
$(document).ready(function($) {
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade:true,
autoplay: true,
speed: 2000,
cssEase: 'linear',
pauseOnHover:true,
responsive: [{
breakpoint: 767,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/39/beach-3352363_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2016/03/08/20/03/flag-1244649_960_720.jpg">
</div>
</div>
Code pen Link: https://codepen.io/dSaif/pen/ExaaQJV
Please help me how can i do this
I want to use slick.js for a simple news ticker. So I have a box where text is coming from the right and automatically scrolls to the left in a loop. The problem is that slick.js refuses to move the text if there is just one slide. I want the slide to move from the right to the left and after passing the left edge it should start moving from the right again. Does anyone know how to achieve this? Here is a little fiddle showing my problem. It uses this javascript code:
$(function(){
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true
});
});
Looks like slick carousel isn't built to work with only one element. How about using jQuery to clone your slide once so the plugin works? See functional example below:
$(function() {
if ($('.slider div').length == 1) {
$('.slider div').clone().appendTo('.slider');
}
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true
});
});
img {
margin: 10px;
border: 1px solid black;
}
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<section class="slider">
<div>
<img src="http://placehold.it/350x150" />
</div>
</section>
Jon's answer is good, but it will give you two same slides which you can slide (change). If you wish to show single slide without cloning, you can use initialSlide setting.
$(function() {
var start = 0;
if ($('.slider div').length == 1) {
start = -1;
}
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true,
initialSlide: start
});
});
I have created a logo slider which displays similar to marquee. What I want to do is to add next/prev arrows that can accelerate the speed of slider when click next arrow and reverse the slider when click prev arrow. I currently use slick carousel to make it.
Also I have no idea why sometimes my carousel pause for a second then continue, can anyone help me with this?
$(document).ready(function($) {
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 6500,
initialSlide: 1,
draggable: false,
});
});
<div class="marquee-logo">
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
</div>
http://codepen.io/takumi24/pen/JRzEjA
This can be used to make slider slow
$("#slowbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 10000,
initialSlide: 1,
draggable: false,
});});
This for making faster
$("#nextbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 300,
initialSlide: 1,
draggable: false,
});
});
http://codepen.io/anon/pen/yawgra
On button click first destroy the slider and add slider again with increased/decreased speed
You can also try by this $('.marquee-logo').slick('slickSetOption', 'speed', 500,true); with out destroying the slider
But speed change by slickSetOption method cause a delay:issue https://github.com/kenwheeler/slick/issues/2334
User XZY's answer worked for me. While playing with it I also noticed that slick (at least in the implementation I was using) exposes an options property which is modifiable. So the below might work as well:
var slickSlider = $('.marquee-logo')[0]
slickSlider.slick.options.autoplaySpeed = 500
I am currently working on a new project which required a slider. I have implemented slick JS for one of my project.
Now I need to add thumbnails which will appear when we hover the dots which will link to the slider
For example, click on first thumb and slider will advance to first slide,....click on third and slides to third slide.
HTML
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/style.css"/>
</head>
<body>
<!-- THis is the slider code -->
<div class="center">
<div><img alt="slide 2" src="images/img1.jpg"></div>
<div><img alt="slide 2" src="images/img2.jpg"></div>
<div><img alt="slide 2" src="images/img3.jpg"></div>
<div><img alt="slide 2" src="images/img4.jpg"></div>
<div><img alt="slide 2" src="images/img5.jpg"></div>
</div>
<script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 1,
dots: !0, /* It is for the navigation dots */
draggable: !1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
</script>
</body>
</html>
You may replace dots with custom thumbnails. You would need to add thumbnails somewhere (for example, in a hidden div inside the image slide wrapper. See the code for reference:
$('.slideme').slick({
dots: true,
customPaging: function(slider, i) {
// this example would render "tabs" with titles
return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>';
},
});
You would also need tweak up the native Slick pager css to remove dots and add more space and styles for your thumbnails
add a data attribute to the slide like the bellow
<div class="slide" data-thumb="{{assets}}/images/image-name.jpg"></div>
after that add customPaging function inside the script like bellow
$('.slider').slick({
dots: true,
customPaging: function(slider, i) {
return '<button><span class="thumbImg" style="background-image:url('+$(slider.$slides[i]).data('thumb')+');"></span></button>';
},
});