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>
Related
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>
Add owl carousel css and js:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css
Owl carousel stop showing images, but earlier it was working correctly. I haven't changed anything in code before.
Here is JavaScript and HTML code:
var carouselLite = function() {
var owl5 = $(".owl-carousel5");
owl5.owlCarousel({
items: 1,
margin: 0,
center: false,
responsiveClass: true,
loop: true,
nav: true,
dots: true,
autoplay: true,
smartSpeed: 500,
responsive:{
0:{
nav:false
},
480: {
nav:false
},
768:{
nav:false
},
1000:{
nav:true,
}
},
navText: [
"<i class='icon-arrow-left owl-direction'></i>",
"<i class='icon-arrow-right owl-direction'></i>"
]
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel5">
<div class="item"><img src="images/draft_duo_1.png" alt="Draft Duo 1"></div>
<div class="item"><img src="images/draft_duo_2.png" alt="Draft Duo 2"></div>
<div class="item"><img src="images/draft_duo_3.png" alt="Draft Duo 3"></div>
<div class="item"><img src="images/draft_duo_4.png" alt="Draft Duo 4"></div>
</div>
This is site photo
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>
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
}
}
]
});
I'm using Ken Wheeler Slick.js to display a carousel on my page.
I'm using the carousel to display a list of thumbnails. These thumbnails can be clicked to show in a preview section on the page and if the preview image is clicked, a carousel of full size images pop up. I want the carousel of full size images to strt on the correct picture that is clicked. To do this I'm using the data-slick-index attribute
Here is my code
HTML:
<div class="image-popup-container">
<button id="close"><i class="fa fa-times"></i></button>
<div id="closearea"></div>
<ul id="image-popup" class="image-popup">
<li class="product-image">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</li>
<li class="product-image">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
</li>
<li class="product-video">
<iframe src="//fast.wistia.net/embed/iframe/w4ithbv9tz" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="360"></iframe>
</li>
</ul>
</div>
<div class="images">
<div id="image-preview" data-slick-index="0">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</div>
<ul id="image-thumbs" class="thumbnails">
<li class="product-image-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</li>
<li class="product-image-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
</li>
<li class="product-video-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Video-Thumbnail.jpg">
</li>
</ul>
</div>
jQuery
$(document).ready(function(){
// Load Carousel of thumbnails
$('.thumbnails').slick({
dots: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
infinite: false,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true
});
// Grab Preview image
var imagePreview = $("#image-preview")
// Open product video thumbnail into iframe popup
// Listen for when product-video-thumbnail is clicked
$('.product-video-thumbnail').click(function(){
// Grab clicked product-video-thumbnail data-slick-index
var videoData = $(this).attr('data-slick-index');
imagePopupContainer.fadeIn();
$('.image-popup').slick({
centerMode: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
centerPadding: '60px',
slidesToShow: 1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
// Go to the correct slide
$('.image-popup').slick('slickGoTo', videoData);
});
// Listen for when product-image-thumbnail is clicked
$('.product-image-thumbnail').click(function(){
// Grab clicked product-image-thumbnail attributes and img attributes
var imageSrc = $(this).find('img').attr('src');
var imageAlt = $(this).find('img').attr('alt');
var imageData = $(this).attr('data-slick-index');
// Fade out the preview image
imagePreview.fadeOut( function(){
// Change preview image src to clicked thumbnail src
imagePreview.find('img').attr("src", imageSrc);
// Change preview image alt to clicked thumbnail alt
imagePreview.find('img').attr("alt", imageAlt);
// Update the slick-index for modal popup carousel
imagePreview.attr("data-slick-index", imageData);
});
// Fade the preview image back into view
imagePreview.fadeIn();
});
var imagePopupContainer = $(".image-popup-container")
imagePreview.click(function(){
imagePopupContainer.fadeIn();
$('.image-popup').slick({
centerMode: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
centerPadding: '60px',
slidesToShow: 1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
var index = $("#image-preview").attr("data-slick-index");
alert(index);
$('.image-popup').slick('slickGoTo', index);
})
$("#closearea").click(function(){
imagePopupContainer.fadeOut();
});
$("#close").click(function(){
imagePopupContainer.fadeOut();
});
});
You can see this currently in action here http://algaecal.cloudcreations.ca/
With this code the slick('slickGoTo', index) does not work properly. The fullsize carousel remains on the first index.
Any help would be greatly appreciated.
I was able to get this to work by using
$('#image-popup').slick('unslick'); when I close the popup.