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>
Related
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
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 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.
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.