Slick does not allow multiple slides - javascript

First slides are working fine. But when i add second slides its now working. I'm changing the className, why its not working? If you help me i will be glad. Thank you
$(document).ready(function() {
$('.sidebar-slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 3,
prevArrow: $('.prev1'),
nextArrow: $('.next1')
});
});
$(document).ready(function() {
$('.sidebar-slick2').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 3,
prevArrow: $('.prev2'),
nextArrow: $('.next2')
});
});
<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.8.1/slick.min.js"></script>
<div class="sidebar-slick">
<div> Test </div>
<div> Test </div>
<div> Test </div>
</div>
<div class="sidebar-slick2">
<div> Test </div>
<div> Test </div>
<div> Test </div>
</div>

Related

I need to display some slider items. When I go to one item with images pages all works. But if few items all crashes

http://stage.proavtoshkoli.ru/saint-petersburg/avtoshkola-distanciya - Its solo item with images
http://stage.proavtoshkoli.ru/search?city=saint-petersburg&category=b - This is multiple items
My slick settings
$('.image-slides-wrapper').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
nextArrow: document.querySelector('.nextBtn'),
prevArrow: document.querySelector('.prevBtn'),
responsive: [{
breakpoint: 1035, settings: {
slidesToShow: 3, slidesToScroll: 1
}
},
{
breakpoint: 900, settings: {
slidesToShow: 2, slidesToScroll: 1
}
},
{
breakpoint: 600, settings: {
slidesToShow: 1, slidesToScroll: 1
}
},]
});`
And HTML
<div class="item-slides">
<div class="image-slides-wrapper">
#foreach($school->getImages() as $image)
<div class="offer__slide">
<img class="slide" src="{{asset("storage/" . $image)}}" alt="">
</div>
#endforeach
</div>
<div class="btn_control">
<button class="nextBtn"></button>
<button class="prevBtn"></button>
</div>
</div>
Try to read documentation but there is no answers((( Need help

slick slider : Add half image in the right corner

In slickslider, I need to show half image of the next slide on the right corner on the first time. If I click on the next arrow, then half image should be displayed on both sides.
Currently, I tried using center mode that gives only 2% of image of next slide and that too only on the right side.
$(document).ready(function(){
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 3,
dots: false,
centerPadding: '30px',
nextArrow: '<div class="nav-arrow slick-next slick-arrow"><i class="icon-rightarrow-lg"></i></div>',
prevArrow: '<button class="nav-arrow slick-prev slick-arrow leftarrow"><i class="icon-leftarrow-md" aria-hidden="true"></i></button>',
focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
nextArrow: '<button class="nav-arrow slick-next slick-arrow"><i class="icon-rightarrow-md"></i></button>',
prevArrow: '<button class="nav-arrow slick-prev slick-arrow"><i class="icon-leftarrow-md"></i></button>',
}
},
]
});
if( $('.slick-prev').hasClass("leftarrow")){
var currentSlide = $('.slider-nav').slick('slickCurrentSlide');
$('.slick-prev').toggle(currentSlide != 0);
$('.slider-nav').one('afterChange', function() {
$('.slick-prev').show();
});
}
});
<div class="sec-nav">
<div class="sec-nav-title"><h2 class="shop-category">Shop by Category</h2></div>
<div class="slider slider-nav" id="slick-slider-nav">
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image1.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Bath & Body </span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image2.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Hand </span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image3.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Bath & Body Gift Sets</span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image4.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Home</span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image5.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Men's</span></div></div>
</div>
</div>

Slick carousel out of memory

I am having memory issues using the plugin slick.
I created a simple website in using .php files. I have 3 pages and one slider on each of them.
The browser struggles to load the pages after a few interaction with the slider and I get the following error in the console 'Uncaught out of memory'. I am not an expert in javascript nor in memory leaks. If someone could help me understand the problem, I would greatly appreciate it. Thanks.
Here is my main javascript file for the entire website:
// on index.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
// on page2.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
// on page3.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
//I cannot share the source code for legal reasons but basically this is the html stucture. On the actual project, I use images.
var opt1 = {
dots: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
speed: 300,
variableWidth: true,
arrows: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]'),
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
]
}
var opt2 = {
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 300,
arrows: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]')
}
var opt3 = {
dots: false,
infinite: false,
slidesToShow: 3,
slidesToScroll: 0,
speed: 300,
arrows: false,
centerMode: false,
variableWidth: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]'),
responsive: [
{
breakpoint: 1197,
settings: {
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
centerMode: false
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 761,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
}
$(document).ready(function(){
var gadgetCarousel = $(".slider");
gadgetCarousel.each(function() {
if ($(this).is(".one")) {
$(this).slick($(opt1));
}
else if ($(this).is(".two")){
$(this).slick($(opt2));
}
else if ($(this).is(".three")){
$(this).slick($(opt3));
}
else {
$(this).slick();
}
})
}
I changed the value of the option 'slidesToScroll' from 0 to 3 and the 3rd slider works fine.

Slick slider to show all elements on desktop but show x amount on screen resize

I have a six images in my slick slider.
On desktop (1200px +) I want to display all images in a row (which works).
At 992px width, I want it to only display 3.
First time using slick slider so I'm unsure if this is the right approach: currently, I have one parent div which is trying to accomplish my goals, but unsure if the correct approach would be to contain two divs:
Div 1 will show all six images in a row and then be hidden at 992px width.
Div 2 will contain the slick slider and be shown at 992px width.
Current approach:
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
infinite: true,
cssEase: 'linear'
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="slick/slick.min.js"></script>
<div class="showcaseRow py-4" align="center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 img__container justify-content-center align-self-center">
<div class="slider">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
</div>
</div>
You can set breakepoints for responsive
$('.center').slick({
slidesToShow: 6,
slidesToScroll: 6,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});

Slick slider - Show 3 slides on pop up

The code below is a slick carousel that when someone clicks a slide, it will pop up the whole carousel. It is done with slick slider.
The problem that I have is on the pop up carousel, because it shows one slider at a time and I need it to show 3 slides... It has the slidesToShow: 3 so I don't know why it's not working...
Any ideas?
Code embedded:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">
CSS:
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
HTML:
<section class="center slider">
<div class="single">
<a href="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=1">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=2">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=3">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=4">
</a>
</div>
</section>
JS:
<script type="text/javascript">
$(document).on('ready', function() {
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
mobileFirst: true
});
$('.center').slickLightbox({
itemSelector: 'a',
navigateByKeyboard: true,
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true
});
});
</script>
You need to pass slick options to carousel like this:
$('.center').slickLightbox({
slick: {
itemSelector: 'a',
navigateByKeyboard: true,
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true
}
});
For all other options check here: https://github.com/mreq/slick-lightbox
$(document).ready(function() {
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
mobileFirst: true
});
$('.center').slickLightbox({
slick: {
itemSelector: 'a',
navigateByKeyboard: true,
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true
}
});
});
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>
<section class="center slider">
<div class="single">
<a href="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=1">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=2">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=3">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=4">
</a>
</div>
</section>
I don't use jQuery, but I do Slick from time to time. It looks that you're trying to initiate another instance from the same markup, but it might be that slickjs has an instance already, where is trying to do the same slickLightbox - had a quick read and noticed it's a plugin/extension for slickjs.
So, what I suggest you to do is to add a listener to each slide panel and when it clicks you create a new instane of slickLightbox. You'll need a different markup for this too (to keep both separated, to avoid any instances clashing against).
// mind typos, did this quickly, but the syntax should be similar
var panels = document.querySelectorAll('.slick .single')
panels.addEventListener('click', function () {
$('.cloned-markup').slickLightbox({
itemSelector: 'a',
navigateByKeyboard: true,
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true
});
})
And the extra markup:
<div class="cloned-markup">
<div class="single">
<a href="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=1">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=2">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=3">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=4">
</a>
</div>
</div>

Categories